配色は見た目の印象だけでなく「読めるかどうか」を左右します。コントラストが低いと文字が読みにくく、色だけで情報を区別していると色覚特性のある人には伝わりません。この記事では、ベースカラーから配色を作り、コントラスト比と色覚特性を確認し、実装で使えるトークンとして出力するまでの、アクセシブルな配色の決め方を順番に紹介します。
1. ベースカラーから配色（パレット）を作る
まずはベースとなる1色から配色全体を組み立てます。カラーパレットジェネレーターにベースカラーを入れると、補色・類似色・トライアドなど複数のカラーハーモニーを自動生成してくれます。感覚で色を並べるより、調和のとれた配色の候補を素早く得られます。ここで主要色（プライマリ・アクセント・背景・文字）のあたりを付けます。
この手順で使うツール
Color Palette Generator
ベースカラーから5種のカラーハーモニーを即生成
2. 文字と背景のコントラスト比を確認する
配色候補が決まったら、文字色と背景色の組み合わせがちゃんと読めるかをコントラスト比で確認します。WCAG（2.1 と現行の 2.2 で同じ基準）のAAでは、通常の文字で 4.5:1 以上、大きな文字（24px以上、または太字で約18.66px以上）で 3:1 以上が求められます。見落とされやすいのが文字以外の要素で、ボタンの輪郭、入力欄の枠、アイコン、グラフの線なども、隣り合う色と 3:1 以上の差が必要です。Color Contrast Checker に2色を入れると比率とそれぞれの基準の判定が出るので、満たさない組み合わせは明度を調整します。判定は四捨五入せずに行うので、たとえば白地に #777777 は 4.48 で通常の文字の基準に届かず、#767676 なら 4.54 で通ります。特にアクセントカラーの上に白文字を乗せるUIは不足しがちで、白文字に #3b82f6 の青は 3.68、緑の #22c55e は 2.28 しかありません。同じ系統で一段濃い #2563eb にすると 5.17 まで上がります。
この手順で使うツール
Color Contrast Checker
WCAG 2.1 準拠のコントラスト比をリアルタイムチェック
3. 色覚特性でも区別できるか確認する
コントラストを満たしても、「赤と緑で状態を区別する」ような配色は色覚特性のある人には見分けにくいことがあります。色覚シミュレーターで配色を各タイプ（P型・D型など）で確認し、色だけに依存していないかをチェックします。区別がつきにくい場合は、色に加えてアイコン・ラベル・パターンなど色以外の手がかりを添えると、誰にとっても分かりやすくなります。
この手順で使うツール
Color Blindness Simulator
HEXカラーを5種の色覚特性でシミュレーション・WCAG判定
4. 決めた配色をトークンとして出力する
最終的な配色が固まったら、実装で使い回せる形に落とし込みます。カラートークンジェネレーターにパレットを入れると、CSS変数・Tailwind・Sass・Style Dictionary などの形式で一括出力できます。色をトークンとして一元管理しておくと、後からブランドカラーを変えるときも1箇所の修正で済み、デザインと実装の間で色がズレるのを防げます。
この手順で使うツール
Color Token Generator
カラーパレットを CSS変数 / Tailwind / Sass / Style Dictionary で一括出力
まとめ
アクセシブルな配色は「作る → コントラストを測る → 色覚で確認する → トークン化する」の流れで、感覚だけに頼らず根拠を持って決められます。特にコントラスト比と色覚特性の2点は、見た目が良くても見落とされがちなポイントです。最初にこの手順を通しておけば、後からアクセシビリティ対応で配色をやり直す手間を減らせます。