同じ明度、異なる相対輝度

Moyoutilの色変換に#FF0000と#00FF00を入力すると、hsl(0, 100%, 50%)とhsl(120, 100%, 50%)になります。HSL明度はいずれも50%ですが、WCAGのsRGB相対輝度は0.2126と0.7152です。HSL明度と相対輝度は異なる量です。CSS Color 4もHSL明度が視覚的に均一な尺度ではないと説明しています。

HSL明度50%の赤と緑の相対輝度および白とのコントラスト比
自作の計算比較図。YはWCAG相対輝度、下の比率は#FFFFFFとの比較です。色見本にコードと数値も添えています。

W3C CSS Color 4 §7: HSL

RGBチャンネルを単純平均しない

WCAGは0〜255のチャンネル値を255で割って線形化し、R・G・Bに0.2126・0.7152・0.0722の重みを適用します。コントラスト比は明るい色と暗い色の相対輝度から求める(L1 + 0.05) / (L2 + 0.05)です。白との比率は赤が約3.9985:1、緑が約1.3722:1です。表示値は小数第4位まで丸めており、適合判断に丸めた値を使わないでください。

以下のコードは計算再現用の別例です。MoyoutilはHEX・RGB・HSLを変換しますが、コントラスト比やWCAG適合性は表示しません。実際のデザインでは文字色と背景色を一緒に確認してください。透明度、画像、グラデーション背景はこの不透明な単色の例の対象外です。

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

よくある質問

コントラスト比だけでアクセシビリティ全体を確認できますか？

いいえ。この説明は2つの不透明色のコントラスト計算のみを扱います。文字サイズや使用状況の基準、その他のアクセシビリティ要件は別途確認してください。