Exemplo prático
Teste o texto normal, o texto placeholder e o estado hover separadamente, porque cada um costuma usar uma cor de primeiro plano diferente.
Verificador de contraste de cores
Razão de contraste
–
Texto grande de título (24px)
Texto normal de 14-16px. A maior parte do texto de interface, rótulos e parágrafos entra nesta categoria, por isso ela tem os requisitos de contraste mais rígidos.
Sobre o verificador de contraste
A razão de contraste mede o quão distinguível o texto é do seu fundo, numa escala de 1:1 (idênticos) a 21:1 (preto sobre branco). O WCAG exige pelo menos 4.5:1 para texto normal e 3:1 para texto grande no nível AA, e 7:1 / 4.5:1 no nível AAA.
Este verificador calcula a razão a partir da luminância relativa exatamente como definido pelo WCAG 2.x, mostra resultados de aprovado/reprovado para cada nível e pré-visualiza suas cores em texto real. As notações HEX, RGB e HSL são aceitas.
Como verificar o contraste de cores
- Digite a cor do texto como HEX, RGB ou HSL, ou use o seletor de cores.
- Digite a cor de fundo sobre a qual o texto está.
- Leia a razão de contraste e os resultados AA/AAA.
- Ajuste as cores até que todas as verificações necessárias passem e copie o relatório.
Dicas de acessibilidade
- Texto grande significa pelo menos 24px normal ou cerca de 18.66px em negrito — só então o limite de 3:1 se aplica.
- Verifique os estados hover, focus, disabled e placeholder — eles costumam usar tons mais claros que reprovam.
- Componentes de interface e ícones precisam de pelo menos 3:1 contra as cores adjacentes (WCAG 1.4.11).
- Teste o modo escuro separadamente; paletas invertidas mudam todas as razões.
Verificações antes de publicar uma paleta de cores
Uma razão aprovada é o ponto de partida, não a linha de chegada. Revise como o par se comporta em estados reais da interface.
Teste os dois temas
Um par que passa em fundo claro pode falhar após a inversão do modo escuro. Verifique cada tema que você publica.
Verifique os estados interativos
Hover, focus, disabled e visited costumam usar tons mais claros que caem abaixo de 4.5:1 sem ninguém perceber.
Não dependa apenas da cor
Combine cor com ícones, sublinhados ou rótulos de texto para que a informação sobreviva às deficiências de visão de cores.
Verifique as premissas de texto grande
O limite relaxado de 3:1 só vale a partir de 24px, ou 18.66px em negrito. Confirme o tamanho renderizado, não o token de design.
Um exemplo prático, um caso limite e uma nota do autor
Caso limite
Um primeiro plano translúcido tem contraste efetivo diferente sobre cada fundo abaixo dele, então o valor hex sozinho é insuficiente.
Nota do autor
Uso a razão numérica como filtro e depois verifico os estados focus, disabled, modo escuro e alto contraste no componente real.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.
Conversor de cores
Converta cores HEX, RGB, RGBA e HSL instantaneamente em seu navegador.
Utilitários Diversos
›
Gerador de gradiente CSS
Gere, analise e visualize gradientes lineares e radiais CSS online. Gerador de gradiente gratuito para desenvolvedores e designers.
Utilitários Diversos
›
Gerador de sombra de texto CSS
Crie, visualize, analise e copie valores de sombra de texto CSS com múltiplas camadas de sombra.
Utilitários Diversos
›
Gerador / Parser de Box Shadow CSS
Gere, analise e visualize valores de `box-shadow` CSS. Ajuste offset, blur, spread, cor e `inset`.
Utilitários Diversos
›
Perguntas frequentes de contraste de cores
Qual razão de contraste eu preciso para texto normal?
Pelo menos 4.5:1 para WCAG AA e 7:1 para AAA. Normal significa menor que 24px normal ou 18.66px em negrito.
O que conta como texto grande?
Texto a partir de 24px, ou negrito a partir de cerca de 18.66px. Texto grande precisa de 3:1 (AA) ou 4.5:1 (AAA).
Quais formatos de cor posso digitar?
HEX como #1f2937, HEX curto, rgb()/rgba() e hsl()/hsla(). Canais alfa são ignorados no cálculo.
Como a razão é calculada?
Pela fórmula de luminância relativa do WCAG: (L1 + 0.05) / (L2 + 0.05), onde L1 é a luminância da cor mais clara.