Verificador de contraste de cores WCAG
Teste qualquer par de cor de texto e fundo pelo WCAG 2.2 (AA e AAA), veja ao vivo e receba a cor mais próxima que passa quando reprova
Cores para testar
Digite uma cor HEX, rgb() ou hsl() válida.
Digite uma cor HEX, rgb() ou hsl() válida.
Dá para ler de relance?
Um pequeno jabuti xereta viu dez cegonhas felizes. Mude as cores e o tamanho para ver como este parágrafo se comporta.
Uma cor por linha (HEX, rgb() ou hsl()). Até 6 cores; cada par é verificado.
- Texto normal · AA (4,5:1) ✓
- Texto normal · AAA (7:1) ✓
- Texto grande · AA (3:1) ✓
- Texto grande · AAA (4,5:1) ✓
- Componentes de interface e gráficos · AA (3:1) ✓
Adicione pelo menos 2 cores válidas para comparar
AAA ≥ 7:1 · AA ≥ 4,5:1 · AA grande ≥ 3:1 (somente texto grande)
Como usar esta ferramenta
- Informe a cor do texto e a cor do fundo em HEX, rgb() ou hsl(), ou use os seletores de cor.
- Defina o tamanho do texto em px e marque negrito se for o caso, para a ferramenta saber se conta como texto grande.
- Leia a razão de contraste e o resultado de passa ou falha para AA e AAA, texto normal e grande.
- Se falhar, use Aplicar na cor sugerida ou mude para a análise de paleta para testar até 6 cores.
Exemplo prático
O cinza escuro #333333 sobre branco dá 12,63:1 e passa em todos os níveis. O cinza médio #777777 sobre branco dá 4,47:1: a razão é truncada, não arredondada, então reprova no limite AA de 4,5:1 para texto normal, embora pareça próxima. A ferramenta sugere #767676 (4,54:1) para AA e #595959 (7,00:1) para AAA, mantendo o matiz e mudando só a luminosidade. Texto grande começa em 24 px normal ou cerca de 18,66 px em negrito e exige só 3:1 para AA. Uma razão aprovada não garante legibilidade para todos, pois peso da fonte, tamanho e visão também contam.
Metodologia
Este verificador implementa o algoritmo de contraste do WCAG 2.x (critérios de sucesso 1.4.3, 1.4.6 e 1.4.11), inalterado desde o WCAG 2.0, de 2008, e mantido nas versões 2.1 e 2.2. As razões são truncadas, nunca arredondadas: 4,499:1 aparece como 4,49:1 e reprova corretamente. Quando um par reprova, a sugestão preserva o matiz e a saturação da sua cor e procura apenas no eixo da luminosidade o valor mais próximo que atinge a meta.
Seis cores comuns sobre branco e um vermelho corrigido
Razões que o verificador mostra para cada cor de texto sobre #FFFFFF.
| Cor do texto | Razão | Normal AA (4,5:1) | Grande AA (3:1) |
|---|---|---|---|
| #0B5FFF | 5,12:1 | Passa | Passa |
| #008000 | 5,13:1 | Passa | Passa |
| #E53935 | 4,22:1 | Reprova | Passa |
| #FF0000 | 3,99:1 | Reprova | Passa |
| #808080 | 3,94:1 | Reprova | Passa |
| #FFA500 | 1,97:1 | Reprova | Reprova |
As razões são truncadas, nunca arredondadas. A coluna que vale depende do tamanho: o texto conta como grande a partir de 24 px normal ou 18,66 px em negrito; abaixo disso, leia a coluna Normal. O laranja #FFA500 reprova em tudo com 1,97:1, e nem como borda de interface essa cor basta sobre o branco. Vermelhos, laranjas e cinzas médios são os problemas de sempre, e um par que reprova em texto de corpo ainda pode passar como texto grande ou como borda de interface.
O vermelho de erro. A Dana usa #E53935 nos erros de formulário em 16 px. Ele marca 4,22:1 e, portanto, reprova no AA como texto normal. A ferramenta mantém o matiz dela e muda só a luminosidade: #E32C28 chega a 4,50:1 para AA, e #AF1A17 chega a 7,04:1 para AAA. Ela aplica #E32C28 às mensagens de 16 px e mantém #E53935 nos títulos de 24 px e nas bordas dos campos, onde 3:1 basta. Ainda assim, precisa ficar legível para você: uma razão aprovada é um piso, não uma garantia.
Acessibilidade e fidelidade de cor
Livros e equipamentos para designers e desenvolvedores que se importam com cores legíveis e precisas
Design inclusivo para acessibilidade: guia prático de acessibilidade digital, UX e design inclusivo para web e apps
Guia prático de Dale Cruse e Denis Boudreau sobre acessibilidade digital, UX e design inclusivo para web e apps (livro em inglês).
Kit Calibrite Photo com Display Pro HL: colorímetro para calibração de monitor e ColorChecker Passport Photo 2
Colorímetro Display Pro HL com ColorChecker Passport Photo 2 para um fluxo de cor preciso da captura à edição: arquivos RAW, perfis de câmera personalizados e balanço de branco.
Como Associado da Amazon, ganhamos comissões por compras qualificadas, sem custo adicional para você.
Perguntas frequentes
Por que #777777 no branco reprova se parece legível? ▼
O WCAG mede a luminância relativa, não como um cinza aparece na sua tela. #777777 no branco dá cerca de 4,47:1, logo abaixo do mínimo AA de 4,5:1 para texto normal. #767676 é o cinza neutro mais claro que passa no AA sobre o branco (4,54:1). São esses casos no limite que explicam por que a ferramenta trunca as razões em vez de arredondá-las.
Como a ferramenta decide se o meu texto conta como grande? ▼
Ela usa o tamanho e o peso que você informa: 24 px (18 pt) ou mais em peso normal, ou 18,66 px (14 pt) ou mais em negrito. Defina o tamanho e marque “Texto em negrito” se for o caso: as linhas correspondentes ficam destacadas e o veredito segue essa categoria.
Placeholders, botões desativados e logotipos precisam passar? ▼
Componentes de interface inativos (desativados) e logotipos são isentos do critério 1.4.3, mas o texto de dica de um campo (placeholder) não é: ele precisa atingir 4,5:1 como qualquer outro texto. Ícones e bordas de campo necessários para identificar um controle entram na regra de 3:1 para contraste de elementos não textuais.
Posso testar texto sobre um degradê, uma foto ou uma cor semitransparente? ▼
Esta ferramenta compara duas cores sólidas. Para uma cor semitransparente, misture-a primeiro com o fundo real e informe o resultado. Para degradês e fotos, teste a cor do texto contra a área mais clara e a mais escura atrás dele e fique com o pior resultado.
Devo mirar no AA ou no AAA? ▼
O AA é o nível que a maioria das exigências baseadas no WCAG pede, então é o mínimo prático. O AAA é uma meta mais rígida, que não se espera para todos os elementos de um site, mas faz sentido para textos longos de leitura.
Esta ferramenta usa o APCA ou o modelo de contraste do WCAG 3? ▼
Não. O APCA é um modelo candidato para o WCAG 3, que ainda é um rascunho. Este verificador usa a razão do WCAG 2.x, a mesma fórmula em que auditorias e normas se baseiam hoje.