アクセシブルなカラーパレット · WCAG 2.2・コントラスト・冗長な手掛かり
アクセシブルなカラーパレットの作り方
ブランドカラーを画面上の役割へ変換し、実際に接する前景色と背景色を測定します。フォーカスや状態を色だけに依存させず、シミュレーションを補助として使い、数値検証や利用者の評価の代わりにしない設計手順です。
アクセシブルなカラーパレット
カラーパレットがアクセシブルである条件は？
アクセシブルなカラーパレットとは、単に見栄えのよい色一覧ではなく、文字、背景、操作部品、フォーカス、グラフなどの実際の組み合わせを役割ごとに検証した色体系です。WCAG 2.2のレベルAAでは、通常の文字は原則4.5:1以上、大きな文字は3:1以上、操作可能なUIや意味のある図形を識別するために必要な視覚情報は隣接色に対して3:1以上が基準です。さらに、意味を色だけで伝えてはいけません。各トークンの用途、接する相手、状態、代替のラベルや形を記録し、端数を切り上げずに判定することで、アクセシブルなカラーパレットが実装可能な設計資産になります。
アクセシブルなカラーパレットの4つの原則
- アクセシブルなカラーパレット: キャンバス、面、主文字、補助文字、アクセント、境界線、フォーカス、成功、警告、エラーという意味上の役割を先に決めます
- アクセシブルなカラーパレット: 通常、ホバー、フォーカス、選択、オーバーレイ、ダークテーマを含め、実際に接する前景色と背景色の組を測ります
- アクセシブルなカラーパレット: 4.5:1と3:1は丸めて到達させる目標ではなく最低値として扱い、細い書体や実機表示に備えて余裕を残します
- アクセシブルなカラーパレット: 状態や系列の意味には文字、アイコン、下線、形、模様、位置を併用し、色相差を唯一の説明にしません
アクセシブルなカラーパレット: 画面上の役割別WCAG 2.2配色チェック
| 用途 | 測定する組 | レベルAAの基準 | 実務上の注意 |
|---|---|---|---|
| 通常の文字 · アクセシブルなカラーパレット | 文字色と実際に描画される背景色 | 4.5:1以上 | 4.499:1を丸めても合格にはなりません |
| 大きな文字 · アクセシブルなカラーパレット | 大きな文字と実際の背景 | 3:1以上 | ローマン文字は18pt以上、または14pt以上の太字が目安で、CJKは同等の大きさを判断します |
| 操作部品と意味のある図形 · アクセシブルなカラーパレット | 識別に必要な視覚情報と隣接色 | 3:1以上 | 境界、アイコン、フォーカス、選択状態、意味を持つデータ要素を確認します |
| 色分けされた情報 · アクセシブルなカラーパレット | 色相差とは別に残る意味 | 色以外の見える手掛かり | 文字、形、模様、下線、アイコン、位置を加えます |
アクセシブルなカラーパレット: 好みの色見本ではなく役割から始める
ブランドパレットは個性を表しますが、アクセシブルなカラーパレットは意思決定を表します。ページのキャンバス、カード面、主文字と補助文字、リンク、アクセント、境界線、フォーカスリング、無効状態、成功、警告、エラーを最初に棚卸しします。各役割へ安定したトークン名を与え、コンポーネント内へHEX値を散在させないようにします。次に、どの役割同士が実際に接するかを表にします。主文字はページとカードの両方に載り、エラー境界は入力欄の面とページ背景の両方に接するかもしれません。この隣接関係が分かれば、すべてを白だけに対して測り、実装では半透明、色付きパネル、画像、グラデーション、ダークテーマを使う失敗を防げます。ブランド色を捨てる必要はなく、文字や操作には不向きな色を装飾専用として制限すればよいのです。
アクセシブルなカラーパレット: 文字、操作部品、状態の組み合わせ表を作る
単独の色ではなく組み合わせを検証します。文字では前景、描画後の背景、文字サイズ、太さ、状態を記録します。操作部品では、その存在とフォーカス、チェック、選択、展開、エラー、ホバーを理解するために必要な視覚情報を含めます。WCAGの非テキストコントラストは操作不能な部品を対象外としますが、製品として無効状態を読めて見つけやすく保つことはできます。アルファを含む色は背景と合成した結果を測り、画像やグラデーション上の文字は現実に起こる最も不利な位置を調べます。結果をトークンと同じ場所へ保存すれば、テーマ変更でアクセシブルなカラーパレットが静かに壊れるのを検知できます。また、似た灰色が複数あるのに一方しか全背景で合格しない場合、役割を統合して小さな体系にする判断もしやすくなります。
アクセシブルなカラーパレット: 明度コントラストと色分けの意味を分ける
コントラストと色の使用は別の問いです。緑の成功ラベルが十分な文字コントラストを持っていても、赤いエラーとの違いを色だけで伝えるなら不十分です。色は残しつつ、語句、アイコン、模様、構造の違いを加え、グレースケールや異なる色覚でも意味が残るようにします。文章中のリンクには下線が有効です。グラフの系列には直接ラベル、異なる点の形、線種、模様を使えます。フォーカスは色名を判別しなくても見える必要があります。補色や色相環で離れた色も自動的にアクセシブルではありません。色相の距離は相対輝度の差を保証せず、二つ目の手掛かりも作らないからです。アクセシブルなカラーパレットは土台であり、コンテンツとコンポーネントの設計が伝達を完成させます。
アクセシブルなカラーパレット公開前チェック
- アクセシブルなカラーパレット: 各色を意味上の役割で命名し、使用できる面と状態を文書化します
- アクセシブルなカラーパレット: 通常の文字は4.5:1以上、大きな文字は3:1以上を描画後の背景に対して測ります
- アクセシブルなカラーパレット: 操作部品の境界、フォーカス、状態、意味のある図形は隣接色に対して3:1以上を確認します
- アクセシブルなカラーパレット: 通常、ホバー、フォーカス、押下、選択、エラー、無効、重なり、ダークテーマ、高倍率を確認します
- アクセシブルなカラーパレット: 色が状態や系列を伝える場合は文字、形、アイコン、模様、下線、位置の手掛かりを加えます
- アクセシブルなカラーパレット: 組み合わせ表、ツール結果、コンポーネント版、確認日を保存し、変更後に再検証できるようにします
アクセシブルなカラーパレット: 4段階で配色を作成して検証する
アクセシブルなカラーパレット: 1. 役割を棚卸し
アクセシブルなカラーパレット: 文字、面、境界、操作、フォーカス、データ、フィードバックを列挙し、各テーマと状態で接する組を記録します。
アクセシブルなカラーパレット: 2. 候補を生成
アクセシブルなカラーパレット: ハーモニーツールでまとまりのある候補を探し、ブランド上の好みとコントラスト・意味の合格条件を分けます。
アクセシブルなカラーパレット: 3. 組み合わせを測定
アクセシブルなカラーパレット: 実際の前景と隣接背景を丸めずに測り、担当する基準を満たさないトークンは交換または用途制限します。
アクセシブルなカラーパレット: 4. 状態全体を確認
アクセシブルなカラーパレット: 代表的な色覚差、グレースケール、キーボードフォーカスを確認し、実コンポーネントをPCとモバイルで試します。
アクセシブルなカラーパレット: WCAG 2.2が実際に定める内容
- アクセシブルなカラーパレット: 達成基準1.4.3はレベルAAで通常文字4.5:1、大きな文字3:1を求め、大きな文字を18pt以上または14pt以上の太字を目安に定義し、境界値を丸めないよう説明しています。 W3C達成基準1.4.3の解説を読む
- アクセシブルなカラーパレット: 達成基準1.4.11は、操作可能なUI、状態、意味のある図形を識別するために必要な視覚情報へ、隣接色に対して3:1以上を求めます。 W3C達成基準1.4.11の解説を読む
- アクセシブルなカラーパレット: 達成基準1.4.1は情報、動作、応答、区別を色だけで伝えないことを求めます。色の正確な識別が意味を持つなら、3:1の色差があっても別の表示が必要です。 W3C達成基準1.4.1の解説を読む
“Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
アクセシブルなカラーパレットの質問
パレット内の全色が互いにコントラストを持つ必要がありますか？
アクセシブルなカラーパレット: いいえ。実際に接する予定の組と、その役割を試します。主文字は複数の面で合格する必要があり、装飾アクセントは文字や操作の識別に使わない場合があります。制限を記録して未検証の関係へ再利用されないようにします。単色へ適合・不適合と付けるより、組み合わせ表が正確です。
補色なら自動的にアクセシブルですか？
アクセシブルなカラーパレット: いいえ。色相環で反対という関係はWCAGコントラスト値ではありません。鮮やかな補色でも相対輝度が近く、文字が読みにくい場合や色覚差で区別しにくい場合があります。ハーモニーで候補を作った後、輝度コントラストを測り、意味には色以外の手掛かりを加えます。
色覚シミュレーターでWCAG適合を証明できますか？
アクセシブルなカラーパレット: できません。シミュレーションは観察の補助であり、診断、適合計算、障害のある利用者の代替ではありません。必要な組は決定的なコントラスト計算で測り、冗長な手掛かりと全状態を確認し、リスクに応じて専門家や利用者の評価を加えます。