O que mede o rácio de contraste
Compara a luminosidade do texto com a do fundo, numa escala que vai de 1:1 (a mesma cor) a 21:1 (preto sobre branco). Não depende do tom: um vermelho e um verde com a mesma luminosidade têm um contraste baixíssimo embora pareçam muito diferentes, e é precisamente a combinação que as pessoas daltónicas não distinguem.
Níveis AA e AAA
- AA, texto normal: 4,5:1. O mínimo exigido pela maioria das leis de acessibilidade, como a diretiva europeia e a norma EN 301 549.
- AA, texto grande: 3:1. Considera-se grande a partir de 24 px, ou 18,66 px em negrito (18 e 14 pontos).
- AAA: 7:1 e 4,5:1. O nível reforçado. Recomendável para textos longos, como artigos ou documentação.
- Ícones e controlos: 3:1. Contornos de campos de formulário, ícones sem texto e o indicador de foco (critério 1.4.11).
O rácio não é arredondado: 4,49:1 não cumpre AA mesmo ficando a uma centésima. Por isso o cinzento mais claro que passa
AA sobre branco é #767676 (4,54:1), e #777777 já não chega.
Como corrigir um contraste insuficiente
O mais simples é escurecer o texto (ou clareá-lo, se o fundo for escuro) sem mudar o tom, que é o que faz a sugestão da ferramenta: mantém a cor da marca e só ajusta a luminosidade. Se a cor não puder ser alterada, use-a em elementos grandes, como títulos ou fundos de botões, e deixe o texto pequeno numa cor com mais contraste.
Texto sobre imagens
O contraste de um texto sobre uma foto muda de um ponto para outro, e nenhuma ferramenta o consegue garantir. O seguro é pôr uma camada de cor semitransparente ou um gradiente entre a foto e o texto, e verificar o pior caso. A pré-visualização usa uma imagem do gerador do ximg.es com as mesmas cores, para ver como fica o texto de um placeholder:
https://ximg.es/600x300/{fundo}/{texto}.png?text=Ola