Calculadora de razão de contraste

Um número entre 1 e 21

Você consegue ler um texto quando ele é claramente mais claro ou mais escuro que o que está atrás. A matiz quase não importa. Vermelho puro sobre verde puro são duas cores bem diferentes com quase o mesmo brilho, e as letras parecem vibrar. Por isso a WCAG mede a diferença de luminância relativa, a quantidade de luz que uma cor manda para o olho numa escala de 0 (preto) a 1 (branco).

Para calcular, cada canal vermelho, verde e azul é convertido do valor armazenado para luz linear, e depois os três são ponderados pela sensibilidade do olho a cada um:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L lighter + 0.05) ÷ (L darker + 0.05)

O verde conta mais de 70% do resultado e o azul cerca de 7%. Por isso o azul puro #0000ff se comporta como uma cor escura e o amarelo puro como uma clara. Duas cores idênticas dão 1:1. Preto sobre branco dá 21:1. Inverter texto e fundo não muda a razão.

Os limites e onde se aplicam

AA é o nível que leis e regras de compras públicas costumam exigir, incluindo a norma europeia EN 301 549 e a Section 508 nos Estados Unidos. AAA é uma meta para onde as pessoas leem bastante. Logotipos, controles desativados e texto puramente decorativo estão isentos.

Uma boa referência é o cinza #767676, que chega a 4.54:1 sobre branco e passa em AA. Um passo mais claro, #777777 dá 4.47:1 e reprova.

Como o tom sugerido é escolhido

Quando um texto de tamanho normal fica abaixo de 4.5:1, a calculadora converte a cor do texto em matiz, saturação e luminosidade. Ela mantém as duas primeiras e move a luminosidade em passos de meio por cento, mais escuro e mais claro alternadamente, até a razão contra o seu fundo chegar a 4.5. O primeiro acerto é o tom mais próximo que passa, então o seu azul continua sendo o seu azul. Às vezes nenhuma luminosidade da cor do texto consegue passar, geralmente contra um fundo de tom médio. Nesse caso, ela tenta ajustar o fundo do mesmo jeito. Selecione Usar para aplicar a sugestão.

Fundos de tom médio são o caso difícil. Um cinza médio como #808080 dá cerca de 3.9:1 contra branco e 5.3:1 contra preto, então só um texto bem escuro funciona sobre ele. Laranjas de marca e verdes vivos têm o mesmo problema com texto branco. Você vai ter que escurecer o fundo ou passar para texto escuro.

Como colocar e tirar as cores

Os dois campos aceitam qualquer coisa que um navegador entenda como cor CSS: #1d3557, 1d3557, rgb(29 53 87), hsl(215 50% 23%) ou um nome como teal. Para ler uma cor de uma página no ar, abra as ferramentas de desenvolvedor, selecione o texto e copie os valores calculados de color e background-color.

O endereço da página se atualiza a cada mudança, no formato ?fg=1d3557&bg=ffffff. Copie para mandar a um colega exatamente o par que vocês estão discutindo. Para testar uma paleta de marca inteira de uma vez, use a grade de contraste de paleta.

O que uma razão não diz

• Transparência. Qualquer valor alfa é ignorado. Para texto semitransparente, meça a cor mesclada que a tela acaba exibindo.
• Imagens e degradês. Uma foto de fundo tem muitas cores. Teste a área mais clara e a mais escura atrás do texto, ou coloque um painel sólido embaixo dele.
• Peso e tamanho de fonte abaixo dos limites. Uma fonte fina de 12 px a 4.6:1 passa no papel e continua difícil de ler.
• Temas escuros. A fórmula da WCAG 2 é conhecida por superestimar alguns pares escuros. Se um texto claro sobre fundo escuro passa por pouco, olhe com seus próprios olhos também, por exemplo no simulador de visão.