Verificador de contraste de cores pelas WCAG 2.2
Informe ou escolha a cor do texto e a cor de fundo: o verificador calcula a luminância relativa das duas cores e a razão de contraste exatamente pela definição do W3C e mostra quais critérios de sucesso das WCAG 2.2 são atendidos. Se o contraste não for suficiente, ele sugere a cor de texto adequada mais próxima.
Fonte: SC 1.4.3, W3C – WCAG 2.2: Contrast (Minimum), Level AA. Atualizado em: .
Como o cálculo é feito
Como o contraste é calculado
As WCAG 2.2 definem a razão de contraste como (L1 + 0,05) ÷ (L2 + 0,05). L1 é a luminância relativa da cor mais clara, e L2, a da mais escura. O resultado fica entre 1:1 (cores iguais) e 21:1 (preto sobre branco).
Como verificar o contraste de cores
- Digite ou escolha a cor do texto (primeiro plano).
- Digite ou escolha a cor de fundo.
- Veja a razão de contraste e os critérios WCAG atendidos (AA, AAA); use a cor sugerida se precisar.
Exemplo: preto sobre branco chega a 21:1. O cinza #767676 sobre branco dá 4,54:1 e passa no AA para texto normal; o azul #3B82F6 sobre branco só atinge 3,68:1 e atende ao AA apenas para texto grande.
O verificador calcula a luminância relativa exatamente pela definição do W3C: cada canal sRGB é dividido por 255 e linearizado; valores até 0,04045 são divididos por 12,92, e acima disso vale ((valor + 0,055) ÷ 1,055)2,4. Depois, L = 0,2126 × R + 0,7152 × G + 0,0722 × B.
Exemplo #777777 sobre branco: 0x77 = 119, 119 ÷ 255 = 0,4667 → ((0,4667 + 0,055) ÷ 1,055)2,4 = 0,1845. Como os três canais são iguais, L = 0,1845. O branco tem L = 1. Contraste = (1 + 0,05) ÷ (0,1845 + 0,05) = 4,48:1. Isso basta para texto grande (3:1), mas fica um pouco abaixo do exigido para texto normal (4,5:1). A sugestão #767676 atinge 4,54:1.
Os requisitos das WCAG 2.2
| Critério de sucesso | Nível | Texto normal | Texto grande |
|---|---|---|---|
| 1.4.3 Contraste (mínimo) | AA | 4,5:1 | 3:1 |
| 1.4.6 Contraste (melhorado) | AAA | 7:1 | 4,5:1 |
| 1.4.11 Contraste não textual (componentes de interface, gráficos) | AA | 3:1 | |
Texto grande, pelas WCAG, tem pelo menos 18 pontos ou pelo menos 14 pontos em negrito; no navegador, isso corresponde a cerca de 24 px ou 18,67 px. Ficam de fora, entre outros, logotipos, texto puramente decorativo e controles inativos.
Sem arredondar
As WCAG comparam o valor exato: 4,499:1 não atende 4,5:1. Por isso o verificador avalia sem arredondar e mostra duas casas decimais; se o arredondamento fizesse parecer que um limite foi atingido, ele trunca o valor (4,49 em vez de 4,50).
Cores transparentes
Cores com valor alfa (ex.: rgba(0, 0, 0, 0.6) ou #00000099) são sobrepostas como o navegador as desenha: um fundo transparente sobre branco e uma cor de texto transparente sobre o fundo. Se a sua página estiver sobre outra superfície, informe a cor opaca dela como fundo.
Mais ferramentas de cor: o conversor de cores, o gerador de paleta e o conta-gotas.
Perguntas frequentes
Qual contraste é necessário para acessibilidade?
Para texto normal, pelo menos 4,5:1 (nível AA das WCAG, SC 1.4.3); para texto grande, 3:1. O nível AAA, mais rigoroso, exige 7:1 e 4,5:1, respectivamente. Elementos de controle como bordas de campos de formulário e ícones precisam de 3:1 (SC 1.4.11).
Quais tons de cinza sobre branco ainda atendem ao nível AA?
#767676 é o cinza mais claro com pelo menos 4,5:1 sobre branco (4,54:1). #777777, com 4,48:1, já fica um pouco abaixo.
Como o verificador encontra a cor sugerida?
Ele mantém o matiz e a saturação da sua cor de texto e altera só a luminosidade HSL em pequenos passos, para mais claro e para mais escuro. É sugerida a menor alteração cuja cor arredondada atinja a meta com segurança.
Isso vale para as regras de acessibilidade no Brasil?
A Lei Brasileira de Inclusão (Lei nº 13.146/2015, art. 63) torna obrigatória a acessibilidade dos sites mantidos por empresas com sede ou representação comercial no país e por órgãos de governo, conforme as melhores práticas e diretrizes adotadas internacionalmente, ou seja, as WCAG. Para sites do governo federal vale ainda o eMAG (Modelo de Acessibilidade em Governo Eletrônico), baseado nas WCAG, que também recomenda contraste mínimo entre texto e fundo. Os limites de contraste das WCAG 2.0 e 2.1 são idênticos aos das WCAG 2.2: 4,5:1 para texto, 3:1 para texto grande.
Qual contraste vale para texto grande?
Para texto grande (18 pt, ou 14 pt em negrito), o WCAG AA exige pelo menos 3:1 e o AAA 4,5:1. Texto normal precisa de 4,5:1 (AA) ou 7:1 (AAA).
Fontes e base legal
- SC 1.4.3: W3C – WCAG 2.2: Contrast (Minimum), Level AA
- SC 1.4.6: W3C – WCAG 2.2: Contrast (Enhanced), Level AAA
- SC 1.4.11: W3C – WCAG 2.2: Non-text Contrast, Level AA
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
- WCAG 2.2: W3C – WCAG 2.2: Definition “contrast ratio”
- W3C WAI – Understanding SC 1.4.3: Contrast (Minimum)
Última atualização: · Princípios editoriais
Ferramentas relacionadas
- Gerador de paleta de coresGere cores que combinam a partir de uma cor base: complementar, análoga, triádica, quadrado, complementar dividida ou monocromática, com HEX, RGB e HSL.
- Conversor de cores: HEX, RGB, HSL, HSV, CMYKConverta cores: HEX para RGB, RGB para HEX, HSL, HSV, HWB e CMYK. Digite em qualquer formato ou use o seletor de cores e copie o resultado, tudo no navegador.
- Pegar cor de imagem (conta-gotas)Descubra o código de cor de uma imagem: abra a foto, clique no ponto e copie HEX, RGB e HSL, além das cores principais. Sem upload, tudo fica no navegador.
- Calculadora de IMC segundo a OMSCalculadora de IMC: índice de massa corporal com altura e peso, classificação da OMS em escala de cores, faixa de peso normal para a sua altura e BMI Prime.
- Calculadora de clearance de creatinina (Cockcroft-Gault)Calculadora de clearance de creatinina por Cockcroft-Gault: idade, sexo, peso, altura e creatinina dão o ClCr com peso real, ideal e ajustado.
- Gerador de cor aleatóriaGere uma cor aleatória ou uma paleta: aleatória, pastel, vibrante, escura, tons de uma cor ou harmonia. Com HEX, RGB, HSL e cor de texto legível.
- Simulador de daltonismoVeja sua imagem e suas cores como uma pessoa com daltonismo vermelho-verde, azul-amarelo ou sem cores. Modelo científico, imagem processada localmente, grátis.
- Calculadora de massa magraCalculadora de massa magra: estime sua massa corporal livre de gordura a partir de altura e peso com as fórmulas de Boer e Hume, ou pelo percentual de gordura.
- Pedra de nascimento por mêsDescubra sua pedra de nascimento por mês: qual gema corresponde ao seu mês de nascimento? Os doze meses com cor, significado tradicional e pedras alternativas.