O que é Verificador de contraste de cor?

O Verificador de Contraste de Cores avalia a relação de contraste entre as cores do primeiro plano e do fundo segundo as normas de acessibilidade WCAG 2.1. Informa instantaneamente se a sua combinação de cores cumpre as diretrizes AA ou AAA para texto normal e grande.

Como usar

1. Passo 1 — Defina a cor do primeiro plano (texto) utilizando o seletor de cores ou inserindo um valor HEX/RGB.
2. Passo 2 — Defina a cor de fundo da mesma forma. A relação de contraste e os graus de conformidade WCAG são atualizados ao vivo.
3. Passo 3 — Verifique os indicadores de aprovação/reprovação para os níveis AA e AAA. Ajuste as cores até que todos os critérios relevantes sejam cumpridos.

Resultado

Um designer testa texto cinza-escuro (#333333) sobre fundo azul-claro (#E3F2FD) — a ferramenta apresenta uma relação de 10,5:1, cumprindo tanto o WCAG AA como o AAA para todos os tamanhos de texto.

Ferramentas relacionadas