Question 1

Qual relação de contraste preciso para WCAG AA?

Accepted Answer

WCAG 2.2 Nível AA (Critério de Sucesso 1.4.3) exige uma relação de contraste de pelo menos 4,5:1 para texto normal, e pelo menos 3:1 para texto grande (18pt/24px normal, ou 14pt/18,66px negrito e maior).

Question 2

Qual relação de contraste preciso para WCAG AAA?

Accepted Answer

WCAG 2.2 Nível AAA (Critério de Sucesso 1.4.6) exige uma relação de contraste de pelo menos 7:1 para texto normal, e pelo menos 4,5:1 para texto grande.

Question 3

Como a relação de contraste é calculada?

Accepted Answer

A relação de contraste é calculada a partir da luminância relativa das cores de primeiro plano e fundo, segundo a fórmula WCAG 2.x: (L1 + 0,05) / (L2 + 0,05), onde L1 é a luminância relativa da cor mais clara e L2 a da mais escura. O resultado varia de 1:1 (sem contraste) a 21:1 (preto sobre branco).

Question 4

O contraste também se aplica a botões, ícones e campos de formulário?

Accepted Answer

Sim. O critério de sucesso 1.4.11 Contraste não textual (nível AA) das WCAG 2.2 exige uma razão de contraste de pelo menos 3:1 em relação às cores adjacentes para as partes visuais dos componentes de interface, como bordas de campos e indicadores de foco, e para as partes de gráficos necessárias para entender o conteúdo, como ícones com significado.

Question 5

Botões desativados e logotipos precisam atender aos requisitos de contraste?

Accepted Answer

Não. O critério de sucesso 1.4.3 isenta o texto de componentes de interface inativos, o texto puramente decorativo, o texto que faz parte de uma imagem com outro conteúdo visual significativo e os logotipos ou nomes de marca.

Question 6

Como corrijo o baixo contraste sem mudar as cores da minha marca?

Accepted Answer

Mantenha a cor da marca para fundos, títulos grandes e elementos decorativos, e use um tom mais escuro ou mais claro dela no texto principal, onde vale 4.5:1. Texto grande só precisa de 3:1, então a cor da marca costuma funcionar ali. Quando uma combinação falha, este verificador sugere as cores aprovadas mais próximas.

Analisador de Contraste de Cor

Selecionar Cores

Status de Conformidade

Visualização ao Vivo

Diretrizes WCAG

Nível AA (Mínimo)

Nível AAA (Avançado)

Texto Grande

Perguntas Frequentes