UIカラーパレット:各色にできること、できないこと
16進コード付きのUIカラーパレット12種を、役割ごとに検証。ボタンにもリンクにも使えるアクセントはどれか、色付きカードの上で失格になるグレー文字はどれか、淡いアクセントが「塗る」だけで「書かない」理由まで。
UIカラーパレットは「きれいな色の詰め合わせ」ではありません。役割の集合であり、各色にはできる仕事とできない仕事があります。ここでは12のパレットを、それぞれ失敗しがちな役割ひとつに絞って検証し、すべての16進コードを載せました。
UIパレットの3つの役割
インクは書きます。すべての文字の色なので、サーフェスの上で十分に暗い必要があります。たとえば Indigo Mist #EEF0FB の上の Ink Navy #141238 のように。アクセントが使えないときは、リンクにもインクを使います。
サーフェスは支えます。他のすべての背後にあるページやカードのことです。白である必要はなく、選んだ色味によって他のすべての色の挙動が変わります。
アクセントはタップさせます。「これは何かが起きる」と告げる唯一の色です。仕事はひとつに聞こえますが、次の章で見るとおり実は2つあります。
アクセントには2つの仕事がある
ボタンでは、アクセントの上のラベルが読めること、そしてボタンがページから目立つことが求められます。文章の中では、同じアクセントがリンクになります。リンクは文字なので、同じページの上で読めなければなりません。どちらも同じ色のペアを使いますが、後者のほうがハードルが高いのです。
つまり、アクセントは良いボタンでありながら悪いリンクになりえます。Sky と Coral はまさにそのすき間にいます。Indigo と Berry は両方に合格します。
Indigo
Indigo #4338CA、白いラベル:合格
Indigo Mist #EEF0FB の上のリンクとしての Indigo:合格
Ink Navy #141238 をリンクに:合格
Indigo はボタンとしてもリンクとしても機能します。1色で2つの仕事。直すところはありません。
Berry
Berry #A61E4D、白いラベル:合格
Berry Milk #FBEAF0 の上のリンクとしての Berry:合格
Deep Berry #2A0A18 をリンクに:合格
Berry も同じです。ボタンには白いラベル、淡いピンクのサーフェスの上では読めるリンクになります。
Sky
Sky #248AE4、Harbor Ink のラベル:合格
Sky Wash #EAF4FC の上のリンクとしての Sky:不合格
Harbor Ink #021828 をリンクに:合格
Sky は良いボタンですが、リンクとしては厳しい色です。ボタン専用にして、リンクは Harbor Ink で下線付きにしましょう。
Coral
Coral #E85446、Burnt Clay のラベル:合格
Coral Milk #FDEEEB の上のリンクとしての Coral:不合格
Burnt Clay #290E0A をリンクに:合格
Coral も同じ分かれ方をします。ちゃんと見えるボタンと、Coral Milk に溶けて消えるリンク。
アクセントはボタンのために取っておく
対処は簡単です。Sky と Coral はボタン専用にして、リンクはインク色で下線を引く。同じ文章を両方のやり方で並べてみます。
パスワード
パスワードをお忘れですか?
✕ リンクが Sky:読みにくい
パスワード
パスワードをお忘れですか?
✓ リンクが Harbor Ink:読みやすい
色付きカードの上のグレー文字
サブテキストは、たいていインクの約65%です。白の上なら4つのパレットすべてで読みやすく、淡いサーフェスでもほとんど変わりません。ところが本物の色味がつくと、基準を下回ることがあります。
だから白ではなく、実際に載せる面でテストしてください。色味が強いなら、グレーを70%に上げれば復活します。
Red Panda
Sombre Night
Red Panda
Sugar Milk #FAF7F0 の上の #636772:合格
白の上の同じ65%ミックス #656A77:合格
Sugar Milk はほぼ白なので、グレーはほとんど変わりません。カードの上でも白の上でも合格です。
Warm Purple
English Walnut
Warm Purple
Oh Pistachio #BCDBA4 の上の #606146:不合格
70%の #59573F:合格
Oh Pistachio は本物の色味です。白の上では合格する同じグレーが、ここでは基準を下回り、70%にすると戻ってきます。
Mango
Jedi Night
Mango
Heart of Ice #F2F5FA の上の #5E6C68:合格
白の上の同じ65%ミックス #626F6A:合格
Heart of Ice は淡いクールな色味なので、グレーは持ちこたえます。
Viridian
Midnight Dreams
Viridian
Digital Lavender #D3CAEE の上の #535D71:不合格
70%の #495467:合格
Digital Lavender は、同じグレーを不合格にするには十分な強さの色味です。70%に上げればカードの上でまた読めます。
淡いアクセントは塗る。書かない。
淡いアクセントは美しい塗りになりますが、文字色としては絶望的です。自分のページの上では、この4色のどれも文字として読めません。同じ色を塗りに変えれば機能します。ただし、その上に載せる言葉を正しく選べばの話です。
Purple Estate
Sunwashed Paper #F5EDCE の上の文字としての Blue Horizon #72AFCC:不合格
Blue Horizon の上の Purple Estate #58287F:大きな文字のみ
Sunwashed Paper の上の Purple Estate:合格
淡いブルーは紙の上では文字として不合格です。塗りとしては Purple Estate を載せられます。大きな日付ならOKですが、小さな文字には不向きです。
Blue Horizon
Desert Cream #F5E9D8 の上の文字としての Blue Horizon #2FA4D7:不合格
Blue Horizon の上の Cocoa Noir #3E2C23:合格
Desert Cream の上の Cocoa Noir:合格
より明るいブルーも、Desert Cream の上では文字として不合格です。塗りとしては Cocoa Noir を楽々と載せられます。
Herb Garden
Sun Linen #FEFFD3 の上の文字としての Herb Garden #BCD9A2:不合格
Herb Garden の上の Red Monarch #A82323:合格
Sun Linen の上の Red Monarch:合格
4色の中で、自分のページ上では最もかすかな色です。グリーンの上に Red Monarch を置けば、数字ははっきり読めます。
Nordic Sky
Manor Cream #EAE0CF の上の文字としての Nordic Sky #7288AE:不合格
Nordic Sky の上の白 #FFFFFF:大きな文字のみ
Manor Cream の上の Velvet Indigo #4B5694:合格
Nordic Sky が受け入れるのは白だけ、それも大きな文字だけです。数字ならOK、細かい文字はNG。ページの文字は Velvet Indigo で組みます。
だから、ページだけでなく塗りとその上の言葉もチェックしましょう。塗りの上の言葉が大きな文字のコントラストにしか届かないなら、大きく使ってください。
12パレットを1つの表で
| パレット | 色 | 検証する役割 |
|---|---|---|
| Indigo | Ink Navy #141238, Indigo #4338CA, Indigo Mist #EEF0FB | ボタンもリンクも合格 |
| Berry | Deep Berry #2A0A18, Berry #A61E4D, Berry Milk #FBEAF0 | ボタンもリンクも合格 |
| Sky | Harbor Ink #021828, Sky #248AE4, Sky Wash #EAF4FC | ボタンは合格、リンクは不合格 |
| Coral | Burnt Clay #290E0A, Coral #E85446, Coral Milk #FDEEEB | ボタンは合格、リンクは不合格 |
| Red Panda | Sombre Night #121A2E, Red Panda #B54302, Sugar Milk #FAF7F0 | カード上でグレーが合格 |
| Warm Purple | English Walnut #2E1F14, Warm Purple #812E7D, Oh Pistachio #BCDBA4 | カード上でグレーが不合格 |
| Mango | Jedi Night #0E2219, Mango #FAA828, Heart of Ice #F2F5FA | カード上でグレーが合格 |
| Viridian | Midnight Dreams #0E222D, Viridian #007F5B, Digital Lavender #D3CAEE | カード上でグレーが不合格 |
| Purple Estate | Sunwashed Paper #F5EDCE, Blue Horizon #72AFCC, Purple Estate #58287F | 淡いブルーは塗り用、大きな文字のみ |
| Blue Horizon | Blue Horizon #2FA4D7, Desert Cream #F5E9D8, Cocoa Noir #3E2C23 | Cocoa Noir なら塗りが合格 |
| Herb Garden | Red Monarch #A82323, Sun Linen #FEFFD3, Herb Garden #BCD9A2 | Red Monarch なら塗りが合格 |
| Nordic Sky | Velvet Indigo #4B5694, Nordic Sky #7288AE, Manor Cream #EAE0CF | 塗りは白を受け入れる、大きな文字のみ |
数字:選択を弁護する人のために
すべての組み合わせを、載せる面に対してWCAG 2のコントラスト式で測定しました。このペーパーで比率を載せている表はこれだけです。
| パレット | テスト | 比率 | 結果 |
|---|---|---|---|
| Indigo | 白いラベル / ページ上のボタン / ページ上のリンク | 7.90:1 / 6.96:1 / 6.96:1 | すべて合格 |
| Berry | 白いラベル / ページ上のボタン / ページ上のリンク | 7.21:1 / 6.22:1 / 6.22:1 | すべて合格 |
| Sky | インクのラベル / ページ上のボタン / ページ上のリンク | 5.01:1 / 3.23:1 / 3.23:1 | 合格、合格、不合格 |
| Coral | インクのラベル / ページ上のボタン / ページ上のリンク | 4.98:1 / 3.21:1 / 3.21:1 | 合格、合格、不合格 |
| Red Panda | カード上の65%グレー / 白の上 | 5.2:1 / 5.4:1 | 両方合格 |
| Warm Purple | カード上の65%グレー / 白の上 / 70%時 | 4.1:1 / 5.0:1 / 4.8:1 | 不合格、合格、合格 |
| Mango | カード上の65%グレー / 白の上 | 5.0:1 / 5.2:1 | 両方合格 |
| Viridian | カード上の65%グレー / 白の上 / 70%時 | 4.2:1 / 5.1:1 / 4.8:1 | 不合格、合格、合格 |
| Purple Estate | 文字としての淡いアクセント / その上の最良の文字 / ページ上のインク | 2.05:1 / 4.31:1 / 8.83:1 | 不合格、大きな文字、合格 |
| Blue Horizon | 文字としての淡いアクセント / その上の最良の文字 / ページ上のインク | 2.36:1 / 4.66:1 / 11.03:1 | 不合格、合格、合格 |
| Herb Garden | 文字としての淡いアクセント / その上の最良の文字 / ページ上のインク | 1.51:1 / 4.64:1 / 6.98:1 | 不合格、合格、合格 |
| Nordic Sky | 文字としての淡いアクセント / その上の白 / ページ上のインク | 2.75:1 / 3.59:1 / 5.25:1 | 不合格、大きな文字、合格 |
自分のUIパレットの作り方
- インクとサーフェスから始める。 暗いインクと、色付きか白のサーフェスを選び、サーフェスの上でインクをチェックします。Sky Wash #EAF4FC の上の Harbor Ink #021828 は簡単なケースです。
- ラベルに合わせてアクセントを選ぶ。 白と暗い文字のどちらを載せるか決め、アクセントの上のラベルをチェックします。
- アクセントをリンクとしてテストする。 サーフェスの上に文字として置いてみます。不合格ならボタン専用にして、リンクはインク色にします。
- すべてのサーフェスでサブテキストをテストする。 各カード色の上にインクを65%で重ねます。基準を下回るなら70%に上げます。
- 淡い色は塗りのために取っておく。 決める前に、その上に載せる言葉を選んでおきましょう。しきい値についてさらに詳しくは、UIカラーの間違いとアクセシブルな色のコントラストのペーパーをどうぞ。
各セットのファイルを入手
各セットは Forge の無料カラーセットで、タップでコピーできるコード、Figma と Adobe 用のスウォッチファイル(ASE)、CSS変数、デザイントークンが付いています。
無料カラーセット
アクセントには2つの仕事がある:Indigo、Berry、Sky、Coral
すべての16進コードに加え、ASEスウォッチ、CSS変数、デザイントークン。
無料カラーセット
色付きカードの上のグレー文字:Red Panda、Warm Purple、Mango、Viridian
すべての16進コードに加え、ASEスウォッチ、CSS変数、デザイントークン。
無料カラーセット
淡いアクセントは塗る、書かない:Purple Estate、Blue Horizon、Herb Garden、Nordic Sky
すべての16進コードに加え、ASEスウォッチ、CSS変数、デザイントークン。
FAQ
UIカラーパレットにはどんな色が必要?
最低でも3つの役割が必要です。文字のためのインク、ボタンとリンクのためのアクセント、ページのためのサーフェス。Indigo #4338CA に Ink Navy #141238 と Indigo Mist #EEF0FB を組み合わせたものが、完全な例です。
UIでリンクは何色にすべき?
サーフェスの上で文字として合格するなら、アクセントで構いません。Indigo は合格します。Sky #248AE4 は合格しないので、リンクは Harbor Ink #021828 で下線付きにします。
サブテキストは何色にすべき?
インクの約65%で、実際に載せる面の上でチェックします。Oh Pistachio #BCDBA4 のような強い色味の上では不合格になることがありますが、70%に上げれば解決します。
なぜ色付きカードの上のグレー文字は読みにくいの?
色付きカードは白より暗いので、グレーとカードの差が縮まります。白は問題を隠してしまうので、本物のサーフェスでテストするのです。
パステルカラーをアクセントに使える?
塗りとしてならOK。文字としてはNG。Herb Garden #BCD9A2 は Sun Linen #FEFFD3 の上では文字として不合格ですが、塗りとして Red Monarch #A82323 を載せれば機能します。
ボタンの色はリンクの色としても機能しないといけない?
両方に使うなら、機能しなければなりません。ボタンはページから目立ち、ラベルを支える必要があります。リンクは文字なので、同じページ上でより高いハードルがあります。
出典
- 色名と16進コードは、Forge 上の UX Brainy カラーセット vol 04、08、12 より。コントラストは、各色が載る面に対してWCAG 2の式で計算しました。
- 文字と図形のしきい値は W3C WCAG 2.2 に準拠:Contrast (Minimum)とNon-text Contrast。
- 各タイルのグレーは、パレットのインクをサーフェスと65%(注記がある場合は70%)で混ぜたものなので、その16進コードはパレットから導出されています。
- 最初は UX Brainy の3つのカルーセルとして公開されました:アクセントカラーには2つの仕事がある、同じグレーでも白の上では合格し、色付きカードの上では不合格になる、淡いアクセントは図形を塗れる。
Want a UI palette built for your product, with every role tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
