エラーメッセージの色:#FF0000がダメな理由と、代わりに使う8つの赤
純粋な赤は誰もが最初に選ぶエラー色であり、テキストには不向きな色です。4つの修正、ライト/ダーク用の8つのエラー色、開発者に渡すコードをまとめました。
エラーテキストに正しい色は、#FF0000ではなく、もっと暗い赤です。純粋な赤は目立つのに、エラーメッセージで使う小さなサイズでは読みづらく、ダーク画面ではチラつきます。ここでは4つの修正、ライトモードとダークモードで使う8色、そして開発者に渡すコードを紹介します。
純粋な赤がダメな理由
エラーテキストに #FF0000 を選ぶ人はいません。勝手にやって来るのです。どのカラーピッカーでも最上段にある赤、CSSの red キーワード、新しいデザインファイルの最初のスウォッチ。そうして、最初の一回で正しく読まれなければならない画面の一行に居座ります。
純粋な赤は明るく彩度も高いので強そうに見えますが、暗くはありません。明度は中間グレーに近いのです。白地に小さく置くと、文字の輪郭が失われます。
解決策は別の色相ではありません。同じ赤を、テキストに重みが出るまで暗くすることです。
修正1:テキスト用に赤を暗くする
メールアドレス
有効なメールアドレスを入力してください。
✕ 白地に#FF0000:読みにくい
メールアドレス
有効なメールアドレスを入力してください。
✓ 白地に#B3261E:読みやすい
同じフィールド、同じメッセージ、赤だけが二つ。右はMaterial 3のライトテーマのエラー色で、左のほうが「より赤い」赤なのに、目が向かうのは右です。
エラーテキストにはすべて暗い赤を使います。フィールド下のメッセージ、赤く変わるラベル、インラインの「必須」タグなどです。#FF0000 はテキストから完全に外しましょう。ブランドの赤が純粋な赤に近いなら、イラストや大きな見出し文字に取っておいてください。そこでは、小さなテキストで暗さが担う役割を、サイズが果たしてくれます。
修正2:バナーは塗りつぶさず、淡く色づける
✕ #FF0000に白:叫ぶのに、まだ読みにくい
✓ #F6CBC8に#410E0B:読みやすい
白文字の真っ赤なバーはページで一番うるさい存在なのに、それでも読みにくいままです。#FF0000 の上の白は、白の上の #FF0000 と同じ弱いコントラストだからです。色の位置が入れ替わっただけで、問題は消えていません。
淡い赤のコンテナに濃い赤のテキストなら、色で「エラー」と伝えつつ、言葉をきちんと読ませられます。緊急性はアイコンとメッセージが運びます。Material公式のコンテナはより淡い #F9DEDC ですが、私たちは一段濃い #F6CBC8 を使います。淡すぎるピンクは、暗いインターフェースの枠の隣では色が抜けてしまうからです。
修正3:ダーク画面では和らげる
メールアドレス
有効なメールアドレスを入力してください。
✕ ダーク上の#FF0000:チラつく
メールアドレス
有効なメールアドレスを入力してください。
✓ ダーク上の#F2B8B5:落ち着いて明瞭
ダークモードでは助言が逆になります。ほぼ黒の背景に純粋な赤はコントラストの最低基準を満たすので、チェッカーは警告しませんが、ダークグレーの上の彩度の高い赤は輪郭が震えて見えます。Materialのダークテーマは明るく柔らかいエラー色 #F2B8B5 を使い、#B3261E が白に対して持つのと同じ関係をダーク背景と保ちます。
これはダークテーマ全般のルールです。白の上で機能する高彩度の色は、ダークでは明るく柔らかくなります。パレットの残りについては、ダークモードデザインの記事で扱っています。
修正4:グレースケールで確認する
メールアドレス
✕ 枠線だけ:どのフィールドが間違い?
メールアドレス
有効なメールアドレスを入力してください。
✓ アイコンと言葉:一目瞭然
純粋な赤と中間グレーはほぼ同じ明度なので、エラーの合図が赤い枠線だけのフィールドは、グレースケールでは他のフィールドと見分けがつきません。フォームを公開する前に、一度画面をグレースケールにしてみてください(Macならシステム設定、アクセシビリティ、ディスプレイ、カラーフィルタ。iOSとAndroidでも同じフィルタがアクセシビリティの表示設定にあります)。
すべてのエラー状態には3つが必要です。
- 色:ライトでは暗い赤、ダークでは柔らかい赤。
- 形:メッセージの前に置くアイコン。色がなくても見えます。
- 言葉:何が起きたか、どうすればいいか。「無効な入力」より「有効なメールアドレスを入力してください」のほうが親切です。
これはWCAG 1.4.1「色の使用」にあたります。色はメッセージを補助できても、伝える唯一の手段であってはなりません。
ライトとダークの8つのエラー色
チップをタップすると、コードをコピーできます。
| ロール | ライト | ダーク | 使いどころ |
|---|---|---|---|
| Error | #B3261E | #F2B8B5 | エラーテキスト、エラーの枠線、エラーアイコン |
| On error | #FFFFFF | #601410 | 削除ボタンのようなエラー色ベタ塗り上のテキスト |
| Error container | #F6CBC8 | #8C1D18 | バナー、トースト、インラインのアラートボックス |
| On error container | #410E0B | #F9DEDC | それらのコンテナ内のテキストとアイコン |
これを開発者に渡そう
同じ8色をCSSカスタムプロパティにしたものです。ダークの値はシステムテーマに応じて切り替わります。
:root {
--color-error: #B3261E;
--color-on-error: #FFFFFF;
--color-error-container: #F6CBC8;
--color-on-error-container: #410E0B;
}
@media (prefers-color-scheme: dark) {
:root {
--color-error: #F2B8B5;
--color-on-error: #601410;
--color-error-container: #8C1D18;
--color-on-error-container: #F9DEDC;
}
}
.field--invalid { border-color: var(--color-error); }
.field__error { color: var(--color-error); }
.alert--error {
background: var(--color-error-container);
color: var(--color-on-error-container);
}
Materialでは、これらのロールは colorScheme.error、onError、errorContainer、onErrorContainer としてすでに存在します。デフォルトからの変更は、ライトのコンテナを濃くした点だけです。それ以外の環境でも、この4つの名前は盗む価値があります。次の誰かが #FF0000 に手を伸ばすのを防いでくれるからです。
コントラストの数値
WCAG 2では、本文テキストに少なくとも4.5対1を求めています。
| 組み合わせ | コントラスト |
|---|---|
| 白地に#FF0000のテキスト | 4.0対1、最低基準未満 |
| 白地に#B3261Eのテキスト | 6.5対1 |
| #FF0000地に白のテキスト | 4.0対1、最低基準未満 |
| #F6CBC8地に#410E0Bのテキスト | 11.1対1 |
| ダーク#141218地に#F2B8B5のテキスト | 10.9対1 |
| ダーク#141218地に#FF0000のテキスト | 4.7対1、合格だがチラつく |
最後の行が、チェッカーだけでは足りない理由です。ダーク上の純粋な赤は数値上は合格でも、やはり間違った選択です。
FAQ
エラーメッセージは何色にすべき?
小さなサイズでも読みやすい暗い赤です。たとえば白背景なら #B3261E。アイコンと、問題の直し方を伝えるメッセージを組み合わせてください。
#FF0000はエラーテキストとしてアクセシブル?
いいえ。白地の純粋な赤のコントラストは約4.0対1で、WCAGが本文テキストに求める4.5対1を下回ります。しかもエラーメッセージは通常小さな文字です。
Material Design 3のエラー色は?
ライトテーマのエラーロールは #B3261E で、その上に #FFFFFF を載せます。エラーコンテナは #F9DEDC、テキストは #410E0B です。ダークテーマではエラーロールが #F2B8B5、コンテナが #8C1D18 です。
ダークモードのエラーは何色にすべき?
#F2B8B5 のような、明るく柔らかい赤です。純粋な赤はダーク背景でコントラストチェックには通りますが、チラついて読むのがつらくなります。
エラーを色だけで示してもいい?
いいえ。男性の約12人に1人が何らかの色覚特性を持ち、WCAG 1.4.1は色を唯一の合図にしてはならないと定めています。アイコンと言葉を添えましょう。
出典
- ライトとダークのMaterial Design 3ベースラインのエラーロールは、Material color rolesとandroidx Composeのカラートークンによる。
- WCAG 2.2, 1.4.3 Contrast (Minimum)と1.4.1 Use of Color。
- コントラスト比はWCAGの相対輝度の式で計算。純粋な赤と#808080グレーの相対輝度は0.213と0.216。
- 色覚特性の有病率はNational Eye Instituteによる。
- 初出はUX Brainyのカルーセル投稿。
Want error states, forms and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
