アクセシブルな配色の選び方

色の選択は美的な決定のように見えて、法的な決定として作用します。米国の被告に対する Web アクセシビリティ訴訟は 2021 年以降毎年およそ 4,000 件に達し、不十分な色のコントラストは WCAG に基づく訴訟で最も引用される 3 つの問題の 1 つです(欠落した alt テキストと未ラベルのフォームフィールドと並んで)。良い知らせは、コントラストはその 3 つの中で最も簡単に修正できるということです。コントラスト比は数値、WCAG の閾値は数値であり、一方を他方に対して数秒で計算できます。悪い知らせは、「アクセシブル」が見出しの比率を超えるということです。色覚異常、フォーカスインジケータ、ダークモード、トークン化はすべて重要であり、すべてのテキストスタイルで 4.5:1 を獲得するパレットでも、実際のユーザーには失敗する可能性があります。

デジタル色彩アクセシビリティの短い歴史

書かれた標準としての色のコントラストは、1997 年の W3C Web Accessibility Initiative の最初の作業に遡ります。元の Web Content Accessibility Guidelines 1.0(1999 年 5 月)は、ハードな数値なしに定性的な言葉で十分なコントラストを推奨しました。WCAG 2.0(2008 年 12 月)は、現在お馴染みの相対輝度の公式とレベル AA での 4.5:1 比率を導入しました。これは老眼鏡をかけた高齢者が画面で快適に読めるものについての Lighthouse International の研究から導き出されたものです。

法的重みは後で来ました。U.S. Rehabilitation Act の Section 508 は 2018 年に WCAG 2.0 を参照しました。Americans with Disabilities Act は、2019 年 1 月 15 日の Robles v. Domino's 第 9 巡回区控訴裁判決(最高裁は 2019 年 10 月に上告審理を拒否)以降、米国の裁判所によって Title III の下でデジタルアクセシビリティをカバーすると解釈されています。European Accessibility Act は 2025 年 6 月 28 日に発効し、公的部門と多くの民間企業の消費者向けデジタルサービスに WCAG 2.1 AA を要求しています。実務的には、4.5:1 通常テキスト + 3:1 大きいテキスト + 3:1 UI コンポーネントが、今日構築されている公共ウェブサイトの事実上の下限です。

科学は進化を続けています。WCAG 2.1(2018 年)は 3:1 の非テキストコントラストルールを追加しました。Andrew Somers が WCAG 3 のために開発した APCA アルゴリズムは、輝度知覚をより正確にモデル化し、非常に暗い組み合わせと非常に明るい組み合わせで異なる数値を与えます。2026 年現在は Editor's Draft でありまだ標準ではないため、ほとんどの規制は依然として WCAG 2.x を引用しています。Bjorn Ottosson の OKLAB と OKLCH(2020 年)は、HSL や RGB で作業するよりもアクセシブルな色のスケールを生成するのがはるかに容易になる、知覚的に均一な色空間をデザイナーに提供しました。

「アクセシブルな色」が本当に意味すること

1 つの比率だけでなく、4 つのことが重要です:

1. 前景と背景のコントラスト。 見出しの数値。本文には 4.5:1、大きいテキストには 3:1、UI コントロールとフォーカスインジケータには隣接色に対して 3:1 が必要です。任意のコントラストチェッカーで WCAG 2 公式を使って比率を計算します。
2. 色覚異常。 男性のおよそ 8%、女性の 0.5% は、デザインが想定するよりも少ない色しか見えません。3 つの主要なタイプは、第 1 色覚異常と第 2 色覚異常(赤緑、最も一般的)、および第 3 色覚異常(青黄)です。緑色の成功ラベルに対する赤色のエラーラベルは、第 1 色覚異常の閲覧者には見えない場合があります。
3. 色は決して唯一のシグナルではありません。 WCAG 1.4.1 は意味を伝えるために色だけに頼ることを禁じています。赤い「エラー」のボーダーにはアイコンまたはラベルも必要です。緑の「成功」トーストにはチェックマークが必要です。
4. フォーカスインジケータ。 キーボードユーザーはフォーカスがどこにあるか見える必要があります。WCAG 2.4.7 ルールは目に見えるフォーカスインジケータを要求し、2.4.11 更新(WCAG 2.2)はそれが少なくとも 2 CSS ピクセル厚で隣接色に対して 3:1 のコントラストであることを要求します。

比率を正しく取得しても他の 3 つを無視するパレットは、依然として実際のユーザーに失敗します。

アクセシブルな色を選ぶ方法、段階別

