アクセントカラーパレット:16色のアクセントと、それぞれが必要とするラベル色
16種類のアクセントカラーパレットを正確なhexコード付きで紹介。アクセントの唯一の仕事である「ボタン上で読めるラベルを載せること」を全色でテスト。白が合う色、暗い色が合う色、どちらも合わない色がわかります。
アクセントカラーとは、インターフェースの中で「ここをタップ」を意味する唯一の色です。その上の文字が読めて初めて機能するので、良いアクセントかどうかはラベルが決めます。ここでは16色のアクセントを4つのテストで検証し、すべてのhexコードと、それぞれが受け入れるラベル色を紹介します。
アクセントが乗り越えるべきもの
アクセントの良し悪しは、文字を載せたときに決まります。ラベルが読めること、そしてボタンが背後のページから目立つこと。この2点が必要です。
そこから4つのテストが生まれます。白と暗い色のどちらのラベルが合うのか、それとも中間でどちらもダメなのか。小さなタグ文字を載せられるか。Butterscotch Gold #F7C873 のように、ボタンにするには淡すぎないか。
以下の各パレットは、インク、アクセント、サーフェスの3色で構成され、最後のタイルがテスト結果を示します。
アクセントはどのラベルを受け入れるか
Teal、Cobalt、Rose は十分に暗いので、白いラベルが部屋の向こうからでも読めます。Amber #C88A16 はそうではありません。
Teal
Deep Sea
Teal
Chalk
White on Teal
白いラベルを余裕で載せられる深いティール。
Cobalt
Navy Ink
Cobalt
Mist
White on Cobalt
4色の中で最強。Cobalt の上の白は部屋の向こうからでも読めます。
Rose
Plum Ink
Rose
Shell
White on Rose
Rose は白ラベル向けの3色の中でいちばん明るく、余裕が最も少ない色です。これ以上明るくしないでください。
Amber
Bark
Amber
Oat
Bark on Amber
Amber は正直者です。白は失敗します。かといって答えは、もっと暗い Amber ではありません。ラベルを Bark にして、色はそのままにします。
それがアクセントの仕事のすべてです。載せた文字に耐えること。Amber が示すとおり、直すべきは色ではないことがほとんどです。ラベルを変えて、ブランドは守りましょう。
中間トーンのデッドゾーン
アクセントの中には明度の真ん中にいるものがあります。白文字には明るすぎ、暗い文字には暗すぎる。この4色のうち2色は正反対の方向へ抜け出し、2色は閉じ込められたままです。
French Winery
French Winery
White on French Winery: passes
Midnight Express #1D2433 on French Winery: fails
Magnolia Petal
白文字が使えるほど暗い色。French Winery は暗くすることでデッドゾーンを抜けます。
Wild Forest
Wild Forest
White on Wild Forest: fails
Nightwalker #2B1A35 on Wild Forest: fails
Vintage Porcelain
ちょうど真ん中にいる爽やかなグリーン。白も暗い色も失敗します。一段階暗くすれば白が通るので、ボタンを1つデザインする前にグリーンを調整しましょう。
Glowing Lantern
Glowing Lantern
White on Glowing Lantern: fails
Aztec #153023 on Glowing Lantern: passes
Silent Snowfall
暗い文字が使えるほど明るい色。Glowing Lantern は逆方向、つまり明るくすることでデッドゾーンを抜けます。だからラベルは Aztec で、白は絶対に使いません。
Pink Orchid
Pink Orchid
White on Pink Orchid: fails
Royal Neptune #0F2E30 on Pink Orchid: fails
Snowflake
中間トーンのピンクで、Wild Forest と同じ問題を抱えています。一段階暗くすれば白が通ります。
大きな文字は小さな文字よりも基準が低いので、見出しはこれらの色の上でも問題なく見えるのに、ボタンのラベルは失敗することがあります。アクセントに載せる最も小さい文字で確認してください。ブランドのアクセントが真ん中に落ちたら、ボタンセットを作る前に調整しましょう。
ボタンはバッジではない
バッジは通常、背景にアクセントの約15%を使い、文字にはアクセントそのものを使います。その薄い色味が背景を持ち上げるので、上の文字はコントラストを失います。アクセントは白いボタンラベルを載せられても、自分自身のバッジの中では失敗することがあります。3つ目のタイルは、サーフェスの上にアクセントを15%で重ねた色です。
Peacock Pride
Peacock Pride
White button label: passes
Peacock Pride on tint #D5E1D2: passes
Wood Bark #2A2320 on tint: passes
Cosmic Latte #FBF7E6 の上で、両方の役割をこなせる深いティールグリーン。
Furnace
Furnace
White button label: passes
Furnace on tint #EAD9D1: fails
Elite Teal #13302A on tint: passes
力強い赤オレンジのボタンですが、タグにすると弱くなります。White Glove #EEF4F0 の上では、タグの文字をインク色にすればバッジは問題なく読めます。
Purple Heart
Purple Heart
White button label: passes
Purple Heart on tint #E6D3DF: passes
Black Velvet #1B2838 on tint: passes
十分に暗いので、Vanilla Blush #FDF1EC の上でも背後の薄い色味は影響しません。
French Blue
French Blue
White button label: passes
French Blue on tint #D9E3E3: fails
Nightly Voyager #2A1630 on tint: passes
Furnace と同じ話です。ボタンは機能し、バッジは機能しません。Powdered #FFF6E8 の上では、インク色がバッジの文字を救います。
アクセントが中間トーンなら、バッジとタグの文字はインク色にしましょう。Furnace のタグも French Blue のバッジも、文字をインク色に替えた途端に読みやすくなります。
明るい色はボタンではない
ボタンは、置かれたページからはっきり目立つ必要があります。クリーム色のページの上の淡く明るいアクセントは、パレットで一番きれいな色でも目立ちません。
だから役割を入れ替えます。暗い色がボタンになり、明るい色はタグ、バッジ、選択状態になります。ここでは2つのパレットがそうしていて、残る2つはタップできるほど暗いアクセントを持っています。
Butterscotch
Storm Graphite #434343 button, Butter Canvas #FAEBCD label: passes
Butterscotch Gold #F7C873 tag: passes
Butterscotch Gold on page: barely there
Butterscotch Gold は見た目こそ素敵ですが、Butter Canvas の上ではボタンとして消えてしまいます。役割を入れ替えましょう。タップするのは Storm Graphite、ゴールドはタグになります。
Ocean Breeze
Midnight Navy #0C2C55 button, Vanilla Linen #EDEDCE label: passes
Ocean Breeze #629FAD tag: passes
Ocean Breeze on page: barely there
淡いリネンの上のやわらかなティールブルー。解決策は同じです。Midnight Navy がボタン、Ocean Breeze はタグと選択状態になります。
Silent Grove
Silent Grove #215E61 button: passes
Link on Morning Paper #F5FBE6: passes
Blue Monolith #233D4D
これは何でもこなせます。暗いティールは Morning Paper の上でボタンにもリンクにもなり、白いラベルも楽に読めます。
Wild Berry
Wild Berry #CF4173 button: passes
Wild Berry link on Peach Cashmere #F6D8BD: fails
Deep Berry Plum #5D3140 link: passes
Wild Berry は白いラベルのボタンとしてぎりぎり合格です。Peach Cashmere の上のテキストとしては足りないので、リンクは Deep Berry Plum にします。
リンクは文字なので、ボタンの基準ではなく文字の基準を満たす必要があります。アクセントがボタンとしてぎりぎりなら、リンクはインク色にしましょう。
16色のアクセントを1つの表で
| パレット | アクセント | 合うラベル | 注意点 |
|---|---|---|---|
| Teal | Teal #0E7C6B | 白 | 4つの役割とも問題なし |
| Cobalt | Cobalt #2F4BD6 | 白 | 4つの役割とも問題なし |
| Rose | Rose #C2445F | 白 | 3色の中で余裕が最小、明るくしない |
| Amber | Amber #C88A16 | Bark #2C2415 | 白は失敗 |
| French Winery | French Winery #9A0A2C | 白 | 暗い文字は失敗 |
| Wild Forest | Wild Forest #009041 | なし、一段階暗くするまで | どちらのラベルも失敗 |
| Glowing Lantern | Glowing Lantern #FFBB40 | Aztec #153023 | 白は失敗 |
| Pink Orchid | Pink Orchid #C157AD | なし、一段階暗くするまで | どちらのラベルも失敗 |
| Peacock Pride | Peacock Pride #006262 | 白 | 4つの役割とも問題なし |
| Furnace | Furnace #D23D20 | 白 | バッジ文字は Elite Teal #13302A を使う |
| Purple Heart | Purple Heart #652A97 | 白 | 4つの役割とも問題なし |
| French Blue | French Blue #0075C9 | 白 | バッジ文字は Nightly Voyager #2A1630 を使う |
| Butterscotch | Butterscotch Gold #F7C873 | タグとして暗い文字 | ボタンにするには淡すぎる |
| Ocean Breeze | Ocean Breeze #629FAD | タグとして暗い文字 | ボタンにするには淡すぎる |
| Silent Grove | Silent Grove #215E61 | 白 | 4つの役割とも問題なし |
| Wild Berry | Wild Berry #CF4173 | 白 | リンクは Deep Berry Plum #5D3140 を使う |
選択を擁護する人のための数値
上記のすべての組み合わせは、WCAG 2 のコントラスト計算式で測定しました。この論文で比率を載せている表はこれだけです。
| パレット | テスト | 比率 | 結果 |
|---|---|---|---|
| Teal | アクセント上の白ラベル | 5.10:1 | 合格 |
| Cobalt | アクセント上の白ラベル | 6.78:1 | 合格 |
| Rose | アクセント上の白ラベル | 4.90:1 | 合格 |
| Amber | アクセント上の白ラベル | 2.96:1 | 不合格 |
| French Winery | 白ラベル | 8.5:1 | 合格 |
| French Winery | 暗いラベル | 1.8:1 | 不合格 |
| Wild Forest | 白ラベル | 4.1:1 | 不合格 |
| Wild Forest | 暗いラベル | 3.8:1 | 不合格 |
| Wild Forest | 白ラベル、一段階暗く | 4.6:1 | 合格 |
| Glowing Lantern | 暗いラベル | 8.4:1 | 合格 |
| Glowing Lantern | 白ラベル | 1.6:1 | 不合格 |
| Pink Orchid | 白ラベル | 4.0:1 | 不合格 |
| Pink Orchid | 暗いラベル | 3.6:1 | 不合格 |
| Pink Orchid | 白ラベル、一段階暗く | 4.6:1 | 合格 |
| Peacock Pride | ボタンラベル / バッジ文字 | 7.1:1 / 5.3:1 | 両方合格 |
| Furnace | ボタンラベル / バッジ文字 / インク色のバッジ文字 | 4.7:1 / 3.4:1 / 10.3:1 | 合格、不合格、合格 |
| Purple Heart | ボタンラベル / バッジ文字 | 9.0:1 / 6.3:1 | 両方合格 |
| French Blue | ボタンラベル / バッジ文字 / インク色のバッジ文字 | 4.7:1 / 3.6:1 / 12.7:1 | 合格、不合格、合格 |
| Butterscotch | ページ上のゴールド / ゴールドのタグ上の暗い文字 | 1.32:1 / 6.34:1 | 不合格、合格 |
| Ocean Breeze | ページ上のアクセント / アクセントのタグ上の暗い文字 | 2.49:1 / 4.7:1 | 不合格、合格 |
| Silent Grove | アクセント上の白ラベル | 7.4:1 | 合格 |
| Wild Berry | アクセント上の白ラベル | 4.51:1 | ぎりぎり合格 |
自分のアクセントをテストする方法
- まず白を試す。 Cobalt #2F4BD6 のようにアクセント上で白が合格なら、ラベルは決まりです。
- 次に最も暗いインク色を試す。 白が失敗してインク色が合格なら、Amber や Glowing Lantern のようにすべてのラベルをインク色にします。
- 両方失敗したらアクセントを動かす。 一段階暗く、または明るくすれば、真ん中から抜け出せます。
- タグは別にテストする。 15%の薄い色味を作り、その上でアクセントを文字としてチェックします。失敗したら、タグはインク色にします。
- ボタンをページと照らして確認する。 淡いアクセントはタグであって、ボタンではありません。しきい値については、アクセシブルな色のコントラストとUIの配色ミスの論文で解説しています。
各セットのファイルを入手する
各セットは Forge の無料カラーセットで、タップでコピーできるコード、Figma と Adobe 用のスウォッチファイル(ASE)、CSS変数、デザイントークンが付いています。
無料カラーセット
インク、サーフェス、タップする1色:Teal、Cobalt、Rose、Amber
すべてのhexに加え、ASEスウォッチ、CSS変数、デザイントークン。
無料カラーセット
デッドゾーン:French Winery、Wild Forest、Glowing Lantern、Pink Orchid
すべてのhexに加え、ASEスウォッチ、CSS変数、デザイントークン。
無料カラーセット
ボタンはバッジではない:Peacock Pride、Furnace、Purple Heart、French Blue
すべてのhexに加え、ASEスウォッチ、CSS変数、デザイントークン。
無料カラーセット
明るい色はボタンではない:Butterscotch、Ocean Breeze、Silent Grove、Wild Berry
すべてのhexに加え、ASEスウォッチ、CSS変数、デザイントークン。
FAQ
アクセントカラーのボタンには何色の文字を載せるべき?
アクセントが十分に暗ければ白、明るければ暗いインク色です。Teal #0E7C6B は白。Amber #C88A16 は Bark #2C2415。どちらも合わなければ、アクセントは真ん中にいるので、一段階動かす必要があります。
なぜ色付きボタンによっては白文字が失敗するの?
ボタンが明るすぎるからです。Amber、Glowing Lantern #FFBB40、Butterscotch Gold #F7C873 は明るいので、その上の白文字はかすんでしまいます。Wild Forest #009041 のような中間トーンは、白でも暗い文字でも失敗します。
UIパレットのアクセントカラーはどう選ぶ?
ラベルを先に選びます。アクセントに白文字を載せるのか暗い文字を載せるのかを決め、真ん中のどちらか一方にはっきり寄った色を選びましょう。ボタンとして、バッジの文字として、そしてページとの対比でチェックします。
アクセントカラーはボタンだと良く見えるのに、バッジだと悪く見えるのはなぜ?
バッジは、アクセント自身の薄い色味の上にアクセントを文字として置くので、コントラストが下がります。Furnace #D23D20 と French Blue #0075C9 は白いボタンラベルを楽に載せられますが、バッジの文字としては失敗します。バッジの文字はインク色にしましょう。
明るいアクセントカラーはボタンになれる?
めったに無理です。背後のページから目立つ必要があり、クリーム色のページの上の淡いアクセントではほとんど目立ちません。暗い色をボタンにして、淡いアクセントはタグや選択状態に使いましょう。
出典
- 色名とhexコードは、Forge の UX Brainy カラーセット vol 02、06、07、11 から。コントラストは、各色が置かれるサーフェスに対して WCAG 2 の計算式で算出しました。
- 文字と図形のコントラストのしきい値は W3C WCAG 2.2 に従っています:Contrast (Minimum) と Non-text Contrast。
- 各バッジタイルの薄い色味のhexは、パレットから導いた、サーフェス上のアクセント15%の色です。
- UX Brainy で4つのカルーセルとして最初に公開:Your accent decides what color the label on it has to be、The dead zone、A button is not a badge、The bright one is not the button。
Want an accent and a full UI palette built for your product and tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
