配色は見た目の印象だけでなく「読めるかどうか」を左右します。コントラストが低いと文字が読みにくく、色だけで情報を区別していると色覚特性のある人には伝わりません。この記事では、ベースカラーから配色を作り、コントラスト比と色覚特性を確認し、実装で使えるトークンとして出力するまでの、アクセシブルな配色の決め方を順番に紹介します。
1. ベースカラーから配色（パレット）を作る
まずはベースとなる1色から配色全体を組み立てます。カラーパレットジェネレーターにベースカラーを入れると、補色・類似色・トライアドなど複数のカラーハーモニーを自動生成してくれます。感覚で色を並べるより、調和のとれた配色の候補を素早く得られます。ここで主要色（プライマリ・アクセント・背景・文字）のあたりを付けます。
この手順で使うツール
Color Palette Generator
ベースカラーから5種のカラーハーモニーを即生成
2. 文字と背景のコントラスト比を確認する
配色候補が決まったら、文字色と背景色の組み合わせがちゃんと読めるかをコントラスト比で確認します。WCAG 2.1 では通常サイズの本文で 4.5:1 以上、大きな文字で 3:1 以上が推奨されています。コントラストチェッカーに2色を入れると比率と AA / AAA の判定が出るので、基準を満たさない組み合わせは明度を調整します。特にアクセントカラーの上に白文字を乗せるUIはコントラストが不足しがちなので要注意です。
この手順で使うツール
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点は、見た目が良くても見落とされがちなポイントです。最初にこの手順を通しておけば、後からアクセシビリティ対応で配色をやり直す手間を減らせます。