目次
色のアクセシビリティチェッカー
下記のリンクからツールを使うことができます。
ツールの使い方
このツールは、Webサイトやアプリの文字色と背景色の組み合わせが、W3Cの定めるアクセシビリティ基準（WCAG）を満たしているかを簡単に確認するためのツールです。
基本的な使い方 – 2色のコントラスト比を調べる
最も基本的な使い方です。文字色と背景色を指定して、その組み合わせが見やすいかどうかを判定します。
- 左パネルの「カラー設定」に、調べたい文字色と背景色を入力します。
#FFFFFFのようなHEXコードを直接入力するか、右側の四角いエリアをクリックしてカラーピッカーから色を選択できます。
- 入力すると、結果が右パネルにリアルタイムで表示されます。
- 右パネルの見方は以下の通りです。
- プレビューエリア: 画面上部で、実際の色の見え方を確認できます。
- コントラスト比: 計算された数値と、その評価（
Excellent,Goodなど）が分かります。 - 判定グリッド: WCAGの基準（AA/AAA）と文字サイズ（通常/大）ごとに「合格 ✅」か「不合格 ❌」かが一目で分かります。
便利な機能:
アイコン をクリックすると、文字色とは背景色の2色を入れ替えることができます。
応用的な使い方
背景色に合う「黒」か「白」かを知りたい時
背景色は決まっているが、文字色を黒と白のどちらにすべきか迷った時に参照してください。
- 左パネルで背景色を入力するだけです。
- 右パネルの一番下に「背景色に対する推奨文字色」というセクションが自動で表示されます。
- 黒と白、それぞれの場合のコントラスト比を計算し、より比率が高く見やすい方を青い枠線でハイライトして「推奨」として示します。
様々な色覚特性での見え方を確認したい時の(CUDシミュレーション)
色の組み合わせが引き起こす意味の誤解がないか、異なる色覚を持つ人の視点を疑似体験して確認する機能です。
1. 強度を選ぶ
まず、シミュレーションの強度を選択します。
- 一般的: 色の感覚がズレている、より一般的な状態（異常3色覚）を再現します。大多数の当事者の見え方に近く、現実的なチェックに適しています。
- 強度: 特定の色の感覚が完全に欠けている、より稀な状態（2色覚）を再現します。デザインの弱点を厳しくチェックするのに有効です。
2. タイプを選ぶ 次に、確認したいタイプのボタンをクリックします。プレビューの見た目が変化するので、情報がきちんと区別できるかを目で見て確認してください。
| ボタン | 名称 | 主な特徴（シミュレーションで確認すること） |
| 1型 (P) | P型 (Protanopia) | 赤系の色が見分けにくくなります。赤が暗く、緑と混同して見えやすいため、赤と緑を使った区別ができていないかを確認します。 |
| 2型 (D) | D型 (Deuteranopia) | 緑系の色が見分けにくくなります。最も一般的なタイプです。こちらも赤と緑が非常に似た色に見えるため、その2色に頼った表現がないかを確認します。 |
| 3型 (T) | T型 (Tritanopia) | 青と黄色が見分けにくくなります。青が緑がかって見えたり、黄色とピンクの区別がつきにくくなります。比較的稀なタイプです。 |
| モノクロ | 1色覚 (Achromatopsia) | 全ての色が**グレースケール（白黒）**で見えます。色合いに頼ったデザインが通用しないため、明るさの差だけで情報が伝わるかの最終チェックになります。 |
ポイント: シミュレーション中も、コントラスト比などの数値は元の色のまま計算されています。これは、基準を満たした配色が、多様な色覚を持つ人にもきちんと情報を伝えられるかを確認するための仕様です。