Funcionamento do cálculo de contraste WCAG
O Verificador de Contraste é uma ferramenta desenvolvida para avaliar a legibilidade de combinações de cores com base nas diretrizes de acessibilidade Web Content Accessibility Guidelines (WCAG 2.1 / 2.2). Ao inserir uma cor para o texto e uma cor para o fundo, o sistema calcula a proporção de contraste e valida se a combinação atende aos critérios de conformidade exigidos para diferentes elementos visuais.
A escala de contraste varia de 1:1, que representa a ausência total de contraste (como texto branco sobre fundo branco), até 21:1, que é o contraste máximo possível (texto preto sobre fundo branco). O cálculo é realizado localmente no dispositivo do usuário. Cada verificação roda no seu navegador. Nada do que você digita é enviado para o BroBroGo.
Configuração de entradas e formatos de cor suportados
Para realizar a análise, a ferramenta disponibiliza dois campos de entrada principais:
- Cor do texto: O valor cromático aplicado aos caracteres.
- Cor de fundo: O valor cromático aplicado à área traseira do texto.
Ambos os campos aceitam os formatos de cores mais comuns utilizados no desenvolvimento web:
- Valores hexadecimais (por exemplo,
#1a1a1a). - Valores baseados em RGB (por exemplo,
rgb(26, 26, 26)). - Valores baseados em HSL.
A ferramenta inicia com valores padrão configurados em #4f46e5 para a cor do texto e #ffffff para a cor de fundo, o que resulta em uma proporção de contraste inicial de 6.29:1. Caso o usuário insira um formato inválido no campo de texto, o sistema exibe a mensagem de erro: "Insira uma cor de texto válida, como #1a1a1a ou rgb(26, 26, 26).". Se o erro ocorrer no campo de fundo, a mensagem exibida é: "Insira uma cor de fundo válida, como #ffffff ou rgb(255, 255, 255).". Um botão de inversão permite trocar as cores de texto e fundo instantaneamente para avaliar o cenário reverso.
Níveis de acessibilidade AA e AAA para texto
A conformidade com as diretrizes WCAG 2.1 / 2.2 é dividida em níveis de exigência que variam de acordo com o tamanho do texto analisado. O Verificador de Contraste categoriza o texto em duas dimensões físicas:
- Texto normal: Caracteres com tamanho inferior a 18pt (cerca de 24px) ou menores que 14pt (cerca de 18.5px) quando em negrito.
- Texto grande: Caracteres com tamanho a partir de 18pt (cerca de 24px), ou a partir de 14pt (cerca de 18.5px) quando configurados em negrito.
Os limites mínimos de proporção de contraste para cada nível de conformidade são distribuídos da seguinte forma:
| Tipo de Texto | Nível AA (Mínimo) | Nível AAA (Rigoroso) |
|---|---|---|
| Texto normal | 4.5:1 | 7:1 |
| Texto grande | 3:1 | 4.5:1 |
O resultado para cada uma dessas categorias é exibido individualmente na interface com as marcações de "Aprovado" ou "Reprovado".
Contraste para componentes de interface e elementos gráficos
Além do texto literário, elementos visuais ativos e componentes de interface demandam contraste suficiente para que usuários com baixa visão identifiquem limites, estados e funções. A linha de avaliação para componentes de interface e gráficos analisa a relação de contraste com base em um limite único de 3:1.
Diferente do fluxo de texto, esta categoria não possui distinção entre os níveis AA e AAA. O resultado apresenta apenas uma única validação de "Aprovado" ou "Reprovado" baseada no cumprimento ou não do limite mínimo de 3:1. Esta regra aplica-se a bordas de campos de formulário, botões, ícones ativos e outros elementos gráficos essenciais para a compreensão do layout.
Interpretação dos vereditos de conformidade
Após processar a proporção de contraste entre as duas cores fornecidas, a ferramenta gera um veredito textual resumido que aponta o nível máximo de conformidade atingido pela combinação. Os vereditos possíveis são:
- Aprovado nos níveis AA e AAA para texto normal. (Exibido quando a proporção atinge ou supera 7:1).
- Aprovado no nível AA para texto normal. (Exibido quando a proporção está entre 4.5:1 e 6.99:1).
- Aprovado no nível AA apenas para texto grande. (Exibido quando a proporção está entre 3:1 e 4.49:1, atendendo ao mínimo para textos maiores, mas falhando no texto padrão).
- Abaixo do mínimo para AA — aumente o contraste. (Exibido quando a proporção de contraste calculada é inferior a 3:1, impossibilitando a aprovação em qualquer critério de acessibilidade).
Perguntas Frequentes
O que significam os resultados AA e AAA? AA é o nível que a maioria dos sites busca: exige uma proporção de pelo menos 4.5:1 para texto normal e 3:1 para texto grande. O nível AAA é mais rigoroso — 7:1 para texto normal e 4.5:1 para texto grande. A proporção vai de 1:1 (sem contraste) até 21:1 (preto no branco).
O que é considerado um texto grande? Textos a partir de 18pt (cerca de 24px), ou 14pt (cerca de 18.5px) quando em negrito. Textos maiores continuam legíveis com menor contraste, por isso passam no nível AA com 3:1 e no AAA com 4.5:1, em vez dos limites mais rígidos para texto normal.
Quais formatos de cor posso inserir? Digite um valor hexadecimal como #1a1a1a, um valor rgb() como rgb(26, 26, 26) ou um valor hsl() — ou clique em qualquer uma das amostras para escolher uma cor. Use o botão de inverter para trocar as cores do texto e do fundo.
Este teste usa o WCAG 2 ou o novo método APCA? Ele usa a fórmula do WCAG 2.1 / 2.2, que é a referência atual para regras e auditorias de acessibilidade. O APCA é um método mais novo e baseado na percepção visual que ainda está sendo elaborado para o WCAG 3 — é promissor, mas ainda não é um padrão de conformidade oficial, por isso os resultados de aprovação aqui não o utilizam.