Verificador de Contraste de Cores WCAG
Verifique as cores de texto e fundo pelos níveis WCAG AA e AAA. Tudo roda localmente — nada é enviado para servidor nenhum.
- Entrada
- Two colours
- Saída
- Contrast ratio · AA / AAA verdicts
Contraste
#777777 / #ffffff
Taxa de contraste
4.48:1
Só passa para texto grande e gráficos de interface.
- Reprova
AA · Texto normal
WCAG 1.4.3 · AA · 4.5:1
- Passa
AA · Texto grande
WCAG 1.4.3 · AA · 3:1
- Reprova
AAA · Texto normal
WCAG 1.4.6 · AAA · 7:1
- Reprova
AAA · Texto grande
WCAG 1.4.6 · AAA · 4.5:1
- Passa
Componentes de interface e gráficos
WCAG 1.4.11 · AA · 3:1
Cor de texto aprovada mais próxima
Mesmo matiz, luminosidade ajustada em OKLCH até a taxa passar.
- AA
#767676
4.54:1
- AAA
#595959
7.00:1
APCA (rascunho da WCAG 3)Lc 71.1
Apenas informativo. Aproximadamente Lc 75 para texto corrido, 60 para outros textos, 45 para títulos grandes. Negativo significa texto claro sobre fundo escuro.
Prévia
Texto grande, 24 px
Texto grande em negrito, 19 px
Texto corrido normal em 16 px. É o tamanho da maioria dos parágrafos e precisa de uma taxa de pelo menos 4.5:1.
Letras miúdas em 12 px são ainda mais difíceis. Dê a elas mais contraste que o mínimo.
O botão preenchido inverte as duas cores; ícones e contornos precisam de pelo menos 3:1.
Verifique o contraste de cores pela WCAG em segundos
Este verificador de contraste mede a taxa de contraste WCAG 2 entre a cor do texto e a do fundo e diz na hora quais níveis ela atinge: AA e AAA para texto normal e grande, e o mínimo de 3:1 para ícones, bordas e outras partes da interface. Quando um par reprova, ele sugere a cor de primeiro plano aprovada mais próxima, mantendo o seu matiz. As cores podem ser digitadas em qualquer notação, e tudo roda no seu navegador.
Como verificar o contraste de cores
- Digite a cor de primeiro plano (texto) e a cor de fundo em qualquer notação: HEX,
rgb(),hsl(),oklch()ou um nome CSS. Ou use os seletores de cor. - Leia a taxa e os selos de aprovado ou reprovado para cada nível WCAG.
- Veja a prévia ao vivo para ver o par como texto real, botão e ícone.
- Se reprovar, clique em Aplicar ao lado da sugestão AA ou AAA para trocar pela cor de texto aprovada mais próxima. O botão de inverter verifica o par ao contrário.
Requisitos de contraste da WCAG
As Diretrizes de Acessibilidade para Conteúdo Web definem taxas de contraste mínimas para que o texto continue legível para pessoas com baixa visão, deficiências na percepção de cores ou com o celular sob sol forte. As taxas vão de 1:1 (cores idênticas) a 21:1 (preto sobre branco).
- AA, texto normal
- Pelo menos 4.5:1 (critério de sucesso 1.4.3). O nível exigido pela maioria das leis e políticas de acessibilidade, incluindo o European Accessibility Act e as orientações da ADA nos EUA.
- AA, texto grande
- Pelo menos 3:1. Grande significa 24 px (18 pt) ou mais, ou 18.66 px (14 pt) ou mais em negrito.
- AAA, texto normal
- Pelo menos 7:1 (critério de sucesso 1.4.6). O nível aprimorado, que vale buscar em textos longos.
- AAA, texto grande
- Pelo menos 4.5:1.
- Contraste não textual
- Pelo menos 3:1 (critério de sucesso 1.4.11) para ícones, bordas de campos, anéis de foco, linhas de gráficos e as partes de um controle que você precisa ver para usá-lo.
Como a taxa de contraste é calculada
Cada cor é convertida na sua luminância relativa: os canais sRGB são linearizados (desfazendo a curva gama) e ponderados em 0.2126 para o vermelho, 0.7152 para o verde e 0.0722 para o azul, porque o olho é bem mais sensível ao verde. A taxa é então (L1 + 0.05) / (L2 + 0.05), sendo L1 a cor mais clara. Por exemplo, #777777 sobre branco dá 4.48:1, logo abaixo do AA, enquanto #767676 chega a 4.54:1 e passa.
Uma taxa nunca é arredondada para cima até um limite: a WCAG deixa claro que 4.49:1 não atinge 4.5:1. Cores translúcidas são primeiro combinadas do jeito que o navegador as desenha, o primeiro plano sobre o fundo e um fundo translúcido sobre branco.
Como corrigir uma cor reprovada
As sugestões mantêm o matiz e a saturação da cor do texto e mudam só a luminosidade em OKLCH, o espaço de cor perceptual que o CSS agora suporta, escurecendo e clareando até a taxa passar e escolhendo o que estiver mais perto do original. O resultado costuma ser a mesma cor da marca, um pouco mais escura ou mais clara, em vez de um salto para o preto. Se nenhum tom desse matiz consegue atingir a meta sobre o seu fundo, a ferramenta avisa, e o que precisa mudar é o fundo.
Para explorar outras variantes por conta própria, abra a cor no conversor de cores e percorra os tons claros e escuros, ou tire cores candidatas de uma foto com o gerador de paleta de cores.
Erros comuns de contraste
- Placeholder e texto com aparência de desativado. Um placeholder cinza-claro ainda é texto e precisa atingir 4.5:1 se o usuário depende dele. Controles realmente desativados são isentos, mas o que só parece desativado não é.
- Texto sobre imagens e gradientes. Verifique a parte mais clara da imagem atrás do texto, não a média. Uma sobreposição escura ou um painel sólido atrás do texto é a solução confiável.
- Cores de marca usadas em texto. Um laranja ou turquesa vibrante pode parecer forte e ainda assim reprovar sobre branco. Use a sugestão para achar uma variante mais escura do mesmo matiz para o texto e deixe a cor viva para títulos grandes ou decoração.
- Anéis de foco e bordas de campos. Uma borda cinza-clara de 1 px em volta de um campo de texto muitas vezes reprova na regra não textual de 3:1, e o campo fica difícil de achar para quem tem baixa visão.
- Modo escuro. Um par aprovado no tema claro não diz nada sobre o escuro. Verifique os dois temas, usando o botão de inverter para uma olhada rápida no par invertido.
APCA e WCAG 3
Abaixo dos resultados da WCAG 2 você também vê um valor de contraste de luminosidade APCA, escrito Lc. O APCA é o método de contraste proposto para a futura WCAG 3. Ele considera o peso da fonte e o fato de que texto claro sobre fundo escuro precisa de um contraste diferente do texto escuro sobre fundo claro, algo que a fórmula da WCAG 2 ignora; por isso também o sinal muda quando você inverte as cores. Como referência aproximada, Lc 75 serve para texto corrido, Lc 60 para outros textos legíveis e Lc 45 para títulos grandes. A WCAG 3 ainda é um rascunho, então trate o APCA como informação extra: a WCAG 2.x continua sendo o padrão citado por auditorias e leis.
Perguntas frequentes
- Qual é uma boa taxa de contraste para texto?
- Pelo menos 4.5:1 para texto normal e 3:1 para texto grande atende à WCAG AA, o nível exigido pela maioria das leis de acessibilidade. 7:1 para texto normal atende ao nível AAA, mais rigoroso.
- O que conta como texto grande na WCAG?
- Texto de pelo menos 18 pontos (24 pixels CSS), ou de pelo menos 14 pontos (cerca de 18.66 pixels CSS) em negrito. Texto grande só precisa de 3:1 para AA e 4.5:1 para AAA.
- Como é calculada a taxa de contraste WCAG?
- As duas cores são convertidas em luminância relativa, linearizando os canais sRGB e ponderando-os em 0.2126, 0.7152 e 0.0722. A taxa é (mais clara + 0.05) dividido por (mais escura + 0.05), o que dá um valor de 1:1 a 21:1.
- #777777 passa na WCAG sobre branco?
- Não. #777777 sobre #ffffff dá 4.48:1, logo abaixo dos 4.5:1 exigidos para texto normal AA. #767676 é o cinza mais claro que passa, com 4.54:1.
- Ícones e botões também precisam atender aos requisitos de contraste?
- Sim. O critério de sucesso 1.4.11 da WCAG 2.1 exige 3:1 em relação às cores vizinhas para ícones, bordas de campos, indicadores de foco e outros gráficos necessários para entender ou operar a interface.
- O que é APCA?
- O APCA (Accessible Perceptual Contrast Algorithm) é o método de contraste do rascunho da WCAG 3. Ele informa um valor de contraste de luminosidade (Lc) que depende de qual cor é o texto e considera o tamanho e o peso da fonte. Ainda não é um requisito.
- O verificador lida com cores transparentes?
- Sim. Um primeiro plano translúcido é combinado sobre o fundo, e um fundo translúcido sobre branco, antes de calcular a taxa, o que corresponde ao que aparece na tela.