Verificador de Contraste de Cores

Verifique a relação de contraste de cores com as diretrizes de acessibilidade WCAG 2.1. Resultados AA/AAA instantâneos.

Cor de primeiro plano

Cor de fundo

Prévia de texto grande (18pt negrito)

Prévia de texto normal — The quick brown fox jumps over the lazy dog.

14.05:1taxa de contraste

AA — Texto normal (≥ 4.5:1)Passa

AA — Texto grande (≥ 3:1)Passa

AAA — Texto normal (≥ 7:1)Passa

AAA — Texto grande (≥ 4.5:1)Passa

Sobre esta ferramenta

O verificador de contraste calcula a relação de contraste entre uma cor de primeiro plano (texto) e uma cor de fundo usando a fórmula de luminância relativa WCAG 2.1.

WCAG 2.1 define dois níveis: AA requer 4.5:1 para texto normal e 3:1 para texto grande. AAA requer 7:1 e 4.5:1 respectivamente.

Como usar

Escolha a cor do primeiro plano e do fundo com os seletores ou insira códigos hex.
A prévia mostra como o texto aparece em tamanhos normal e grande.
A taxa de contraste e os resultados WCAG atualizam instantaneamente.
Use os pares de amostra para explorar padrões comuns de acessibilidade.

Casos de uso

Designers UI verificam se rótulos e texto atendem aos padrões WCAG. Desenvolvedores verificam combinações texto-fundo em sistemas de design.

Perguntas frequentes

O que conta como "texto grande"? — WCAG define texto grande como mínimo 18pt (24px) normal, ou 14pt (~18.67px) negrito.
Suporta transparência ou rgba? — Não, esta ferramenta funciona apenas com cores hex sólidas.
Qual nível WCAG devo almejar? — AA é o mínimo recomendado para a maioria dos sites públicos. AAA oferece melhor legibilidade.
4.5:1 é sempre suficiente? — 4.5:1 satisfaz WCAG AA, mas usuários com deficiências visuais mais graves podem se beneficiar de taxas mais altas.