Como usar
- Informe a cor do texto e a do fundo, como códigos HEX ou pelos seletores.
- Leia a razão e a tabela de atende / não atende. A prévia mostra os dois tamanhos de texto.
- Use Inverter cores para conferir a combinação oposta, como texto claro sobre fundo escuro.
A fórmula
O WCAG 2 define a luminância relativa como L = 0,2126 R + 0,7152 G + 0,0722 B, em que cada canal é antes convertido de sRGB para luz linear. A razão de contraste é (L1 + 0,05) / (L2 + 0,05), com L1 sendo a cor mais clara. Preto sobre branco dá 21:1, e duas cores iguais, 1:1.
| Nível | Texto normal | Texto grande |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Elementos de interface e gráficos com significado precisam de 3:1 para AA.
Exemplo
Cinza #777777 sobre branco: a luminância do cinza é de cerca de 0,184, então a razão é 1,05 / 0,234 = 4,48. Atende para texto grande, mas não atende AA para texto normal. Com #767676 a razão sobe para 4,54:1 e já atende AA.
Dicas
- Contraste não é a única exigência de acessibilidade: não passe informação só pela cor.
- Texto sobre imagens ou degradês deve ser conferido no ponto mais desfavorável.
- O contraste do WCAG 2 é uma medida simples, com pontos fracos no modo escuro e com fontes finas; trate-o como um mínimo.