Deixe cada palavra mais fácil de ler

Recursos e usos

O verificador de contraste compara as cores de texto e fundo com os limites WCAG AA e AAA para texto normal e grande. Seletores de cor e campos HEX, RGB ou HSL permitem ajustes rápidos.

Experimente seu próprio texto, escolha fonte, tamanho e peso e considere cores transparentes sobre a cor da página. Troque as cores, encontre uma cor de texto que atenda a AA, copie o CSS ou baixe um relatório PNG com a prévia do texto e os resultados.

Formatos, opções e limites

Os campos de cor aceitam HEX de 3, 4, 6 ou 8 dígitos, com ou sem o sinal #, e as notações RGB/RGBA e HSL/HSLA. Os valores alfa controlam a transparência. Use o seletor visual para alterações rápidas ou digite um valor para um controle preciso.

• Visualize até 300 caracteres de entrada em uma fonte da biblioteca do site, de 12–96 px, com peso normal ou negrito. Textos e fundos transparentes são avaliados sobre a cor opaca de página escolhida. A sugestão de cor AA busca pelo menos 4,5:1 para texto normal.
• Copie CSS com a cor do texto, a cor do fundo e a relação de contraste. O relatório PNG para baixar tem 1200 px de largura e altura ajustada ao texto, incluindo a prévia, os resultados AA/AAA, as configurações da fonte e os valores das cores. Use-o para documentar uma combinação de cores.

Trabalhe sem conta: textos e fotos são processados no navegador. Salve um projeto neste dispositivo ou baixe um backup para reabrir depois.

Bom saber

WCAG AA exige 4,5:1 para texto normal e 3:1 para texto grande. AAA exige 7:1 e 4,5:1, respectivamente. Texto grande começa em 24 px, ou cerca de 18,67 px em negrito. Os resultados usam a proporção sem arredondamento.

As cores transparentes são compostas sobre a cor da página. Uma proporção aprovada verifica as cores escolhidas, não a acessibilidade do design inteiro. Ler as orientações de contraste WCAG