Verificador de contraste de cor
Verifique o contraste entre a cor do texto e o fundo segundo WCAG 2.1 AA e AAA — com a relação de contraste na hora, pré-visualização ao vivo e selos de aprovado/reprovado.
Cores
4.48:1Quanto maior, melhor. O WCAG exige pelo menos 4,5:1 para texto normal.Aa texto normal — a rápida raposa marrom
Aa texto grande
Sobre esta ferramenta
Este verificador de contraste de cor mede o quão legível o texto fica sobre o seu fundo usando a fórmula de contraste do WCAG 2.1. Insira uma cor de texto e uma cor de fundo como valores HEX, ou escolha-as visualmente, e ele mostra na hora a relação de contraste (por exemplo 4,52:1) junto com selos de aprovado ou reprovado para os níveis AA e AAA das Diretrizes de Acessibilidade para Conteúdo Web. Uma pré-visualização ao vivo exibe texto de exemplo nas suas cores para você julgar o resultado num relance, e um botão de troca inverte o primeiro plano e o fundo. Tudo funciona no seu navegador, por isso é rápido, privado e funciona offline depois de carregado — ideal para designers, desenvolvedores e qualquer pessoa que crie interfaces acessíveis.
Como usar
- 1 Insira a cor do seu texto (primeiro plano) como valor HEX ou escolha-a com o seletor.
- 2 Insira a cor de fundo da mesma forma; #rgb e #rrggbb são aceitos.
- 3 Leia a relação de contraste e os selos AA/AAA para texto normal e grande.
- 4 Use o botão de troca e ajuste até atingir pelo menos 4,5:1.
Como funciona
Cada cor é primeiro convertida de sRGB para luz linear: cada canal é dividido por 255 e os valores acima de 0,03928 são elevados por uma curva gama. A luminância relativa é então L = 0,2126·R + 0,7152·G + 0,0722·B, dando mais peso ao verde porque o olho é mais sensível a ele. A relação de contraste entre duas cores é (L1 + 0,05) / (L2 + 0,05), onde L1 é a cor mais clara e L2 a mais escura. Isso dá um valor de 1:1 (cores idênticas) até 21:1 (preto puro sobre branco puro). O WCAG 2.1 exige uma relação de pelo menos 4,5:1 para texto normal e 3:1 para texto grande no nível AA, subindo para 7:1 e 4,5:1 no AAA. Texto grande significa cerca de 18,66px em negrito ou 24px normal em diante.
Perguntas frequentes
Que relação de contraste preciso para cumprir o WCAG?
Para o nível AA do WCAG 2.1 você precisa de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. O nível AAA é mais rígido, exigindo 7:1 para texto normal e 4,5:1 para texto grande. A maioria dos sites mira o AA como base legal e prática.
O que conta como texto grande?
O WCAG define texto grande como pelo menos 18,66px (cerca de 14pt) em negrito, ou pelo menos 24px (cerca de 18pt) em qualquer peso. Texto grande é mais fácil de ler, por isso recebe um limite de contraste menor (3:1 para AA, 4,5:1 para AAA).
Como a relação de contraste é calculada?
A luminância relativa de cada cor é calculada a partir dos seus canais vermelho, verde e azul linearizados (L = 0,2126R + 0,7152G + 0,0722B). A relação é então (mais clara + 0,05) / (mais escura + 0,05), dando valores de 1:1 até 21:1 para preto sobre branco.
Por que preto puro sobre branco dá 21:1?
O preto tem luminância relativa de 0 e o branco de 1. Substituindo em (1 + 0,05) / (0 + 0,05) dá 21, a relação de contraste máxima possível. Por isso #000000 sobre #ffffff passa em todos os níveis WCAG.
O contraste de cor afeta o SEO e a lei de acessibilidade?
Sim. Contraste suficiente faz parte dos padrões de acessibilidade referenciados por leis como a ADA, a Seção 508 e a Lei Europeia de Acessibilidade, e boa legibilidade melhora as métricas de usabilidade. Cumprir o WCAG AA reduz o risco jurídico e torna seu conteúdo utilizável por pessoas com baixa visão ou deficiências de cor.
Ferramentas e usos relacionados
Um verificador de contraste é essencial para um design web e de apps acessível. Combine-o com o conversor de cores para alternar entre HEX, RGB e HSL enquanto ajusta sua paleta, e com a calculadora de porcentagem ao escalar espaçamentos ou opacidade. Designers, desenvolvedores front-end e criadores de conteúdo o usam para que botões, rótulos e texto do corpo permaneçam legíveis para todos.