コントラスト比チェッカー

1. 「テキスト色」にテキストのカラーコードを入力します（例: #19161a, rgb(25,22,26)）
2. 「背景色」に背景のカラーコードを入力します（例: #f3efe8）
3. カラーピッカー（左の色ボックス）をクリックしてGUIで色を選ぶこともできます
4. コントラスト比とWCAG 2.1の合否判定がリアルタイムで表示されます
5. 下部のプレビューで実際のテキスト表示を確認できます

WCAG 2.1に準拠したコントラスト比の計算は、sRGB線形化と相対輝度の計算に基づいています。外部ライブラリは不要で、ブラウザ標準のJavaScriptのみで実装しています。

/** sRGB channel linearization */
function linearize(c: number): number {
  const s = c / 255
  return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)
}

/** Relative luminance (WCAG 2.x) */
export function relativeLuminance(r: number, g: number, b: number): number {
  return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b)
}

/** Contrast ratio between two luminance values */
export function contrastRatio(l1: number, l2: number): number {
  const lighter = Math.max(l1, l2)
  const darker = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

/** Parse hex, rgb(), rgba() color strings to 0-255 components */
export function parseColor(input: string): ParseResult {
  const s = input.trim()
  const hex3 = s.match(/^#?([0-9a-f])([0-9a-f])([0-9a-f])$/i)
  if (hex3) {
    return { ok: true, r: parseInt(hex3[1]+hex3[1],16),
             g: parseInt(hex3[2]+hex3[2],16), b: parseInt(hex3[3]+hex3[3],16) }
  }
  const hex6 = s.match(/^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
  if (hex6) {
    return { ok: true, r: parseInt(hex6[1],16),
             g: parseInt(hex6[2],16), b: parseInt(hex6[3],16) }
  }
  const rgb = s.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/)
  if (rgb) {
    return { ok: true, r: parseInt(rgb[1]), g: parseInt(rgb[2]), b: parseInt(rgb[3]) }
  }
  return { ok: false, error: `色の形式が無効です: "${input}"` }
}

このツールのソースコード（テストコードを含む）はGitHubで公開しています。 MITライセンスで自由に利用・改変できます。