Pular para o conteúdo
ToolMug

Use ↑ ↓ para navegar, Enter para abrir, Esc para fechar.

Verificador de Contraste de Cores

Informe uma cor de texto e uma cor de fundo para obter a taxa de contraste do WCAG e ver se o texto normal e o texto grande atendem AA e AAA. Se não passar, a ferramenta mantém o tom, ajusta só a luminosidade e sugere a cor mais próxima que passa, aplicável com um clique.

Roda no seu navegador — nada do que você digita é enviado

Taxa de contraste

4,54:1

  • AA texto normal ≥ 4.5:1Aprovado
  • AA texto grande ≥ 3:1Aprovado
  • AAA texto normal ≥ 7:1Reprovado
  • AAA texto grande ≥ 4.5:1Aprovado

Texto de título grande

O texto normal em 16 px deve ser fácil de ler.

Texto pequeno, legendas e notas de rodapé.

Botão

Cor de texto mais próxima que atende AAA: #595959 (7.00:1)

Como usar

  1. Escolha as cores ou digite-as — hex, rgb(), hsl(), oklch() ou o nome de uma cor.
  2. Veja a taxa e os quatro resultados do WCAG, e confira a pré-visualização em tempo real abaixo.
  3. Se não passar, clique em Usar esta cor ao lado de uma sugestão para aplicá-la.

Opções explicadas

AA
Pelo menos 4,5:1 para texto normal e 3:1 para texto grande (18 pt / 24 px, ou 14 pt / cerca de 18,7 px em negrito). A maioria das normas e sistemas de design exige AA.
AAA
Pelo menos 7:1 para texto normal e 4,5:1 para texto grande, para conteúdo em que a legibilidade é essencial.
Cor sugerida
Mantém o tom e a saturação no espaço de cor OKLCH e muda só a luminosidade para encontrar a cor mais próxima que passa por pouco.
Cores transparentes
Uma cor de texto com transparência é medida como ela aparece sobre o fundo.

Como a razão é calculada

Cada cor é convertida de sRGB para luz linear e depois para luminância relativa:

linear = c ÷ 12.92                      se c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4    caso contrário   (c vai de 0 a 1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
razão = (L_mais_claro + 0.05) ÷ (L_mais_escuro + 0.05)

O verde pesa mais porque o olho é mais sensível a ele. Alguns resultados sobre um fundo branco:

Cor do texto Razão Resultado
#000000 21 : 1 AAA
#0066cc 5,57 : 1 AA para texto normal, não AAA para texto normal
#767676 4,54 : 1 AA para texto normal
#777777 4,48 : 1 Reprova no AA para texto normal, passa para texto grande

As definições do WCAG estão em Understanding Success Criterion 1.4.3.

Perguntas frequentes

Como o contraste é calculado?

Com a fórmula do WCAG 2.x — (luminância relativa mais clara + 0,05) ÷ (luminância relativa mais escura + 0,05) —, o que dá de 1:1 a 21:1. Preto sobre branco é 21:1.

Por que o #767676 é mencionado com tanta frequência?

É o cinza mais claro que atinge 4,5:1 (cerca de 4,54:1) sobre branco, por isso é um limite inferior comum para texto secundário.

Ícones e bordas também precisam ser verificados?

Sim. Desde o WCAG 2.1, componentes de interface e elementos gráficos — bordas de botões, campos, ícones — precisam de pelo menos 3:1 em relação às cores adjacentes.

Privacidade

Esta ferramenta funciona inteiramente no seu navegador. Seus arquivos e textos são processados no seu dispositivo e nunca são enviados aos nossos servidores.

Ferramentas relacionadas