Mengapa Lightness HSL 50% Tidak Berarti Kontras Teks Sama

Lightness sama, luminans relatif berbeda

Memasukkan #FF0000 dan #00FF00 ke Moyoutil menghasilkan hsl(0, 100%, 50%) dan hsl(120, 100%, 50%). Keduanya memiliki lightness HSL 50%, tetapi luminans relatif sRGB menurut WCAG adalah 0.2126 dan 0.7152. Keduanya besaran berbeda. CSS Color 4 juga menjelaskan bahwa lightness HSL bukan skala yang seragam secara visual.

W3C CSS Color 4 §7: HSL

Jangan langsung merata-ratakan kanal RGB

WCAG membagi kanal 0–255 dengan 255, melinearkannya, lalu memberi bobot R, G, dan B sebesar 0.2126, 0.7152, dan 0.0722. Kontras adalah (L1 + 0.05) / (L2 + 0.05), memakai luminans relatif warna lebih terang dan lebih gelap. Dengan putih, merah sekitar 3.9985:1 dan hijau sekitar 1.3722:1. Tampilan dibulatkan ke empat desimal; jangan memakai nilai bulat untuk menentukan kesesuaian.

Kode berikut merupakan contoh reproduksi terpisah. Moyoutil mengonversi HEX, RGB, dan HSL; tidak menampilkan rasio kontras atau kesesuaian WCAG. Periksa warna teks dan latar bersama dalam desain sebenarnya. Transparansi, gambar, dan latar gradien berada di luar contoh warna solid opak ini.

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

Pertanyaan yang Sering Diajukan