KolorPal

Verificador de contraste

Garanta que seus designs sejam acessíveis com este verificador de contraste WCAG 2.1 gratuito. Insira qualquer combinação de cor de texto e fundo para ver na hora a relação de contraste e se ela passa em AA ou AAA para texto normal e grande.

Preview Text

The quick brown fox jumps over the lazy dog

Small text sample for accessibility testing

Contrast Ratio

4.60:1

AA Normal

Pass

AAA Normal

Fail

AA Large

Pass

AAA Large

Pass

Verifique qualquer par de texto e fundo segundo a WCAG 2.1

O verificador de contraste calcula a razão de contraste de luminância entre uma cor de primeiro plano e uma de fundo e informa se o par é aprovado na WCAG 2.1 nos níveis AA e AAA, tanto para texto normal quanto para texto grande. A razão usa a mesma fórmula de luminância relativa definida pelo W3C, então o número aqui corresponde ao que as auditorias automáticas de acessibilidade relatam. Não há envio de arquivos nem conta; o resultado se atualiza enquanto você digita.

Como usar

  1. Insira a cor do texto e a cor do fundo como códigos hex, ou use os seletores de cores.
  2. Leia a razão, mostrada como n:1. 21:1 é preto sobre branco; 1:1 é nenhum contraste.
  3. Confira os quatro indicadores: AA Normal (4,5:1), AAA Normal (7:1), AA Grande (3:1) e AAA Grande (4,5:1).
  4. Ajuste a cor mais clara até que todos os indicadores de que você precisa fiquem verdes, depois copie os códigos hex para o seu design.

O que conta como texto grande?

A WCAG define texto grande como pelo menos 18pt (24px) em peso regular, ou 14pt (cerca de 18,66px) em negrito. Qualquer coisa menor é texto normal e precisa da razão mais alta. Ícones, bordas e contornos de formulários são conteúdo não textual e precisam de pelo menos 3:1 segundo o Critério de Sucesso 1.4.11.

Exemplos

Dicas

Frequently Asked Questions

O que é a razão de contraste WCAG AA?▾

A WCAG AA exige uma razão de contraste mínima de 4,5:1 para texto normal e 3:1 para texto grande (14pt ≈ 18,66px em negrito, ou 18pt = 24px regular). Isso garante a legibilidade para usuários com deficiências visuais moderadas.

Qual é a diferença entre WCAG AA e AAA?▾

A WCAG AAA é mais rigorosa — exige 7:1 para texto normal e 4,5:1 para texto grande. O AAA oferece melhor legibilidade, mas é mais difícil de alcançar em designs coloridos. O AA é o requisito padrão.

Como verifico o contraste de cores para acessibilidade?▾

Insira a cor do texto e a cor do fundo acima. A ferramenta calcula a razão de contraste instantaneamente e mostra se ela passa na WCAG AA e AAA para texto normal e grande.

Qual razão de contraste é necessária para componentes de UI?▾

Componentes de UI não textuais (ícones, bordas, campos de formulário) exigem uma razão de contraste mínima de 3:1 em relação ao fundo, segundo o Critério de Sucesso 1.4.11 da WCAG 2.1.