UIの配色が初心者っぽく見える理由:正確なコード付き6つの修正
インターフェースを初心者っぽく見せる6つの配色ミスと、それぞれのプロの直し方を正確なコード付きで解説します。アクセントは1色、色とアイコンと言葉の併用、面は薄く、アクセント文字は濃く、黄色には暗い文字、状態ごとに別の濃淡。
初心者っぽい配色は、色がぶつかっているのが原因であることはまれです。原因は6つの小さな癖です。アクセントが多すぎる、色が単独で役割を背負っている、あらゆる場所が全力の塗り、明るいブランドカラーを文字に使う、黄色に白、そして全ての状態が同じ濃淡。プロの配色が落ち着いて見えるのは、これらそれぞれにルールがあるからです。6つを、コード付きで紹介します。
1. アクセントは1色、操作のために
Red
Green
Amber
Violet
Neutral
Neutral
Neutral
Accent #6440E0
すべての要素が自分の色を持つと、色は何の意味も持たなくなります。目の置き場がなくなり、本当の操作が装飾と張り合うことになります。
アクセントを1色決めて、ユーザーが操作できるものだけに使いましょう。メインボタン、選択中のタブ、リンクです。それ以外はすべてニュートラルにします。色付きの要素を指して「これはタップできない」と言えるなら、その色は外します。60-30-10の法則は同じ考え方を比率で表したものです。アクセントは小さい「10」にあたります。
2. 色、アイコン、言葉
メール
✕ 初心者:赤い枠線だけ
メール
sam@mail.com のように、完全なアドレスを入力してください。
✓ プロ:色、アイコン、言葉
メール
✕ 初心者:どっちが間違い?
メール
sam@mail.com のように、完全なアドレスを入力してください。
✓ プロ:それでも一目瞭然
北ヨーロッパ系の男性の約8パーセントは赤と緑の区別が難しく、いわゆる「男性12人に1人」という数字です。その人たち、そして日差しの下でスマホを使う誰にとっても、赤い枠線はただのグレーの枠線です。
だから状態には3つの合図が必要です。色、手前のアイコン、そして何をすべきかを伝える言葉です。これがWCAG 1.4.1「色の使用」です。色はメッセージを補助できても、唯一の伝達手段にしてはいけません。エラー用パレットの全体は、エラーメッセージの色の記事にあります。
3. 大きな面は薄く染める
$4でProに
オフライン地図、広告なし、旅行の共有。
アップグレード✕ 初心者:カード全体がフルカラー
$4でProに
オフライン地図、広告なし、旅行の共有。
アップグレード✓ プロ:面は薄く、フルカラーはボタンに
全力の色の大きなかたまりはうるさく、アクセントを使い果たしてしまいます。すると中のボタンは、周りがすでに同じ色なので、目立つ手段が残っていません。
代わりに大きな面は薄く染め、フルカラーは仕事をする部分に取っておきましょう。ここではカードを同じ紫の淡い段階である#E6DDFFに載せ、ボタンはフルの#6440E0です。バナー、選択行、ハイライト部分にも同じ手を使います。1つの色相から薄い段階を作る方法は、ブランドカラーパレットの記事で紹介しています。
4. アクセント文字は濃くする
白地に明るい紫
白地に濃い紫
明るいブランドカラーは塗りには良くても、文字としては弱いです。#9A79FCはボタンでは親しみやすく見えますが、白地の14 pxのリンクでは崩れます。直し方は、色相を保ったまま明度を下げることです。#6440E0は同じ紫で、読めるだけの深さがあります。
選択を擁護したい人のために数字を挙げます。白地の#9A79FCは3.22対1で、WCAGが文字に求める4.5対1に届きません。#6440E0は6.27対1です。数字の意味と確認方法は、アクセシブルな色のコントラストの記事で解説しています。
ブランドカラーはすべて2バージョン持ちましょう。塗りやイラスト用の明るい色と、文字や細いアイコン用の深い色です。
5. 黄色には暗い文字
黄色に白
黄色に暗い色
黄色や明るい色は本来明るいので、その上の白とは明るさの差がほとんどありません。#FED480の上の白は1.41対1。同じ黄色の上の#161513のようなほぼ黒は12.99対1です。
このルールはすべての明るい塗りに当てはまります。淡い黄色、ミント、スカイブルー、ピーチ。背景が明るいなら、文字は暗くします。ブランドカラーに白を載せ慣れたデザイナーには逆に感じますが、ボタンをプロっぽく見せる最短の方法の1つです。
6. 状態ごとに別の濃淡
Default
Pressed
Disabled
押したときと待機中で見た目が同じボタンはフィードバックがなく、無効のボタンが有効と同じ色に塗られていると壊れて見えます。各状態に同じ色相の別の濃淡を与えましょう。通常は#6440E0、押下時は#4422B2、無効時は#E6DDFFのような淡い色味に、読める#9A79FCのラベルです。
無効は低コントラストが許される唯一の状態で、WCAGも除外しています。それでも、そのボタンが何をするのか分かる程度にラベルは読めるべきです。同じ3段階の濃淡は、リンク、タブ、トグルにも使えます。
6つの修正を1つの表で
| 初心者 | プロ | 値 |
|---|---|---|
| アクセントが多い | 操作のために1色 | タップする1か所に#6440E0 |
| 色だけ | 色、アイコン、言葉 | 唯一の合図にしない |
| フルカラーの面 | 薄く染めた面 | 背景に#E6DDFF、ボタンに#6440E0 |
| 明るいブランドカラーを文字に | 濃いアクセント文字 | #9A79FCではなく#6440E0 |
| 黄色に白 | 黄色に暗い文字 | #FED480の上に#161513 |
| 全状態が同じ濃淡 | 状態ごとに濃淡 | #6440E0、#4422B2、#E6DDFFに#9A79FCのラベル |
FAQ
UIの配色が素人っぽく見える原因は?
アクセントが多すぎる、意味を色だけに任せる、大きな面に全力の塗りを使う、明るいブランドカラーを文字に使う、の4つです。この4つを直すほうが、パレット自体を変えるよりたいてい効果があります。
UIにアクセントカラーはいくつ必要?
1つです。タップや操作ができるものだけに使い、それ以外はニュートラルにします。エラーの赤のようなステータスカラーは別枠で、必ずアイコンと言葉を添えます。
黄色の背景にはどの文字色?
暗い色です。#FED480の上の#161513は約13対1で、同じ黄色の上の白は約1.4対1です。どんな明るい背景にも同じことが言えます。
明るいブランドカラーを文字として読めるようにするには?
色相を保って明度を下げます。#9A79FCは白地で約3.2対1、同じ紫の#6440E0は約6.3対1です。
押下時のボタンはどんな色にすべき?
通常より濃い濃淡にします。#6440E0に対して#4422B2のようにします。色相を変えずに、タップが受け付けられたことをユーザーに伝えられます。
無効のボタンもコントラスト要件を満たすべき?
WCAGは無効なコントロールをコントラストの最低基準から除外していますが、ボタンの役割が分かるようラベルは読める状態にしましょう。
出典
- WCAG 2.2, 1.4.3 Contrast (Minimum)(文字は4.5対1、無効なコンポーネントは除外)と1.4.1 Use of Color。
- 比率はWCAGの相対輝度の式で計算:#FFFFFF上の#9A79FCは3.22対1、#FFFFFF上の#6440E0は6.27対1(どちらも色相は約254度)、#FED480上の#FFFFFFは1.41対1、#FED480上の#161513は12.99対1。
- 赤緑色覚異常は、National Eye Instituteによると、北ヨーロッパ系の男性の約8パーセントに影響します。
- 状態の濃淡(押下の#4422B2、無効の#E6DDFFと#9A79FCのラベル)は当サイト独自のパレットです。セクション1のフィルターの色はイメージです。
- 最初はUX Brainyでカルーセルとして公開しました。
Want a palette that guides the eye across your whole product? Our team designs and builds UI and design systems with color decided once.
Get Started