1. 生の色ではなくセマンティックトークンから始める。 text-primary、text-secondary、surface-default、surface-elevated、border-default、accent-primary、accent-danger などを定義します。各トークンを特定の色にマッピングし、デザインシステム全体でそれらのトークンに意味を運ばせます。
2. 明度スケールを選ぶ。 OKLCH の明度値を使用して、各ステップが次のステップから一定の知覚的差を持つ 5~9 段階のスケール(50、100、200、...、900)を構築します。数値は OKLCH では珍しく見えます(L = 0.97、0.93、0.88... 程度)が、知覚されるステップは均一になり、HSL では不可能です。
3. 各明度ステップで色相を選ぶ。 ブランドの色相を選び、次に類似のクロマを維持する補色またはアクセント色を選びます。OKLCH を使うことで、「100 彩度の青」と「100 彩度のオレンジ」が同じ明るさに見えます。
4. コントラスト比を計算する。 触れ合うすべてのトークンペアには正しい比率が必要です。本文のテキストをデフォルトのサーフェスに:4.5:1。デフォルトのサーフェスに無効なテキスト:読みやすくする必要があれば依然として 3:1。隣接サーフェスのフォーカスインジケータ:3:1。
5. 色覚異常シミュレータを実行する。 キーとなる画面を取り、第 1 色覚異常、第 2 色覚異常、第 3 色覚異常のシミュレータで再レンダリングします。色によって伝えられる情報が依然として区別可能であることを確認します。
6. 本物の支援技術でテストする。 Mac VoiceOver、NVDA、JAWS、TalkBack はすべて、色の手がかりに依存せずにナビゲートできるはずです。
7. 色が意味を運ぶあらゆる場所に非色のシグナルを追加する。 エラー/成功/警告のアイコン、本文中のリンクの下線、チャートシリーズのパターン。
8. トークンを文書化する。 Figma ライブラリ、Storybook ページ、または静的なデザインシステムサイト。監査人と新しいデザイナーは数秒で正しいトークンを選べるはずです。

コントラスト比リファレンス

無効化されたコントロールの免除は、法的な抜け道であり、ユーザビリティの祝福ではありません。誰も読めない無効化されたコントロールは技術的には WCAG を通過するかもしれませんが、依然としてユーザーを混乱させます。

色覚異常のタイプとチェック方法

常に第 1 色覚異常と第 2 色覚異常のシミュレータを少なくとも通してデザインを実行してください。色覚異常のユーザーの大部分を捕らえます。

一般的な落とし穴

• HSL または RGB で設計する。 HSL での同じ数値ステップは、知覚されるステップが不均等になります。淡い黄色での 10% の明るさのジャンプは、暗い青色での同じジャンプよりもはるかに大きく見えます。OKLCH がこれを解決します。
• 状態を伝えるために色だけに頼る。 エラーと成功のための赤と緑:ユーザーの 8% はそれらを区別できません。アイコンまたはラベルを追加してください。
• 純粋な白に純粋な黒。 #FFF 上の #000 は完璧な 21:1 の比率を獲得しますが、長時間の読書には目に厳しいです。本文には準黒(#1a1a1a)と準白(#f8f8f8)に落としてください。
• ブランド色の専制。 ブランドの赤を神聖視し、「それがブランドだから」というだけでブランドの白に 2.1:1 のコントラストで使用する。WCAG を満たすものへブランドパレットをリフレッシュしてください。
• 暗い背景で消えるフォーカスインジケータ。 暗い青のボタンに対する 2 ピクセルの青リングは見えない可能性があります。表示される可能性のあるすべてのサーフェスに対してフォーカスリングをテストしてください。
• コントラストが不足するプレースホルダーテキスト。 入力内の placeholder= テキストは、ブラウザによって ~40% の不透明度でレンダリングされます。白い入力では、これは簡単に 4.5:1 を下回ります。
• かすかすぎるフォームフィールドのアウトライン。 1.2:1 のコントラストの 1px のグレー・オン・ホワイトの境界線は、WCAG 1.4.11(非テキストコントラスト)を満たしません。3:1 またはより太く上げてください。
• 色だけが変わるホバー状態。 一部のポインター入力デバイス(Bluetooth スタイラス、アイトラッキング)はホバーを生成しません。ホバーのみの色変化はそれらには見えません。微妙な影や変換と組み合わせてください。
• 単純な反転によるダークモード。 明るいパレットを反転すると、彩度の高い暗い色が生成され、厳しく見えます。ダークモードパレットには、彩度の低いアクセントを持つ独自のデザインパスが必要です。
• 画像から自動生成されるテキスト。 ユーザーがアップロードした画像の上にレンダリングされるテキストは、コントラストを保証できません。半透明のバックドロップまたはテキストシャドウを追加して、ローカルコントラストを回復してください。

代替アルゴリズムと標準

今日の規制された作業については、WCAG 2.1 AA が下限です。APCA は WCAG 3 が成熟するにつれて追跡する価値があります。多くのデザインシステムチームは既に両方の数値を報告しています。

アクセシブルな色を選ぶためのツール

新しいプロジェクトでは、テスト済みのパレット(Radix Colors と Open Props は良いデフォルト)から始めて、ブランドトークンを選び、すべてのテキスト・オン・サーフェスのペアをコントラストチェッカーで確認してください。既存のプロジェクトでは、スタイルシートのすべてのテキスト/背景ペアの 1 回限りの監査を行い、失敗を修正し、Stark または axe ステップを CI に追加して、次の失敗が PR 時に捕らえられるようにしてください。

プライバシーとツール

カラーコントラストチェッカー、アクセシブルパレットジェネレータ、色覚異常シミュレータはすべて、完全にあなたのブラウザ内で動作します。選択または貼り付けた色はあなたのデバイス上の JavaScript によって処理され、結果はページにレンダリングされ、サーバーには何も送信されません。テレメトリーなし、入力に関する分析なし、第三者スクリプトなし。まだ公開されていないブランドカラー、内部製品パレット、または禁輸下のデザインについては、そのローカルのみのフローが、見知らぬ人のデザインツールに未公開のブランド資産を信頼することと、しないことの違いです。ページが読み込まれるとツールはオフラインで動作可能で、ネットワークを切断してコントラストペアを再チェックすることで確認できます。