デジタル色空間（HEX, RGB, HSL, OKLCH）とWCAGウェブアクセシビリティのコントラスト比

現代のデジタルディスプレイは、光の3原色である赤（Red）、緑（Green）、青（Blue）のサブピクセルを加法混色することで多彩な色を表現します。標準的なTrueColorシステムは各チャンネルに8ビット（1バイト、0〜255）を割り当て、合計24ビットの深度で1,677万色（256^3）の異なる色を生成します。

Web開発で最も一般的なHEXコードは、各チャンネルの0〜255の数値を2桁の16進数（00〜FF）で圧縮表記した形式（#RRGGBB）です。アルファ透明度を表す8ビットを追加した8桁のHEX（#RRGGBBAA）も現代のWebブラウザで完全に標準化されています。

RGBはハードウェアのピクセル構造を直に反映していますが、人間が直感的に色を微調整するのは極めて困難です。例えばボタンの背景色rgb(52, 152, 219)に対し、「少しだけ暗いホバー色」を作りたい場合、3つのチャンネルの比率を崩さずに再計算するのは手間がかかります。

これを解決するのがHSL（Hue, Saturation, Lightness）モデルです。色空間を円柱座標で再構築しています：

• 色相（Hue, 0°〜360°）: 色相環の角度（0° 赤、120° 緑、240° 青）
• 彩度（Saturation, 0%〜100%）: 色の鮮やかさ（0%は無彩色のグレー、100%は純色）
• 明度（Lightness, 0%〜100%）: 明るさ（0%は完全な黒、100%は完全な白）

HSLを使えば、明度（Lightness）パラメータだけを変更することで（hsl(204 70% 53%) -> hsl(204 70% 43%)）、一貫性のあるホバー・アクティブ状態のデザインシステムを簡単に構築できます。

広く普及しているsRGBベースのHSLにも重大な問題があります。それは人間の目にとって知覚的に均一ではないという点です。HSLでは純粋な黄色（hsl(60, 100%, 50%)）と純粋な青色（hsl(240, 100%, 50%)）はどちらも同じ明度50%ですが、人間の網膜の感度特性上、黄色の方が青色よりも圧倒的に明るく見えてしまいます。

この欠点を克服した最新規格がOKLCH（Lightness, Chroma, Hue）です。OKLCHでは明度の値が同じであれば、色相が異なっても人間の目にほぼ同じ明るさとして知覚されるよう設計されています。また、最新のOLEDディスプレイが持つ広色域（Display P3）の鮮やかな色表現をフルに引き出すことができます。

/* 次世代CSS Color Level 4規格のOKLCH構文 */
:root {
  /* 知覚的に完璧に均一なデザインシステムトークン */
  --btn-primary: oklch(0.65 0.22 260);
  --btn-hover:   oklch(0.55 0.22 260); /* どの色相でも正確に同等の暗さへ変化 */
  --btn-text:    oklch(0.98 0.01 260);
}

Webコンテンツアクセシビリティガイドライン（WCAG 2.1）は、低視力や色覚特性を持つユーザーのために、文字と背景の間に十分な明度コントラストを確保することを求めています：

• レベルAA（最低基準）: 通常テキスト（18pt未満）で4.5:1以上、大きなテキスト（18pt以上または14pt太字）で3.0:1以上。
• レベルAAA（推奨基準）: 通常テキストで7.0:1以上、大きなテキストで4.5:1以上。

コントラスト比の計算式は、相対輝度L（黒0〜白1）を基準に(L1 + 0.05) / (L2 + 0.05)で求められます。

デザインシステムや自動UIテストでアクセシビリティ適合性を判定するための計算ロジックです。DevUtilsのColor Pickerツールを使えば、HEX/RGB/HSL変換を行いながらリアルタイムにWCAG適合性を判定できます。

// sRGB値からWCAG相対輝度（Luminance）を算出
function getLuminance(r, g, b) {
    const [lr, lg, lb] = [r, g, b].map(c => {
        const v = c / 255;
        return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
    });
    return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
}

// 2色のRGB値からコントラスト比を計算
export function calculateContrastRatio(rgb1, rgb2) {
    const l1 = getLuminance(...rgb1);
    const l2 = getLuminance(...rgb2);
    const bright = Math.max(l1, l2);
    const dark = Math.min(l1, l2);
    return ((bright + 0.05) / (dark + 0.05)).toFixed(2);
}