成功メッセージの色:#00FF00がダメな理由と、代わりに使う8つの緑
純粋な緑は誰もが最初に選ぶ成功色であり、テキストには不向きな色です。4つの修正、IBM Carbonのライトとダークの成功色8色、そして開発者に渡すコードを紹介します。
テキスト用の正しい成功色は、#00FF00ではなく、もっと暗い緑です。純粋な緑は新鮮に見えますが、白背景では読みにくく、ダーク画面ではギラつきます。ここでは4つの修正、ライトモードとダークモードで使う8つの成功色、そして開発者に渡すコードを紹介します。
純粋な緑がダメな理由
成功テキストに #00FF00 を選ぶ人はいません。勝手にやって来るのです。どのカラーピッカーでも最上段にある緑で、昔のCSSの lime で、新規デザインファイルで最初に目に入る緑だからです。そして気づけば、支払いが通ったことを伝える一行に居座っています。
純粋な緑は明るく彩度が高いので、「進め」に見えます。でも問題はその明るさです。画面が出せる色の中でもかなり明るい部類で、明るいページに明るい文字を置いても、目が掴まる手がかりがありません。#00FF00 の上の白文字も、白の上の #00FF00 文字も、小さな文字に求められるWCAGの最低基準を大きく下回ります。
解決策は別の色相ではありません。同じ緑を、文字に重みが出るまで暗くし、いちばん目立つ面には使わないことです。
以下の緑はIBM Carbonデザインシステムのものです。Carbonは緑のランプ全体を公開し、用途ごとに特定のステップを使っています。
修正1:テキスト用に緑を暗くする
新しいパスワード
✓ パスワードは強力です。
✕ 白地に #00FF00:読みにくい
新しいパスワード
✓ パスワードは強力です。
✓ 白地に #198038:読みやすい
同じフィールド、同じメッセージ、緑が2種類。正解はCarbonのgreen 60です。ちゃんと緑に見えますし、左のほうが「より緑」なのに、目が読み取れるのはこちらです。
成功テキストにはすべてこの暗い緑を使います。フィールド下の一行、緑に変わるラベル、インラインの「確認済み」タグ、チェックアイコン自体も同様です。#00FF00 はテキストから完全に締め出しましょう。ブランドカラーの緑が純粋な緑に近いなら、イラストや大きな見出し文字用に取っておきます。大きさが、小さな文字では暗さが担う役割を果たしてくれるからです。
修正2:バナーは薄く染めて、濃い文字を載せる
✕ #00FF00 に白:うるさいのに、まだ読みにくい
✓ #A7F0BA に #044317:読みやすい
ネオンの単色バーに白文字は、ページで一番うるさいのに、それでも読みにくいのです。#00FF00 の上の白は、白の上の #00FF00 と同じく弱いコントラストだからです。色の位置が入れ替わっただけで、問題は消えていません。
淡い緑のコンテナに濃い緑の文字を載せれば、色で「成功」を伝えつつ、言葉をきちんと読ませられます。成功は良い知らせなので、叫ばせる必要はありません。ShopifyのPolarisシステムも同じ結論です。成功の面 #CDFED4 に、濃い緑の文字 #014B40 を載せています。
薄く染めたコンテナは、バナー、トースト、インラインのアラートボックスに使います。べた塗りの緑は1か所だけ、操作を確定する唯一のボタン用に取っておき、#198038 のように十分深い緑の上に、暗いか白のラベルを載せます。
修正3:ダーク画面では和らげる
サイトの状態
✓ デプロイ完了。
✕ ダーク上の #00FF00:ギラつく
サイトの状態
✓ デプロイ完了。
✓ ダーク上の #42BE65:落ち着いて明瞭
ダークモードでは助言が逆転します。ほぼ黒の上の純粋な緑は、コントラストの最低基準を余裕でクリアするので、チェッカーは警告しません。それでも誤った選択です。彩度MAXの緑はダークグレーの上で光って目を疲れさせ、10個並べば見ていられません。
Carbonのダークテーマは、より柔らかく明るい緑、green 40 の #42BE65 を使います。#161616 の上なら、ギラつきなく読みやすい色です。これはダークテーマの一般則です。白の上で機能する高彩度の色は、ダークでは明るく柔らかくします。パレットの残りはダークモードのカラーシステムの記事で、エラー側の対になるルールはエラーメッセージの色で解説しています。
修正4:色だけに頼らない
支払い 1
✕ 点だけ:どれが成功?
支払い 1
✓ 完了しました
✓ チェックと言葉:一目瞭然
「完了」は緑の点、「失敗」は赤の点としましょう。一般的な輝度の重み(赤0.299、緑0.587、青0.114)でグレースケールに変換すると、ほぼ同じ色になります。
グレー化した緑の点 #198038
グレー化した赤の点 #DA1E28
これが赤緑色覚の人にとってのステータス列の見え方で、日差しの下の白っぽくなった画面で見る人にも、だいたい同じです。成功状態には3つが必要です。
- 色:ライトでは暗めの緑、ダークでは柔らかい緑。
- 形:メッセージの前にチェックマーク。色がなくても見えます。
- 言葉:何が起きたか。緑の点より「お支払いを受け付けました」。
これはWCAG 1.4.1「色の使用」です。色はメッセージを補強できても、唯一の伝達手段にしてはいけません。ステータス一覧を出荷する前に、一度画面をグレースケールにしてみましょう(Macならシステム設定、アクセシビリティ、ディスプレイ、カラーフィルタ。iOSとAndroidにも、アクセシビリティのディスプレイ設定に同じフィルタがあります)。
ライトとダークの成功色8色
各チップをタップするとコードをコピーできます。
| ロール | ライト | ダーク | 用途 |
|---|---|---|---|
| 成功 | #198038 | #42BE65 | 成功テキスト、チェックアイコン、成功の枠線 |
| 成功の上 | #FFFFFF | #161616 | 確定ボタンなど、べた塗りの成功色の上のテキスト |
| 成功コンテナ | #A7F0BA | #044317 | バナー、トースト、インラインのアラートボックス |
| 成功コンテナの上 | #044317 | #A7F0BA | それらのコンテナ内のテキストとアイコン |
ダークテーマは新しいパレットではありません。緑のランプの同じ4ステップで、ロールを入れ替えただけです。コンテナ色がテキスト色になり、その逆も成り立ちます。
開発者に渡すもの
同じ8色をCSSカスタムプロパティにしたものです。ダークの値はシステムテーマで切り替わります。
:root {
--color-success: #198038;
--color-on-success: #FFFFFF;
--color-success-container: #A7F0BA;
--color-on-success-container: #044317;
}
@media (prefers-color-scheme: dark) {
:root {
--color-success: #42BE65;
--color-on-success: #161616;
--color-success-container: #044317;
--color-on-success-container: #A7F0BA;
}
}
.field--valid { border-color: var(--color-success); }
.field__hint--valid { color: var(--color-success); }
.alert--success {
background: var(--color-success-container);
color: var(--color-on-success-container);
}
.alert--success::before { content: "✓ "; }
Carbonでは、これらを緑のランプ上のgreen 60、green 40、green 20、green 80と呼んでいます。どのシステムを使うにせよ、4つのロール名は盗む価値があります。次の誰かが #00FF00 に手を伸ばすのを防いでくれるからです。
もう一つ関連する罠があります。iOSの systemGreen(#34C759)は、白地のテキストには明るすぎます。Appleはこれをスイッチや塗りに使っており、そこでは形が意味を担っています。本文テキストにコピーしてはいけません。
FAQ
成功メッセージはどんな色にすべき?
小さいサイズでも読みやすい暗い緑です。たとえば白背景なら #198038。チェックマークと、何が起きたかを伝える言葉を組み合わせましょう。
#00FF00は成功テキストとしてアクセシブル?
いいえ。白地の純粋な緑は、本文テキストのWCAGコントラスト最低基準を大きく下回ります。#198038 のような暗い緑を使いましょう。
成功バナーに合う緑は?
#A7F0BA のような淡い緑で背景を染め、濃い緑のテキスト #044317 を載せます。この組み合わせは読みやすく、うるさくありません。
ダークモードの成功色は?
#161616 の上に、#42BE65 のような柔らかく明るい緑です。純粋な緑はダーク背景でもコントラストチェックを通りますが、ギラついて目を疲れさせます。
成功を色だけで示してもいい?
いいえ。緑の点と赤の点はグレースケールでは同じに見えますし、WCAG 1.4.1は色を唯一の合図にしてはならないと定めています。チェックマークと、「完了」「失敗」のような言葉を添えましょう。
出典
- IBM Carbon design system、color overview:green 60 #198038、green 40 #42BE65、green 20 #A7F0BA、green 80 #044317、gray 100 #161616。
- WCAG 2.2、1.4.3 Contrast (Minimum)および1.4.1 Use of Color。
- コントラストはWCAGの相対輝度式で確認(#00FF00 上の白、および白上の #00FF00 は 1.37:1、白上の #198038 は 5.02:1、#A7F0BA 上の #044317 は 8.69:1、#161616 上の #42BE65 は 7.57:1、#161616 上の #00FF00 は 13.19:1)。グレースケール値は輝度の重み0.299、0.587、0.114を使用。
- Shopify Polarisの成功の面 #CDFED4 とテキスト #014B40、
@shopify/polaris-tokens9.4.2 より。 - iOSのsystemGreen #34C759 を白に対して測定(2.22:1)。Appleのカラーに関するHuman Interface Guidelinesを参照。
- パスワードフォーム、mia@brainy.ink への領収書、brainy-siteのデプロイ、支払いリストは、このページのために作った架空の例です。
- 最初にUX Brainyでカルーセルとして公開されました。
Want success, error and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
