Verificador de Contraste de Cores

Verifique a taxa de contraste WCAG entre cores de texto e fundo, com níveis AA/AAA para texto normal e grande.

Cores
Verifique a taxa de contraste WCAG entre cores de texto e fundo, com níveis AA/AAA para texto normal e grande.
Resultados
Cores transparentes são mescladas com branco para o contraste.
Razão de contraste
18.88:1
AA (normal): AprovadoAA (grande): AprovadoAAA (normal): AprovadoAAA (grande): Aprovado
Primeiro plano
#111111
Fundo
#FFFFFF
Aa Bb Cc 123
Prévia
Texto normal / Texto grande
Texto normal

Aa Bb Cc 123

Texto grande

Aa Bb Cc 123

O que é contraste de cor?

A razão de contraste mede a diferença de luminância entre o texto (primeiro plano) e o fundo numa escala de 1:1 (sem contraste) a 21:1 (preto no branco).

Esta ferramenta converte as cores para sRGB, mistura a transparência antes de comparar e usa a fórmula de luminância relativa da WCAG.

Limiares WCAG

  • AA: 4.5:1 para texto normal, 3:1 para texto grande.
  • AAA: 7:1 para texto normal, 4.5:1 para texto grande.
  • Texto grande é 18pt+ normal ou 14pt+ em negrito.
  • Componentes de UI, ícones e gráficos devem visar pelo menos 3:1.

Rácios mais altos melhoram a legibilidade, especialmente com fontes finas ou tamanhos pequenos.