InícioFerramentasVerificador de contraste
Verificador de contraste de cores WCAG 2.2 e APCA
Introduza a cor do texto e do fundo em HEX, RGB ou HSL. Obtém o rácio de contraste das WCAG 2.2 com o resultado para AA, AAA, texto grande e componentes de interface, o contraste de luminosidade APCA do rascunho das WCAG 3, uma pré-visualização de texto, botões e tooltip e a cor mais próxima que cumpre, caso a sua não cumpra.
—
Título grande, 24 px
Texto corrido de 16 px. Leia no telemóvel, ao ar livre, com o braço esticado: se lhe custar a si, também vai custar aos seus utilizadores.
Letra pequena, 13 px: legendas e ajudas são onde o contraste mais falha.
Resultados
Fórmula. Contraste = (Lclara + 0,05) / (Lescura + 0,05), em que L = 0,2126·R + 0,7152·G + 0,0722·B do sRGB linearizado. O valor nunca é arredondado para cima: 4,48:1 não cumpre 4,5:1.
Tudo é calculado no seu navegador — nada do que introduz é enviado para lado nenhum.
Como utilizar
- Introduza duas coresEscreva ou cole as cores do texto e do fundo em qualquer formato CSS, ou escolha-as no seletor. Troque-as para testar texto claro sobre fundo escuro.
- Leia os resultadosO rácio de contraste é comparado com todos os limiares das WCAG 2.2: texto normal e grande em AA e AAA, e 3:1 para componentes de interface. O APCA Lc aparece ao lado como segunda opinião.
- Veja a pré-visualizaçãoTexto, botão, ligação, contorno de campo e tooltip são desenhados com as suas cores — as combinações que mais falham em interfaces reais.
- Use a cor mais próximaEscolha o objetivo e se quer alterar o texto ou o fundo. A ferramenta mantém o tom e ajusta a luminosidade até a combinação cumprir; depois pode aplicar ou copiar o HEX.
Como se calcula o rácio de contraste das WCAG
As WCAG 2.x comparam a luminância relativa de duas cores — o quão clara cada uma parece ao olho, numa escala de 0 (preto) a 1 (branco). Cada canal sRGB é convertido do valor 0–255 para luz linear e os canais são ponderados pela sensibilidade do olho: o verde conta mais, o azul conta menos.
O resultado vai de 1:1 (cores idênticas) a 21:1 (preto sobre branco). O termo 0,05 representa a luz ambiente refletida no ecrã, pelo que pares muito escuros nunca chegam a um contraste infinito.
Exemplo. Cinzento #777777 sobre branco: 119 / 255 = 0,4667, que linearizado dá 0,1845, logo L = 0,1845. O branco tem L = 1. Contraste = 1,05 / 0,2345 = 4,48:1. Não cumpre AA para texto normal, porque 4,48 é inferior a 4,5 e as WCAG não permitem arredondar. O cinzento mais claro que cumpre sobre branco é #767676, com 4,54:1.
Limiares das WCAG 2.2
- 1.4.3 Contraste (mínimo), nível AA: 4,5:1 para texto normal e 3:1 para texto grande.
- 1.4.6 Contraste (melhorado), nível AAA: 7:1 para texto normal e 4,5:1 para texto grande.
- 1.4.11 Contraste não textual, nível AA: 3:1 para as partes visuais necessárias para identificar componentes de interface e os seus estados — contornos de campos, indicadores de foco, caixas de verificação, ícones com significado, linhas de gráficos.
Texto grande significa pelo menos 18 pontos (24 píxeis CSS) em peso normal ou 14 pontos (cerca de 18,66 px) a negrito. Logótipos, texto meramente decorativo e controlos desativados estão isentos. Os limiares não mudaram entre as WCAG 2.0, 2.1 e 2.2; a norma europeia EN 301 549, referida pela legislação portuguesa de acessibilidade web, remete para o mesmo nível AA.
APCA: o método de contraste proposto para as WCAG 3
A fórmula das WCAG 2 é simples, mas tem pontos fracos conhecidos: considera um par igualmente legível seja qual for a cor do texto, sobrestima o contraste de combinações escuras e ignora o tamanho e o peso da letra. O Accessible Perceptual Contrast Algorithm (APCA), desenvolvido por Andrew Somers para o grupo de trabalho do W3C, modela melhor a perceção da luminosidade e devolve um valor de contraste de luminosidade, Lc, de cerca de −108 a +106.
O sinal indica a polaridade: positivo para texto escuro sobre fundo claro, negativo para texto claro sobre escuro. O mesmo cinzento #888 dá Lc 63,1 como texto sobre branco, mas Lc −68,5 como rótulo branco sobre #888: segundo o APCA, o rótulo branco lê-se melhor. As WCAG 2 não o conseguem exprimir, porque dão 3,54:1 nos dois casos.
Guia aproximado dos níveis Lc no modo simplificado «Bronze»: 90 recomendado para texto corrido, 75 mínimo para texto corrido, 60 para outros textos de conteúdo, 45 para títulos grandes, 30 para placeholders e elementos não textuais, 15 apenas para separadores.
Importante: o APCA faz parte do rascunho de trabalho das WCAG 3, que não é uma norma concluída, e os limiares podem mudar. Os requisitos legais e de contratação atuais remetem para as WCAG 2.x. Use o rácio das WCAG 2.2 para decidir se cumpre ou não, e o APCA para escolher entre duas opções que já cumprem ou para detetar pares do modo escuro que as WCAG 2 deixam passar.
Como corrigir um contraste baixo sem perder a cor da marca
Normalmente basta alterar a luminosidade, não o tom. As sugestões acima funcionam no espaço de cor OKLCH: mantêm o tom e o croma, ajustam a luminosidade percetual passo a passo, trazem a cor de volta ao gamut sRGB e confirmam que o HEX arredondado continua a cumprir. A opção mais próxima da luminosidade original aparece como a mais próxima.
- Reserve a cor da marca para áreas grandes e botões e use um tom mais escuro da mesma cor para textos e ligações. Um vermelho de marca com 3,9:1 sobre branco pode continuar a ser o fundo de um botão com texto branco a negrito, se esse par atingir o limiar de texto grande — mas confirme.
- Verifique todos os estados: hover, foco, desativado, visitado e erro. Placeholders e textos de ajuda são as falhas mais frequentes em formulários.
- Verifique os dois temas. Uma paleta que cumpre no modo claro falha muitas vezes no modo escuro, onde o APCA é especialmente útil.
- Texto sobre imagens e gradientes tem de cumprir no ponto mais claro. Coloque um fundo sólido ou semitransparente atrás do texto em vez de confiar numa sombra.
- Tooltips e dicas de onboarding usam muitas vezes um tom claro da marca com texto cinzento. São lidos depressa e a meio de uma tarefa, por isso aponte para 4,5:1 ou mais, mesmo em textos curtos.
Para construir uma escala completa de tons com o contraste de cada passo, use o gerador de paletas acessíveis.
Fontes
- W3C. Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, 2023 — critérios 1.4.3, 1.4.6 e 1.4.11; definições de luminância relativa e rácio de contraste.
- W3C. Understanding Success Criterion 1.4.3: Contrast (Minimum) — justificação de 4,5:1 e 3:1, definição de texto grande.
- Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 versão 0.0.98G-4g, Myndex Research — constantes e valores de referência usados na ferramenta.
- W3C. W3C Accessibility Guidelines (WCAG) 3.0, Working Draft — estado do método de contraste visual.
- ETSI. EN 301 549 V3.2.1 (2021-03). Accessibility requirements for ICT products and services.
- Ottosson B. A perceptual color space for image processing, 2020 — OKLab, usado para ajustar a luminosidade.
Perguntas frequentes
Que rácio de contraste exigem as WCAG?
Para o nível AA, as WCAG 2.2 exigem pelo menos 4,5:1 entre o texto normal e o fundo, 3:1 para texto grande (24 px, ou cerca de 18,66 px a negrito) e 3:1 para componentes de interface e gráficos com significado. O nível AAA eleva os requisitos do texto para 7:1 e 4,5:1.
Um contraste de 4,48:1 chega para cumprir 4,5:1?
Não. Os limiares das WCAG são exatos e o rácio não pode ser arredondado para cima. #777777 sobre branco dá 4,48:1 e não cumpre AA para texto normal; #767676 dá 4,54:1 e cumpre.
O que é o APCA e devo usá-lo em vez das WCAG 2?
O APCA é o método de contraste percetual do rascunho das WCAG 3. Tem em conta a polaridade do texto e dá um valor Lc cujos requisitos dependem do tamanho e do peso da letra. Ainda não é norma, pelo que a conformidade continua a medir-se com o rácio das WCAG 2.2; o APCA é uma segunda verificação útil, sobretudo em temas escuros.
O contraste importa em ícones, contornos e indicadores de foco?
Sim. O critério 1.4.11 exige 3:1 face às cores adjacentes para as partes de um componente necessárias para o identificar ou perceber o seu estado: contornos de campos, caixas de verificação, ícones com significado e indicadores de foco. Elementos decorativos e controlos desativados estão isentos.
Como se calcula o contraste de texto semitransparente?
Primeiro mistura-se a cor do texto com o fundo de acordo com a opacidade; depois compara-se a cor sólida resultante. Este verificador faz isso automaticamente e mostra o HEX resultante.
Botões desativados e placeholders têm de cumprir o contraste?
Os componentes desativados estão isentos nas WCAG 2.2. Os placeholders não: se transmitem informação, precisam de 4,5:1. Muitos formulários falham aqui, por isso é mais seguro colocar a ajuda num rótulo visível ou num texto por baixo do campo.
Como encontro uma cor que cumpra sem mudar a marca?
Mantenha o tom e altere apenas a luminosidade. As sugestões desta ferramenta fazem exatamente isso no espaço OKLCH e mostram a opção mais escura e a mais clara para o texto ou o fundo, com o contraste resultante.
Mais em Design de produto
- Gerador de paletas acessíveis
Como obter uma paleta acessível com o contraste verificado em cada tom?
- Gerador de escala tipográfica
Que tamanhos de letra formam uma escala tipográfica coerente e fluida?
- Tempo de leitura de tooltips e tours
Os utilizadores têm tempo para ler um tooltip ou um passo do tour?
- Verificador de textos de tooltips
Este tooltip é curto, claro e leva à ação?
- Calculadora SUS
Qual é a pontuação SUS da interface e a usabilidade é boa?