コントラストインターフェイスと可読性

1）なぜコントラスト

• 認知負荷および疲労を減らします、
• インターフェイスのスキャン速度を改善します、
• 視覚および色障害の人々のためのアクセシビリティを高めて下さい、
• 相互に関連するシナリオ（支払い、フォーム、確認）のエラーを低減します。

2）基本的な概念と数式

2.1 WCAGによるコントラスト

• コントラスト=（L1+0。05）/（L2+0。05）、ここで'L1 ≥ L2'、 'L'は相対的な明るさ（0。。1).

2.2相対的な明るさ（sRGB）

1.成分R、 G、 Bを0の範囲に持ち込みます。1.

• 'c ≤ 0の場合。04045'、次に'c_lin=c/12。92`
• そうでなければ'c_lin=（（c+0。055) / 1.055) ^ 2.4`

3.明るさ： 'L=0。2126 R_lin+0。7152 G_lin+0。0722 B_lin'

2.3色の表現

HSL/HSV-手動調整に便利ですが、知覚的に均一ではありません。
ラボ/LCH/OKLCH-人間の知覚に近い；OKLCHは可読性を維持しながら軽さ/彩度の体系的な変化に便利です。

3）規範と目的（WCAG 2。2)

テキスト≥ 14 pt太字または≥ 18 pt（通常）：コントラスト少なくとも3：1 （AA）。
テキストの残り：少なくともコントラスト4。5：1 （AA）。
AAA（可読性の向上）：平文の7：1；4.大きいもののための5-1。
図像と重要な写真以外の要素（入力フィールド、チェックボックス、スイッチ、エラーインジケータの境界）：背景付き3：1のランドマーク。
状態（hover/focus/pressed/disabled）は、少なくとも3：1である必要があります。

4）設計システム： 対照のトークン

トークンの特性として、デザインシステムがコントラストを記録することをお勧めします。

• 'fg/primary' ↔ 'bg/base' ≥ 7：1（クリティカルテキストのAAA）
• 'fg/secondary' 'bg/base' 4 。5:1
• 'fg/muted' ↔ 'bg/subtle' ≥ 3：1（サービステキスト）
• 'border/default' ↔' bg/base '≥ 3：1（フィールド、カードの境界）
• 'interactive/default' ' bg/base ' 4 。5：1（リンク/ボタン）
• 'interactive/disabled'はアクティブな状態を模倣しない。コントラストリダクションとカーソル/ARIA属性を使用します。

• テーマの基本的な軽さ（L）、次に偏差'Δ L'層/表面（'bg/微妙な'、'bg/elevated'）、
• テストの最小コントラストペアを修正します。

5）明暗のテーマ

ライトテーマ：テキストはほとんど黒です（純粋な#000ではなく、暖かい/冷たい色合い）、背景は「輝き」を減らすためにわずかに着色された白です。

暗いテーマ： きれいな#000の背景-L≈0の深いグラファイト/木炭を避けてください。12–0.16はまぶしさを減らします；白いテキストをL≈0に柔らかくして下さい。9.

両方のテーマで同じ対照的なターゲットを維持します。色のアクセントが暗い背景で可読性を失うことを許可しないで下さい（多くの場合シフト'Δ L'および飽和の減少は必要です）。

6）画像とビデオのテキスト

オーバーレイ（グラデーション/半透明レイヤー40〜60％）またはテキストの下にダイを使用します。
少なくとも修正4。5：1テキストとダイのローカル背景の間。
ダイナミックビデオの場合-フレームの明るさを分析して、背景/オーバーレイに適応します（中央/背景領域をサンプリングします）。

7）状態とインタラクティブ

参照は色だけでなく区別する必要があります。デフォルトの下線またはホバー/フォーカス+コントラストの下線≥プレーンテキストの3：1です。
ボタン：テキストとアイコン≥ 4。5：1を埋めるために；3：1 ≥環境に塗りつぶします。

エラー/成功/警告： 色に依存しないでください。アイコン/テキストプロンプトを追加します。少なくとも4つのテキストのコントラストを提供します。5:1.

8）色損害者

• Deuteranopia/Protanopia（赤-緑のゾーン）：追加の兆候なしで「赤と緑」の組み合わせを避けてください。
• トリタノピア：別にチェックする青黄色のペア。
• 図形とグラフを明確にする：テキストラベル、さまざまな種類のストローク/マーカー、塗りつぶしパターン、セグメントキャプション。

