Contraste de cores (WCAG AA/AAA)
Calcule a razão de contraste entre a cor do texto e a do fundo e veja se passa em WCAG AA e AAA.
- Roda no seu navegador
Resultado
O resultado aparece aqui.
Como a razão de contraste é calculada
razão = (L1 + 0,05) / (L2 + 0,05), com L1 a luminância da cor mais clara e L2 a da mais escura
L = 0,2126 R + 0,7152 G + 0,0722 B, com cada canal linearizado
Cada canal de 0 a 255 vira c = valor / 255. Se c for no máximo 0,04045, o canal linear é c / 12,92; senão é ((c + 0,055) / 1,055) elevado a 2,4. A fórmula é a do WCAG 2.x.
Limites de aprovação no WCAG
| Nível | Texto normal | Texto grande |
|---|---|---|
| AA | 4,5 | 3 |
| AAA | 7 | 4,5 |
Texto grande tem 18 pt (24 px) ou mais, ou 14 pt (cerca de 18,7 px) ou mais em negrito. Componentes de interface e gráficos pedem 3, só no nível AA (WCAG 2.1 ou mais novo).
Exemplos calculados
| Cores | Razão | AA normal | AAA normal |
|---|---|---|---|
| #000000 sobre #ffffff | 21.00 | passa | passa |
| #767676 sobre #ffffff | 4.54 | passa | falha |
| #777777 sobre #ffffff | 4.47 | falha | falha |
| #1e90ff sobre #ffffff | 3.23 | falha | falha |
| #ffff00 sobre #ffffff | 1.07 | falha | falha |
O que a ferramenta aceita
- Cores em #rgb, #rrggbb, rgb() e hsl(), sem transparência.
- A razão sai com ponto decimal (4.47, não 4,47) e truncada em duas casas: nunca é arredondada para cima.
- 4.47 fica abaixo de 4,5 e falha em AA para texto normal; 4.54 passa.
Perguntas frequentes
Qual o contraste de cores WCAG mínimo para texto?
No nível AA, 4,5 para texto normal e 3 para texto grande. No AAA, 7 e 4,5.
O que é a razão de contraste?
É a razão entre a luminância da cor mais clara e a da mais escura, cada uma somada a 0,05. Vai de 1 (cores iguais) a 21 (preto e branco).