Saltar para o conteúdo
QuickToolio
esEspanolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

Verificar contraste de cor (WCAG)

Verifique se duas cores atendem aos níveis de contraste AA e AAA das diretrizes WCAG para texto normal e grande.

É processado no seu dispositivo. Nada é enviado para nenhum servidor.
Texto de exemplo

16.85:1

  • AA texto normal (4,5:1)Cumpre
  • AA texto grande (3:1)Cumpre
  • AAA texto normal (7:1)Cumpre
  • AAA texto grande (4,5:1)Cumpre

Verifica se a combinação de cor de texto e fundo cumpre os níveis de contraste AA e AAA das diretrizes de acessibilidade WCAG 2.x.

Calcula a luminância relativa de cada cor segundo a fórmula WCAG e obtém o rácio de contraste entre ambas, comparando-o com os limiares 3:1, 4,5:1 e 7:1.

Casos de uso

  • Verificar se um botão ou texto é legível antes de o publicar.
  • Auditar a acessibilidade de uma interface.
  • Escolher cores de marca que cumpram WCAG AA.

Como funciona

  1. 1

    Escolhe a cor do texto e do fundo

    Insere ambas as cores em HEX.

  2. 2

    Revê o rácio

    Verifica o rácio de contraste e quais os níveis WCAG que cumpre.

Perguntas frequentes

Qual é a diferença entre AA e AAA?

AA é o nível mínimo recomendado (4,5:1 para texto normal); AAA é mais exigente (7:1) e é recomendado para conteúdo crítico.

O que é considerado texto grande para efeitos de WCAG?

Texto de pelo menos 18pt, ou 14pt a negrito, que tem um limiar de contraste mais baixo (3:1 em AA).

Ferramentas relacionadas

← Cores e design