Contraste de cores e acessibilidade: o que diz a WCAG
O verificador de contraste calcula a taxa de contraste entre a cor do texto e a cor do fundo segundo as Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.2), a referência internacional adotada também pela legislação brasileira de acessibilidade digital. A ferramenta mostra se a combinação é aprovada nos níveis AA e AAA e sugere cores parecidas que atingem o mínimo exigido.
Como a taxa de contraste é calculada
A taxa compara a luminância relativa das duas cores, ou seja, o quanto cada uma parece clara para o olho humano. O resultado vai de 1:1 (cores iguais) a 21:1 (preto sobre branco). A fórmula é (L1 + 0,05) / (L2 + 0,05), onde L1 é a luminância da cor mais clara.
Valores mínimos
- Texto normal: 4,5:1 para o nível AA e 7:1 para o nível AAA.
- Texto grande (a partir de 24px, ou 18,5px em negrito): 3:1 para AA e 4,5:1 para AAA.
- Componentes de interface e gráficos (bordas de campos, ícones, elementos de gráficos): 3:1.
O nível AA é o exigido pela maioria das normas e boas práticas. O AAA é recomendado para textos longos e públicos com baixa visão.
Como usar
- Informe a cor do texto e a cor do fundo pelo seletor ou digitando o código (HEX, RGB ou HSL).
- Veja a taxa de contraste e quais critérios a combinação atende.
- Se não passar, clique em uma das sugestões: a ferramenta ajusta apenas a luminosidade, mantendo o tom da sua cor.
Por que o contraste importa
Cerca de 1 em cada 12 homens tem algum tipo de daltonismo, e a visão perde contraste naturalmente com a idade. Além disso, todos usamos telas sob o sol ou com brilho baixo. Um bom contraste torna o conteúdo legível para mais pessoas, melhora a experiência e evita problemas com auditorias de acessibilidade.