Warum 50% HSL-Helligkeit keinen gleichen Textkontrast bedeutet

Gleiche Helligkeit, unterschiedliche relative Leuchtdichte

#FF0000 und #00FF00 ergeben im Moyoutil-Farbumrechner hsl(0, 100%, 50%) und hsl(120, 100%, 50%). Beide haben 50% HSL-Helligkeit, ihre relative sRGB-Leuchtdichte nach WCAG beträgt jedoch 0.2126 und 0.7152. Es handelt sich um unterschiedliche Größen. Auch CSS Color 4 erklärt, dass HSL-Helligkeit keine visuell gleichmäßige Skala ist.

W3C CSS Color 4 §7: HSL

RGB-Kanäle nicht einfach mitteln

WCAG teilt die Kanäle von 0–255 durch 255, linearisiert sie und gewichtet R, G und B mit 0.2126, 0.7152 und 0.0722. Der Kontrast beträgt (L1 + 0.05) / (L2 + 0.05), mit der relativen Leuchtdichte der helleren und dunkleren Farbe. Zu Weiß ergibt Rot etwa 3.9985:1 und Grün etwa 1.3722:1. Die Anzeige rundet auf vier Nachkommastellen; verwenden Sie gerundete Werte nicht zur Konformitätsentscheidung.

Der folgende Code ist ein separates Rechenbeispiel. Moyoutil wandelt HEX, RGB und HSL um; es zeigt weder Kontrastverhältnisse noch WCAG-Konformität an. Prüfen Sie Text- und Hintergrundfarbe im tatsächlichen Entwurf gemeinsam. Transparenz, Bilder und Farbverläufe liegen außerhalb dieses Beispiels deckender, einfarbiger Flächen.

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

Häufig gestellte Fragen