Pourquoi une luminosité HSL de 50% ne signifie pas un contraste de texte égal

Même luminosité, luminance relative différente

#FF0000 et #00FF00 donnent hsl(0, 100%, 50%) et hsl(120, 100%, 50%) dans Moyoutil. Leur luminosité HSL est de 50%, mais leur luminance relative sRGB selon WCAG est de 0.2126 et 0.7152. Ce sont des grandeurs différentes. CSS Color 4 explique aussi que la luminosité HSL n’est pas une échelle visuellement uniforme.

W3C CSS Color 4 §7: HSL

Ne faites pas simplement la moyenne des canaux RGB

WCAG divise les canaux de 0–255 par 255, les linéarise et pondère R, G et B par 0.2126, 0.7152 et 0.0722. Le contraste vaut (L1 + 0.05) / (L2 + 0.05), avec la luminance relative des couleurs la plus claire et la plus sombre. Avec le blanc, le rouge donne environ 3.9985:1 et le vert 1.3722:1. L’affichage arrondit à quatre décimales ; n’utilisez pas de valeurs arrondies pour décider de la conformité.

Le code ci-dessous est un exemple de reproduction distinct. Moyoutil convertit HEX, RGB et HSL ; il n’indique ni rapport de contraste ni conformité WCAG. Vérifiez ensemble le texte et le fond du design réel. Transparence, images et dégradés sortent du cadre de cet exemple de couleurs unies opaques.

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

W3C WCAG 2.2: relative luminance and contrast ratio

Questions fréquemment posées