Texto cinza sobre branco parece bom no monitor de quem projetou, e então um usuário com a tela do celular fraca não consegue lê-lo. Um verificador de contraste de cores dá o número que encerra a discussão. Informe uma cor de texto e uma cor de fundo, e a razão aparece enquanto você digita, por exemplo 4,47:1 para o par de exemplo #777777 sobre branco.
Lendo as cinco linhas de aprovação/reprovação
Cada linha compara a sua razão com um mínimo do WCAG 2.x. Texto normal AA precisa de 4,5, texto grande AA precisa de 3, texto normal AAA precisa de 7 e texto grande AAA precisa de 4,5. A quinta linha, componentes de interface e gráficos, precisa de 3. Texto grande significa 18 pt (24 px) ou mais, ou 14 pt (18,67 px) ou mais em negrito. A caixa de prévia mostra texto normal, texto grande e texto grande em negrito nas suas cores.
Por que 4,496 reprova
A ferramenta corta a razão após duas casas decimais. Ela não arredonda. Então 4,496 aparece como 4,49:1 e reprova no limite de 4,5. Arredondar mostraria 4,50 e deixaria passar um par que reprova. O par de exemplo mostra isso: o valor real é cerca de 4,478, então você vê 4,47 e não 4,48.
Corrigindo um par reprovado em quatro passos
- Digite ou escolha a Cor do texto. O campo de texto e o seletor de cores permanecem sincronizados.
- Digite ou escolha a Cor do fundo. Use
#rgb,#rrggbbourgb(r, g, b). Qualquer outra coisa recebe um erro na própria linha. - Leia a razão e as linhas. Se o AA para texto normal reprovar, uma caixa mostra a cor de texto mais próxima que atinge 4,5:1.
- Clique em Usar esta cor para aplicá-la, ou em Trocar as cores para testar texto claro sobre fundo escuro.
Como a cor mais próxima é encontrada
A sugestão mantém o matiz e a saturação da cor do seu texto. Ela muda apenas a luminosidade, em passos de 0,1 ponto percentual. A ferramenta procura mais escuro e mais claro, e mostra o resultado mais próximo. Para #777777 sobre branco, a resposta fica perto de #767676, o cinza mais claro que passa sobre branco.
O que o verificador não consegue julgar
Ele compara duas cores opacas. Cores com alfa, como rgba() ou um valor hex de 8 dígitos, não são aceitas. Texto sobre uma foto ou um gradiente não tem um único fundo, então confira você mesmo o pior ponto. A ferramenta também não conhece o tamanho nem o peso de fonte que você realmente usa. As linhas de texto grande só dizem o que se aplicaria se o texto fosse grande.
O que acontece com as suas cores
O cálculo roda na página. Nenhuma requisição é enviada, e a ferramenta não guarda as cores. Você pode confirmar isso no painel de rede das ferramentas de desenvolvedor do navegador.