Mesma luminosidade, luminância relativa diferente
Inserir #FF0000 e #00FF00 no Moyoutil produz hsl(0, 100%, 50%) e hsl(120, 100%, 50%). Ambos têm luminosidade HSL de 50%, mas suas luminâncias relativas sRGB segundo WCAG são 0.2126 e 0.7152. São grandezas diferentes. CSS Color 4 também explica que a luminosidade HSL não é uma escala visualmente uniforme.
Não tire simplesmente a média dos canais RGB
WCAG divide os canais de 0–255 por 255, lineariza-os e pondera R, G e B por 0.2126, 0.7152 e 0.0722. O contraste é (L1 + 0.05) / (L2 + 0.05), usando a luminância relativa das cores mais clara e mais escura. Com branco, o vermelho fica em cerca de 3.9985:1 e o verde em 1.3722:1. Os valores exibidos são arredondados para quatro casas decimais; não use valores arredondados para decidir conformidade.
O código abaixo é um exemplo separado de reprodução. Moyoutil converte HEX, RGB e HSL; não informa razões de contraste nem conformidade WCAG. Confira juntos a cor do texto e o fundo do projeto real. Transparência, imagens e fundos em gradiente ficam fora deste exemplo de cores sólidas opacas.
const linear = n => {
const s = n / 255;
return s <= 0.04045 ? s / 12.92
: ((s + 0.055) / 1.055) ** 2.4;
};
const luminance = rgb => {
const [r, g, b] = rgb.map(linear);
return 0.2126*r + 0.7152*g + 0.0722*b;
};
const contrast = (a, b) => {
const x = luminance(a), y = luminance(b);
return (Math.max(x,y)+0.05)
/ (Math.min(x,y)+0.05);
};
console.log(contrast([255,0,0], [255,255,255]).toFixed(4));
console.log(contrast([0,255,0], [255,255,255]).toFixed(4));
// 3.9985
// 1.3722Perguntas frequentes
Uma razão de contraste comprova toda a acessibilidade?
Não. Este artigo apenas calcula o contraste entre duas cores opacas. Verifique separadamente os critérios de tamanho e contexto do texto e os demais requisitos de acessibilidade.