Saltar para o conteúdo
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

Verificar contraste de cor (WCAG)

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.

É 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

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.

Detalhes técnicos

  • Calcula a relação de contraste da WCAG 2.x a partir da luminância relativa das duas cores, de 1:1 (iguais) a 21:1 (preto sobre branco).
  • Limiares: o AA exige 4,5:1 para texto normal e 3:1 para texto grande; o AAA, 7:1 e 4,5:1. Texto grande é de 24 px ou mais, ou de 18,66 px ou mais em negrito.
  • A comparação usa o valor sem arredondar, como a norma exige: o cinzento #767676 sobre branco dá 4,54:1 e passa o AA; #777777 dá 4,48:1 e não passa, embora se pareçam.
  • Não avalia transparências, gradientes nem texto sobre imagens: verifique o par de cores que realmente se vê.

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