PT-BR

Verificador de contraste 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.

HEX, rgb(), hsl() … também com transparência
Seus dados ficam salvos só neste navegador.

Prévia

Texto normal: assim fica um parágrafo com fonte de 16 pixels.

Texto grande a partir de 24 px

Texto em negrito a partir de 18,67 px

Botão

Prévia com as suas cores: 16 px normal, 24 px normal e 18,67 px em negrito (= 14 pt negrito, texto grande); abaixo, borda e ícone como exemplo de interface.

Resultado

Razão de contraste
4,48 : 1
Avaliação pelas WCAG 2.2
CritérioMínimoResultado
Texto normal – AA (SC 1.4.3)4,5 : 1✗ não atende
Texto normal – AAA (SC 1.4.6)7 : 1✗ não atende
Texto grande – AA (SC 1.4.3)3 : 1✓ atende
Texto grande – AAA (SC 1.4.6)4,5 : 1✗ não atende
Componentes de interface e gráficos – AA (SC 1.4.11)3 : 1✓ atende
Cor de texto mais próxima para AA (4,5:1)
#767676 (4,54 : 1)
Cor de texto mais próxima para AAA (7:1)
#595959 (7,00 : 1)
Luminância relativa do texto
0,1845 (#777777)
Luminância relativa do fundo
1,0000 (#FFFFFF)

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).

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 sucessoNívelTexto normalTexto grande
1.4.3 Contraste (mínimo)AA4,5:13:1
1.4.6 Contraste (melhorado)AAA7:14,5:1
1.4.11 Contraste não textual (componentes de interface, gráficos)AA3: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.

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.

Fontes e base legal

Última atualização:

Ferramentas relacionadas