Lições Interativas de Matemática e Ciências

Verificador de Contraste de Cores (Luminância WCAG)

Informe uma cor de primeiro plano e uma de fundo para calcular abaixo a luminância relativa WCAG atual e a razão de contraste (AA/AAA). As amostras à direita, abaixo da pré-visualização, mostram o que a fórmula WCAG moderna "vê" para cada cor; as da esquerda mostram o que a fórmula de luma de um engenheiro de radiodifusão de 1953 teria mostrado para essas mesmas cores — uma comparação direta entre o antigo e o novo.

A carregar a simulação interativa...

Por que o verde pesa mais do que o vermelho e o azul — e por que a lei ainda usa a matemática de 1953 🖖

Os pesos na fórmula de luminância (0,2126 com forte peso no verde hoje; 0,299/0,587/0,114 em 1953) não são arbitrários: eles remontam ao observador-padrão CIE 1931, que constatou que a resposta dos cones do olho humano e a curva de eficiência luminosa nos tornam muito mais sensíveis à luz verde do que à vermelha ou à azul. O NTSC precisava exatamente desse tipo de soma ponderada em 1953 para que uma nova transmissão em cores ainda produzisse uma imagem em escala de cinza correta nos milhões de aparelhos em preto e branco já presentes nas salas de estar — o 'luma' foi criado como um truque de retrocompatibilidade, não como um ideal perceptual. Essa história importa hoje porque a razão de contraste do WCAG 2 verificada acima tem peso legal (citada pela ADA e pela EN 301549), mas os cientistas da visão a consideram falha: sabe-se que ela superestima o contraste de texto escuro sobre fundo claro e subestima o de texto claro sobre fundo escuro — algo diretamente relevante, já que este próprio site usa um tema escuro por padrão. O APCA, substituto proposto no rascunho do WCAG 3, modela essa assimetria corretamente; até que seja lançado oficialmente, a fórmula acima continua sendo a que você realmente precisa satisfazer.

O que uma razão de contraste realmente mede 🖖

O número que esta ferramenta exibe é uma razão de luminância relativa: (L1 + 0.05) / (L2 + 0.05), em que L1 é a cor mais clara e L2 a mais escura. Vai de 1:1 (cores idênticas, invisíveis) a 21:1 (preto puro sobre branco puro). O 0.05 somado a ambos não é arredondamento: modela o leve reflexo de luz ambiente que as telas reais devolvem, de modo que nem o 'preto puro' chega a zero. Mire 4.5:1 no texto corrido e 3:1 no texto grande para passar no limite WCAG AA.

Um erro de digitação congelado na lei 🖖

A fórmula lineariza cada canal sRGB com uma curva por partes que passa de um trecho linear para um expoente gama em um limiar. A WCAG 2 coloca essa transição em 0.03928, mas o padrão sRGB real a fixa em 0.04045. O valor da WCAG é um erro de digitação, copiado de um rascunho inicial do sRGB antes de o número ser corrigido, e desde então gravado numa norma de acessibilidade citada internacionalmente. O erro desloca os resultados em menos de 10⁻⁴, então ninguém se deu ao trabalho de corrigir o texto.

Problema resolvido na íntegra

  1. Rácio de contraste entre texto #e2e6f0 e um fundo #1a1d27 5 passos

    Calcule a razão de contraste entre texto #e2e6f0 e um fundo #1a1d27 — as cores da própria página. Fazer a média dos canais dá 5,55. As WCAG dão 13,46. Descubra de onde vem o fator de dois e meio.

    1. A definição parece inofensiva: uma razão entre duas luminâncias, cada uma ajustada em 0,05 para que o preto puro não origine uma divisão por zero. Os pesos não são iguais, e essa é a primeira surpresa — ao verde é atribuída dez vezes mais luminância do que ao azul.

    2. A segunda surpresa é que os valores dos canais não podem ser usados como estão. Um byte num ficheiro de imagem está codificado por gama: 128 não significa metade da luz, significa sensivelmente um quinto. A expressão definida por partes desfaz essa codificação, e é o passo que todos os que criam a sua própria verificação de contraste omitem.

    3. Submeta ambas as cores a esse cálculo. A clara fica em 0,79, a escura em 0,0124 — uma diferença por um fator de 63 em luz física, proveniente de bytes que diferem apenas por um fator de cerca de 7.

    4. Os desvios de 0,05 comprimem depois esse valor de 63 para 13,46, que é o número exibido pelo painel. Esse desvio não é cosmético: modela a luz que o ecrã reflete mesmo quando apresenta preto, motivo pelo qual um tema escuro não consegue obter um contraste ilimitado numa divisão iluminada.

    5. Os pesos explicam a queixa mais comum de um designer. O verde puro e o azul puro são ambos um único canal na força máxima, contudo o verde carrega 0,7152 da luminância e o azul apenas 0,0722.

    Resposta

    A ferramenta indica 13,46 : 1, confortavelmente além dos 4,5 do nível AA e dos 7 do nível AAA. A razão para efetuar o cálculo à mão é a etapa da gama: omita-a, faça em vez disso a média dos canais, e este par obtém a pontuação de 5,55 — ainda assim uma aprovação, mas errada por um fator de 2,4, sendo que num par mais próximo esse erro é a diferença entre a aprovação e a reprovação. Os pesos constituem a outra metade. O verde é 9,9 vezes mais brilhante do que o azul para o mesmo valor de canal, pelo que o texto azul sobre fundo preto é muito pior do que parece num seletor de cores, e o amarelo sobre fundo branco muito melhor do que os designers esperam. Experimente #0000ff contra #000000 e leia a razão.

Referências (2)

· Atualizado

Verificado com fontes publicadas. Correções bem-vindas. Política editorial · Correções

Todas as lições de Computação →

Problemas de exemplo