Contraste de cores: por que um 4,5 arredondado pode falhar
Compare razões de contraste sRGB sem arredondar e diferencie a verificação de duas cores da acessibilidade de uma interface inteira.
Método
O contraste expressa a diferença de luminância relativa entre o texto e seu fundo real. Confira as cores efetivamente exibidas dentro do selo. Texto muito claro sobre um fundo claro pode ficar ilegível mesmo quando o painel ao redor é escuro.
Para cores sRGB opacas, normalize e linearize os canais vermelho, verde e azul antes de calcular a luminância relativa. Divida a luminância mais clara mais 0,05 pela mais escura mais 0,05. Preto sobre branco resulta em 21:1; cores iguais resultam em 1:1.
O cinza RGB 119,119,119 sobre branco resulta em aproximadamente 4,478089:1; RGB 118,118,118 resulta em 4,542225:1. Ambos podem aparecer como 4,5 com uma casa decimal. Porém, apenas o segundo atinge o limite AA de 4,5:1 para texto normal. Decida usando a razão sem arredondar.
Ver dados
- RGB 119,119,119
- 4.478089 :1 4.478089… < 4.5
- RGB 118,118,118
- 4.542225 :1 4.542224… > 4.5
Exemplo resolvido
O cinza RGB 119,119,119 sobre branco resulta em aproximadamente 4,478089:1; RGB 118,118,118 resulta em 4,542225:1. Ambos podem aparecer como 4,5 com uma casa decimal. Porém, apenas o segundo atinge o limite AA de 4,5:1 para texto normal. Decida usando a razão sem arredondar.
Texto grande que atende aos critérios de tamanho e peso tem limite AA de 3:1. Um selo largo não transforma sua fonte em texto grande. Para texto normal, o limite AAA é 7:1. Identifique a categoria correta antes de interpretar o resultado.
L = 0.2126 R + 0.7152 G + 0.0722 B (linear sRGB)
contrast = (lighter L + 0.05) / (darker L + 0.05)
RGB(119,119,119) on white ≈ 4.478089 : 1
RGB(118,118,118) on white ≈ 4.542225 : 1
Uma combinação de cores não certifica uma página inteira. Confira foco, passagem do ponteiro, erros e estados desativados, ambos os temas, transparência, degradês e imagens. Verifique também tamanho do texto, teclado e indicadores não textuais. Rótulos claros devem complementar as cores.
Ver dados
- RGB 119,119,119
- #777777
- RGB 255,255,255
- #FFFFFF
- Resultado
- 4.478089 : 1
Verificações e limites
Uma combinação de cores não certifica uma página inteira. Confira foco, passagem do ponteiro, erros e estados desativados, ambos os temas, transparência, degradês e imagens. Verifique também tamanho do texto, teclado e indicadores não textuais. Rótulos claros devem complementar as cores.