アクセントカラーとは
読み：あくせんとからー英語：Accent color
更新日：2026年10月31日
ひとことで
アクセントカラーとは、配色の中でごく小さな面積に使い、全体を引き締めたり、見てほしい場所に目を向けさせたりする色のことです。
ひとに説明するなら
「アクセントカラーは、配色のスパイス。全体のほんの少しだけに使う、目を引く色。ボタンや大事な言葉に使うと、見る人の目が自然にそこへ向かう。使いすぎると効かなくなるのがポイント」
少しだから、効く
アクセントカラーは、配色全体のほんの一部にだけ使う色です。まわりの色と、色みや明るさ、鮮やかさにはっきりした差があるので、少しの面積でもよく目立ちます。
使う場所をしぼるほど、効き目が強くなります。あちこちに使うと、どこが大事なのか分からなくなってしまいます。
アクセントカラーの選び方
- ベースやメインの補色に近い色を選ぶと、強く引き立つ
- ベースやメインと同じ色みで、ぐっと鮮やかにした色を選ぶと、まとまりを保ったまま目立つ
- ボタンなどに使うなら、背景とのコントラスト比も確かめる
選んだ色 #FF0000 ／ 補色 #00FFFF
CSS の accent-color
CSS には「accent-color」という書き方もあり、チェックボックスやラジオボタン、スライダーなどの色を、ひとことで変えられます。サイトのアクセントカラーをそのまま入れると、フォームの部品まで配色がそろいます。
よくある勘違い
勘違いアクセントカラーは、たくさん使うほど華やかになる
ほんとうは使いすぎると、どこも目立たなくなります。ほんの少しだから効く色です。
勘違いアクセントカラーは、いちばん好きな色にする
ほんとうはまわりの色との差で決まります。ベースやメインとの関係を見て選びます。
COLOR JOURNEY で使うには
COLOR JOURNEY のパレットの中で、ひとつだけ鮮やかさや色みが違う色があれば、それがアクセントカラーの候補です。complementary の印がついたパレットは、アクセントにしやすい色を含んでいます。
参考になるパレット
クイズ
アクセントカラーの面積の目安は？
ほんの少し
正解です。答えは「ほんの少し」。少しだけ使うことで、目を引く効果が生まれます。
全体の半分
ちがいます。答えは「ほんの少し」。少しだけ使うことで、目を引く効果が生まれます。
いちばん広く
ちがいます。答えは「ほんの少し」。少しだけ使うことで、目を引く効果が生まれます。
CSS の accent-color で色が変わるものは？
チェックボックスなどのフォーム部品
正解です。答えは「チェックボックスなどのフォーム部品」。チェックボックスやラジオボタン、スライダーなどの色を変えられます。
背景画像
ちがいます。答えは「チェックボックスなどのフォーム部品」。チェックボックスやラジオボタン、スライダーなどの色を変えられます。
文字の大きさ
ちがいます。答えは「チェックボックスなどのフォーム部品」。チェックボックスやラジオボタン、スライダーなどの色を変えられます。
よくある質問
アクセントカラーとは何ですか？
配色の中でごく小さな面積に使い、全体を引き締めたり、見てほしい場所に目を向けさせたりする色です。
アクセントカラーの選び方は？
ベースやメインの補色に近い色や、同じ色みで鮮やかにした色がよく使われます。
アクセントカラーはどこに使いますか？
ボタン、印、強調したい言葉など、見てほしい場所にしぼって使います。