Ir para o conteúdo
UtiliLab

Verificador de Contraste de Cores (WCAG 2.1)

Informe a cor do texto e a do fundo. A razão de contraste e o resultado de cada critério aparecem na hora, com uma prévia real.

Processado no seu navegador — nada é enviado ou armazenado.

Opacidade100%
Opacidade100%

Texto grande (24 px)

Texto grande em negrito (18,66 px)

Texto normal (16 px): a ligeira raposa marrom salta sobre o cão preguiçoso.

Texto pequeno (14 px), como legendas e notas.

Botão

Razão de contraste

4,54:1

  • Texto normal — AA(mín. 4,5:1 · 1.4.3)Passa
  • Texto grande — AA(mín. 3:1 · 1.4.3)Passa
  • Texto normal — AAA(mín. 7:1 · 1.4.6)Não passa
  • Texto grande — AAA(mín. 4,5:1 · 1.4.6)Passa
  • Componentes e gráficos — AA(mín. 3:1 · 1.4.11)Passa

Cores mais próximas das suas que passam:

  • Texto para AAA: #595959

Comparando #767676 sobre #ffffff.

Como usar

  • Digite ou escolha a cor do texto e a do fundo (aceita HEX, RGB e HSL, com transparência).
  • Veja a razão de contraste e os cinco critérios da WCAG 2.1.
  • Se algum critério falhar, use a cor sugerida: a mais parecida com a sua que passa no nível escolhido.
  • Use o botão de inverter para testar o par ao contrário.

Os critérios

  • AA, texto normal (1.4.3): pelo menos 4,5:1.
  • AA, texto grande (1.4.3): pelo menos 3:1. Grande é a partir de 24 px, ou 18,66 px em negrito.
  • AAA, texto normal (1.4.6): pelo menos 7:1.
  • AAA, texto grande (1.4.6): pelo menos 4,5:1.
  • AA, componentes e gráficos (1.4.11): bordas de campos, ícones e gráficos precisam de 3:1.

Como o cálculo é feito

A razão compara a luminância relativa das duas cores: (clara + 0,05) ÷ (escura + 0,05), de 1:1 (iguais) a 21:1 (preto e branco). O valor exibido nunca é arredondado para cima: 4,499:1 aparece como 4,49 e reprova no AA, como manda a WCAG.

Cores com transparência são misturadas com o que está atrás antes da medição, porque é isso que o olho vê.

Conteúdo e funcionamento revisados pela Equipe UtiliLab em . Consulte nossa metodologia de revisão.

Perguntas frequentes

AA ou AAA: qual devo atingir?

AA é o nível exigido pela maioria das leis e normas de acessibilidade, inclusive a eMAG no Brasil. AAA é recomendado para textos longos e públicos com baixa visão.

Como a cor sugerida é escolhida?

A ferramenta muda só a claridade da sua cor (em OKLCH), preservando a matiz e a intensidade, até o mínimo que atinge a meta. Assim a identidade visual se mantém.

Ferramentas relacionadas

Conversor de Cores

Converta uma cor entre HEX, RGB, HSL e OKLCH, com prévia e razão de contraste.

Seletor de Cores

Escolha uma cor no quadro de saturação e brilho e copie em HEX, RGB, HSL ou HSV.

Gerador de Paleta de Cores

Gere paletas análogas, complementares, triádicas e tetrádicas e exporte em HEX, RGB ou CSS.

HEX para RGB

Converta códigos HEX em RGB e RGBA, com validação e cópia em um clique.