Verificador de Contraste WCAG Online

Escolha a cor do texto e do fundo para calcular a razão de contraste e conferir se atende aos padrões de acessibilidade AA e AAA do WCAG 2.1.

Cor do texto

Cor de fundo

Texto de exemplo (grande)

Texto de exemplo em tamanho normal, para conferir a legibilidade.

Razão 17.40:1

AA (texto normal): Passa — mínimo 4,5:1

AA (texto grande): Passa — mínimo 3:1

AAA (texto normal): Passa — mínimo 7:1

AAA (texto grande): Passa — mínimo 4,5:1

"Texto grande" = 18pt (24px) ou 14pt (18,7px) em negrito, segundo as diretrizes WCAG 2.1.

Como funciona

A razão de contraste é calculada a partir da luminância relativa de cada cor (fórmula oficial do WCAG), comparando a mais clara com a mais escura. Quanto maior a razão (até 21:1), mais legível o texto fica sobre o fundo.

Como usar

Escolha a cor do texto e a cor de fundo (no seletor ou digitando o hexadecimal) e veja a razão calculada e se passa nos níveis AA e AAA.

Exemplo

Texto preto (#000000) sobre fundo branco (#ffffff) tem razão 21:1, o máximo possível.

Também serve para

Calculadora de Contraste de Cores Online Testar Acessibilidade de Cores (WCAG) Online Verificar Contraste AA e AAA Online Verificar Legibilidade de Texto sobre Fundo Checker de Contraste WCAG 2.1 Online Contraste de Cores para Design System Testar Contraste de Botão (Texto e Fundo)

Ver também:Gerador de Paleta de Cores a Partir de Uma Cor