Como usar o verificador
- Escolha uma cor de texto e uma cor de fundo, ou cole os códigos delas.
- Leia a razão de contraste e os quatro resultados abaixo dela.
- Olhe a prévia. Ela mostra texto grande, texto normal e letras miúdas nas suas cores.
- Quando um nível falha, o verificador mostra a cor de texto mais próxima e o fundo mais próximo que passam. Aperte Usar para testar um deles.
Trocar inverte as cores, para um texto branco sobre um botão colorido. As cores também ficam no endereço da página, então você pode enviar o link para alguém.
O que os números significam
A razão de contraste compara o quanto as duas cores são claras, de 1:1 (a mesma cor) a 21:1 (preto sobre branco). A WCAG 2.2, as regras a que a maioria das leis de acessibilidade se refere, define estes mínimos:
- AA, texto normal: 4,5:1. O nível a buscar em sites, emails e posts.
- AA, texto grande: 3:1. Para texto de pelo menos 24 px, ou 18,66 px em negrito.
- AAA, texto normal: 7:1. O nível mais rígido, bom para leitura longa.
- AAA, texto grande: 4,5:1.
Botões, ícones e as bordas dos campos de formulário precisam de 3:1 em relação ao que está ao lado. A WCAG nunca arredonda para cima, então 4,49:1 não passa no AA. O verificador arredonda para baixo pelo mesmo motivo.
Como a sugestão é encontrada
O verificador mantém o tom e a intensidade da sua cor e muda só a luminosidade, mais escura ou mais clara, até a razão passar. Ele faz isso em OKLCH, onde um passo de luminosidade parece igual para todas as cores, e escolhe a menor mudança. O seu azul continua azul, só um pouco mais profundo. Quando nenhuma luminosidade daquele tom alcança o nível, ele avisa, e mudar a outra cor é o caminho.
Nas redes sociais
Um post costuma ser visto num celular pequeno, sob o sol, de relance. Busque pelo menos 4,5:1 em cada linha de texto dentro de uma imagem, também no título grande. Texto sobre uma foto tem um fundo que muda de letra para letra, então ponha o texto numa parte calma da foto ou sobre uma forma lisa.
Use no editor de design da Postfjord
No editor de design, adicione as cores da sua marca uma vez em Configurações, Marca. Misturar tenta outras combinações das suas próprias cores e nunca coloca texto sobre uma cor onde ele fica difícil de ler. Aplicar marca mantém a cor do texto que fica direto sobre uma foto, para ele continuar fácil de ler. Confira um par aqui antes de salvá-lo na sua marca.
FAQ
Que razão de contraste eu preciso?
4,5:1 para texto normal e 3:1 para texto grande atendem ao nível AA da WCAG 2.2, o que a maioria das leis e diretrizes pede. 7:1 atende ao AAA.
O que conta como texto grande?
Texto de pelo menos 18 pontos, cerca de 24 pixels, ou de pelo menos 14 pontos em negrito, cerca de 18,66 pixels.
Por que a minha cor parece boa, mas não passa?
A sua tela, a luz do ambiente e os seus olhos são diferentes dos de quem lê. A razão é uma medida que também vale para quem enxerga pior, e para um celular ao sol.
O verificador serve para a WCAG 3?
Não. A WCAG 3 ainda é um rascunho, e o novo método de contraste dela, o APCA, pode mudar. O verificador usa a WCAG 2.2, que é o padrão de hoje.
O verificador salva as minhas cores?
Não. Ele roda no seu navegador. As cores ficam só no endereço da página, e nada é enviado à Postfjord.