「ボタンの色、何色にしますか？」と聞かれて手が止まる。エンジニアが画面を作るとき、配色は最も判断に困るポイントのひとつです。しかし配色も、感覚ではなく手順とルールで決められます。しかも配色にはアクセシビリティという明確な合格基準（WCAG）があるため、むしろエンジニア向きの領域です。
この記事では、破綻しないカラーパレットの作り方と、コントラスト比のチェック、色覚多様性への配慮という3点を実務目線で整理します。
パレットは「ベース＋アクセント」の2系統で組む
色数が多いほど破綻しやすくなります。実務では次の構成で十分です。
- ベースカラー: グレー系の階調（背景・罫線・テキスト）。画面の9割はこれ
- アクセントカラー: ブランドカラー1色。主要ボタンやリンクなど「押してほしい場所」だけに使う
- セマンティックカラー: 成功（緑）・警告（黄）・エラー（赤）の3色。状態表示専用
ポイントは、各色を単色ではなく明度の階調（50〜900など）で持つことです。CSSカスタムプロパティで定義し、コンポーネントからは役割名で参照します。
:root {
--gray-100: #f3f4f6;
--gray-500: #6b7280;
--gray-900: #111827;
--primary-600: #2563eb;
/* 役割ベースの参照名を挟む */
--color-text: var(--gray-900);
--color-text-muted: var(--gray-500);
--color-action: var(--primary-600);
}色コードを直接書かず役割名を経由させておくと、後述のダークモード対応やリブランディング時の変更コストが激減します。
コントラスト比はWCAGの数値で機械的に判定する
「薄いグレーの文字がおしゃれ」という感覚で作られた画面は、明るい屋外や安価なモニタでは読めません。WCAG 2.x の達成基準では、コントラスト比の最低ラインが数値で決まっています。
- 通常テキスト: 4.5:1以上（AA基準）
- 大きなテキスト（約24px以上、または太字19px以上）: 3:1以上
- UIコンポーネントの境界（ボタンの枠、フォーム部品など）: 3:1以上
チェックはツールに任せます。Chrome DevToolsのカラーピッカーはコントラスト比を表示してくれますし、WebAIMのContrast Checkerなどのオンラインツールでも確認できます。実務では「白背景に#767676より薄いグレーは通らない」あたりを目安として覚えておくと、レビュー時に当たりを付けやすくなります。
特に見落としがちなのが、アクセントカラー上の白文字です。明るいブランドカラー（水色やオレンジなど）に白文字を載せると4.5:1を割ることが多く、ボタンの文字が読みにくくなります。この場合は色を一段暗くした階調（600〜700）をボタン用に使うのが定石です。
色だけに頼らない情報伝達
「エラーは赤、成功は緑」だけで状態を表すと、色覚特性によっては区別できないユーザーが一定数存在します。WCAGでも「色を情報伝達の唯一の手段にしない」ことが求められています。対処はシンプルで、色に別のチャンネルを併用することです。
- ステータスバッジには色＋テキスト（「成功」「失敗」）またはアイコンを添える
- フォームエラーは赤枠だけでなく、エラーメッセージを必ず表示する
- グラフの系列は色だけでなく、線種やマーカー形状でも区別する
- リンクは色だけでなく下線でも示す（本文中のリンクは特に）
確認方法として、画面をグレースケール表示にしてみるテストが手軽です。CSSで filter: grayscale(1) をbodyに一時適用し、それでも状態が区別できれば合格です。
まとめ
配色設計は「グレー階調＋アクセント1色＋セマンティック3色」で組み、色は役割名のカスタムプロパティ経由で参照する。コントラスト比は4.5:1（AA）をツールで機械的に検証し、状態表示は色以外のチャンネルを必ず併用する。この3点を守るだけで、見た目の破綻とアクセシビリティ上の指摘の大半は防げます。配色はセンスの領域に見えて、実際には基準と手順の領域です。
