Verificador de contraste
Escolha uma cor de texto e um fundo, e a razão de contraste é medida em relação aos requisitos da WCAG.
Razão de contraste
16,69:1
A escala vai de 1:1 para duas cores iguais a 21:1 para preto no branco.
Como fica
Título em texto grande
Texto normal neste tamanho é o que mais exige contraste, porque as letras são finas.
Requisitos da WCAG
- Texto normal, AAAbaixo de 18 pontos, ou abaixo de 14 pontos em negrito · 4,5:1Aprovado
- Texto normal, AAAAbaixo de 18 pontos, ou abaixo de 14 pontos em negrito · 7:1Aprovado
- Texto grande, AAA partir de 18 pontos, ou 14 pontos em negrito · 3:1Aprovado
- Texto grande, AAAA partir de 18 pontos, ou 14 pontos em negrito · 4,5:1Aprovado
- Interface e gráficos, AABordas, ícones e tudo o que carrega significado · 3:1Aprovado
Como funciona
A razão de contraste mede a diferença de luminância relativa entre duas cores. Ela vai de 1:1, duas cores iguais, a 21:1, preto no branco.
A WCAG exige pelo menos 4,5:1 para texto normal no nível AA e 7:1 no nível AAA. Para texto grande, a partir de 18 pontos ou 14 pontos em negrito, bastam 3:1 e 4,5:1.
Componentes de interface e gráficos com significado precisam de 3:1 em relação ao entorno. Isso inclui a borda de um campo de formulário e ícones sem texto ao lado.
A razão é calculada pela luminância, e não por quão diferentes as cores parecem. Duas cores com a mesma luminosidade mas matizes totalmente diferentes, como vermelho (#ff0000) e verde (#009400), dão razão 1,00 e são ilegíveis apesar de parecerem diferentes.
Os requisitos são um piso, não uma meta. Texto exatamente em 4,5:1 ainda cansa sob o sol ou numa tela barata.
Como a ferramenta calcula
Cada canal é dividido por 255 e linearizado: valores até 0,040 45 são divididos por 12,92, e valores maiores v viram ((v + 0,055) / 1,055) elevado a 2,4. A luminância relativa é 0,2126 R + 0,7152 G + 0,0722 B, e a razão é (L1 + 0,05) / (L2 + 0,05), com a cor mais clara como L1. O limite 0,040 45 está na WCAG desde maio de 2021; antes era 0,039 28, e o W3C diz que a mudança não tem efeito prático. Para cores em hex não faz diferença nenhuma, porque nenhum valor de canal cai entre os dois: 10/255 é 0,0392 e 11/255 é 0,0431.
Exemplo
#767676 sobre branco: o canal 118/255 = 0,463 vira 0,181 depois de linearizado, e como os três canais são iguais, a luminância também é 0,181. A razão é (1 + 0,05) / (0,181 + 0,05) = 4,54, que passa no AA para texto normal. Um passo mais claro, #777777 dá 4,478 e não passa. O cinza mais claro que passa no AAA, 7:1, sobre branco é #595959, com 7,0047; o passo seguinte, #5a5a5a, dá 6,897.
Sem arredondamento
A explicação do W3C para o critério de sucesso 1.4.3 diz que a razão não deve ser arredondada: 4,499:1 não atende a 4,5:1. A ferramenta julga pelo valor sem arredondamento e corta o número em vez de arredondá-lo. #0080aa sobre branco dá 4,4986 e é reprovado para texto normal. Arredondado, apareceria 4,50 ao lado de uma reprovação, então a ferramenta mostra 4,49:1, e #777777 aparece como 4,47:1.
A lei brasileira e o eMAG
A Lei Brasileira de Inclusão (Lei nº 13.146/2015), no art. 63, torna obrigatória a acessibilidade nos sites de empresas com sede ou representação comercial no país e de órgãos de governo, conforme as melhores práticas e diretrizes adotadas internacionalmente. O eMAG 3.1, o modelo de acessibilidade do governo federal, pede na recomendação 4.1 uma razão de pelo menos 4,5:1.
Os exemplos do próprio eMAG merecem atenção. O par que ele apresenta como 4,5:1, #0000a2 sobre #939393, dá 4,4919 pela fórmula da WCAG, e a ferramenta mostra 4,49:1 e reprova o texto normal no AA. Além disso, o eMAG descreve a razão como a luminosidade da cor mais clara dividida pela da mais escura, sem os 0,05 que a WCAG soma às duas; lida ao pé da letra, essa descrição daria cerca de 11,2 para o mesmo par.