Tool Hub

Verificador de contraste

Verifica a relação de contraste WCAG 2.1 entre texto e plano de fundo

Razão de contraste

Aa Bb Cc 123

Sample text · normal size

17.40:1

Nível WCAGResultado
AA Normal (4.5:1)
Pass
AA Large / UI (3:1)
Pass
AAA Normal (7:1)
Pass
AAA Large (4.5:1)
Pass

Como usar

  1. Digite ou escolha a cor do primeiro plano usando a entrada de cor à esquerda.
  2. Digite ou escolha a cor de fundo usando a entrada de cor à direita.
  3. Leia a proporção de contraste e os crachás de aprovação/falha WCAG 2.1 para texto normal (AA requer 4,5:1), texto grande (AA requer 3:1) e componentes UI (3:1).
  4. Clique no botão de troca para inverter as cores e verificar ambas as direções.

Exemplos

  • Primeiro plano #767676 em fundo #ffffff produz uma proporção de 4,48:1, que falha AA para texto normal mas passa para texto grande.
  • Primeiro plano #000000 em #ffffff dá 21:1, passando em todos os níveis WCAG 2.1 incluindo AAA.

Verifique as saídas antes de usar em produção. Sem garantia — veja Termos.