Web配色は「美しさ」ではなく「事故を減らす設計」

:::note ※配色を決める前に読む「思想」記事です。各論は子記事へ。 :::

このツールを作った理由

配色で最もよくある失敗は「美しさ」から入ること。

補色、類似色、トライアド。色彩理論を学んでも、実際のサイトで「なんか違う」となる。

色で起きる事故は「美しさ」の問題ではない。「読めない」「見えない」「区別できない」の問題。

私が配色で一番恐れているのは、ユーザーがエラーメッセージに気づかないこと。赤と緑で「成功/失敗」を表現したら、色覚特性のあるユーザーには見えない。

🚀 今すぐ試す → Color Palette Generator を開く

薄いグレーのテキスト。デザインとしては「洗練されている」。でもコントラスト比 2.5:1 では、目が疲れている人には読めない。

**「読みにくい」と言われたら終わり。**色を変えるしかない。

赤と緑でエラー/成功を表現した。日本人男性の5%は赤緑の区別が難しい。20人に1人が見えない。

色だけで情報を伝えると、必ず誰かが困る。

正直に言う。私が一番恐れているのは、クレームと改修コスト。

「読めない」はクレームになる。「区別できない」は事故になる。「ダサい」は言われるだけで終わる。

だから私は、美しさより読めることを優先する。

**調和は4番目。**最初に考えるのはコントラスト。

「アクセシビリティのために」というのは建前。

私がWCAGを守る本当の理由は、クレームと改修コストを減らしたいから。

守るのが正しいからではない。守った方が楽だから。

補色、類似色、トライアド。色彩理論は正しい。でも、私はそのまま使ったことがほとんどない。

補色を180°反対から取ると、明度が近くなることが多い。明度が近いとコントラストが取れない。結局、明度を手動で調整する。

補色やトライアドは「バランスの良い配色」を作る理論。でもUIは、ベース・テキスト・アクセントの3色で十分。

理論に従って5色作っても、使う場所がない。

グレー系のベースに、青のアクセント。これで失敗することはほぼない。理論を知らなくても、事故らない配色は作れる。

目的別に選んでください。

状況	読むべき記事
色の基本を知りたい	Webデザインの配色、最低限これだけ
HEX/RGB/HSLの違いを知りたい	HEX・RGB・HSLの使い分け
配色ルールを知りたい	補色・類似色・トライアドの選び方
コントラスト比を確認したい	コントラスト比とWCAG基準
色覚多様性に配慮したい	色覚多様性に配慮した配色
CSS変数で管理したい	CSS変数でカラーパレットを管理
ツールの使い方を知りたい	Color Palette Generatorの使い方

美しい配色を作ろうとするな。事故らない配色を作れ。

コントラスト比を確認しろ。色だけで情報を伝えるな。実機で見ろ。

それができてから、初めて「調和」を考える。