9）タイポグラフィと背景

本体サイズ：14-16 px最小（web）、コンテンツゾーンの16-18 px。
線の間隔1。4–1.6は高コントラストの背景に対して可読性を改善します。
不十分なコントラストで微妙なスタイルを避けます。
色の背景のテキスト：背景の彩度を下げるか、明度を上げて目標比に達します。

10）グラフ、表、グラフ

行/列≥グリッド/背景に3：1です。

軸ラベルと凡例≥ 4。5:1.

色を超えて識別可能な形状/パターンを使用します。

11）動的/適応的な対照

オートコントラスト： 選択した塗りつぶしにテキストのコントラスト色を計算します（例：via OKLCH： 'L'にマッチして4に到達します。5:1).

システム設定：respect 'prefers-contrast'、' forced-colors'、ハイコントラストOSモード。
パーソナライゼーション：アプリケーションに「ハイコントラスト」を設定する（「Δ L」を強化し、フォーム/アイコンを通じてブランドアイデンティティを維持しながら、ブランドのアクセントをよりニュートラルなものに置き換えます）。

12）制御プロセスおよびオートメーション

12.1デザイナーのため

レイアウトのコントラストを確認します（テーマとキーの背景の両方で）。
コンポーネント（タイトル/プライマリ/セカンダリ/ヒント）に「コントラストスロット」を入力します。
各コンポーネントの有効な背景コンテキストを文書化します。

12.2開発者の方へ

ユニットヘルパー：トークンペアのテストでコントラストとアサートを計算する関数。
コントラストメトリクスをチェックするビジュアルスナップショット（スクリーンレンダリング+サンプルL1/L2計算）。
スタイルリンタ：トークンを通してのみ「生」の色を禁止します。

12.3 V CI/CD

テーマと状態のすべての'fg/bg'ペアをチェックします。

コンポーネント、バリアント、テーマ、実際の値を含む違反レポート（例： 3.9：1必要な4。5:1).

13） iGamingの指定（任意）

明るいプロモーションバナーやトーナメントカードはしばしばテキストを食べます。プレート/オーバーレイと背景の飽和制限が必要です。
重要な通知のシステム要素（18+、制限、リスク）-対照的にAAA。
リーダーボード/係数：数字と記号「+/-」≥ 4。5：1、勝利を強調表示-色だけでなく（アイコン/タグ）。

14） Antipatterns

条件を区別するために色だけに頼って下さい。
コントラストを計算することなく、色の背景に薄い灰色のフォント。
Darkモードでは「Dark on Dark」、プロモーションエリアでは「bright on bright on bright」。
詳細と背景のテキスト/ダイのないノイズ。

15）レビューチェックリスト

［基本テキスト］

[] ≥ 4.5：1（正常な）、≥ 3：1（大きい/脂肪質）。

リンク/ボタン

• ボタンテキスト≥ 4。5：1を埋める。
• 識別可能な3：1 ≥状態または明示的な指標。

アイコン/ボーダー

• 背景に3：1を≥します。

ダーク/ライトテーマ

• 同じコントラスト目標が達成されます。

メディアの背景

• オーバーレイ/プレート、係数が維持されます。

可用性について

• カラー以外に写真以外の特徴があります。

オートメーション

• トークンとコンポーネントのCI/CDでのコントラストテスト。

16）トークン注入（表記例）

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

注：おおよその値；最終的なトピックは、特定のトピックのコントラストを計算することによって選択されます。

17）チームドキュメント

ガイドラインでは、コントラスト目標、真/偽のペアの例、主要コンポーネントの'fg × bg'行列、メディア背景のルール、およびハイコントラストモードを有効にする方法を指定します。
［例外と原因］ページを保持してください（たとえば、許可されている3。大きい表示ヘッダーの狭い場合の8：1）。

簡単な要約

コントラストは測定されたパラメータであり、tasteパラメータではありません。目標（AA/AAA）を設定し、トークン（できればOKLCH）を介してそれらを管理し、CIで自動的にチェックし、レイアウトで視覚的に暗い/明るいテーマと色覚障害のある人々を考慮に入れます。これは可読性を保証し、エラーを減らし、変換を増加させます。