WCAG コントラストの基本

読みやすい UI は主観的趣味ではありません。テキストと背景の間の測定可能なコントラストです。

コントラスト比

WCAG は 1:1（同一）から 21:1（白上の黒）の比を定義します。高いほど多くのユーザーに読みやすく、低視力や明るい屋外の眩しさにも対応します。

ツールは前景と背景の相対輝度を計算し、標準式を適用します。薄いグレーテキストを tinted カード上で目視すべきではありません。

AA vs AAA 目標

通常テキスト（18pt 未満の regular / 14pt 未満の bold）の一般的な最小値：

レベル	最小比
WCAG AA	4.5:1
WCAG AAA	7:1

大きいテキストはより低い閾値（AA で 3:1）。アイコンと装飾グリフは免除されることがありますが、インタラクティブラベルは対象外ではありません。

多くのプロダクトチームは AA をデフォルトで出荷します。本文コピーの AAA は理想ですが、カラフルなマーケティング背景では常に可能ではありません。

背景が重要

青ボタンのラベルは、ボタン背後のページではなくボタン塗りに対してコントラストを通過する必要があります。半透明オーバーレイは下にあるものと合成します。最悪ケースの壁紙や写真を確認してください。

ステータス色（success、warning、danger）は、薄い彩度で白テキストと組み合わせると失敗しがちです。塗りを暗くするか、暗いテキストに切り替えます。

色だけに頼らない

赤/緑ステータスドットは色覚異常ユーザーには失敗します。色にアイコン、ラベル、パターンを組み合わせます。コントラストツールは冗長エンコーディングの代わりにはなりません。

テストワークフロー

1. テーマから前景と背景トークンを選ぶ
2. コンバーターまたはデザインプラグインでコントラストを測定
3. 失敗修正では色相より lightness を先に調整。通常副作用が少ない
4. hover/focus 状態を再テスト。別ペアです

要点

文書化されたコントラスト比付きでテキストペアを出荷します。ローンチ後のコントラスト修正は高コストです。トークンレビューにチェックを組み込んでください。