色だけ浮いて見えるボタンをサイトになじませる方法

WEBページの中でボタンだけが浮いて見える場合、原因は「目立ちすぎる色」だけとは限りません。背景や見出しと色の方向が違う、ほかの操作より大きく強調されている、ボタンの形だけ異なるといった理由も考えられます。ここでは架空の植物観察サイトにある「観察メモを保存」ボタンを、押せると分かる状態を保ちながら周囲になじませる方法を紹介します。

ボタンの色を単体で見ず、周囲の3つの要素と比べる

最初に、ボタンの周りにある背景、見出し、ほかの操作を並べて確認します。たとえば本文全体が落ち着いた緑と白で構成されているのに、保存ボタンだけ鮮やかな紫だと、その色だけが独立して見えることがあります。ここでいう彩度は色の鮮やかさの度合いです。違う色相（緑や紫などの色み）を使うこと自体が悪いのではなく、その違いに「特別に目立たせたい」という役割があるかを見直します。

次に、ボタンの目的と優先順位を確認します。植物の説明を読む画面で「観察メモを保存」が補助的な操作なら、申込みや購入のような最重要の操作と同じ強さで目立たせる必要はないかもしれません。一方、背景に溶け込んで押せる場所が分からなくなるのも避けたいところです。色と面積を調整する際は、ボタンの文字と輪郭の見分けやすさを別々に確かめます。

植物観察ページの保存ボタンを修正前後で比べる

ページの背景を淡いセージ系 ■#F3F4EC、写真と説明を載せるカードを白 ■#FFFFFF、見出しを深い緑 ■#23483E、本文を濃い灰緑 ■#26332Dとする例です。HEXとは、#と6桁の英数字でWEBの色を示す書き方です。白いカードと本文のコントラスト比（2色の相対的な明るさの差）は約13.18:1、淡い背景と見出しは約9.17:1です。

修正前：白いカードの中で保存ボタンだけを鮮やかな紫 ■#9B26C1にし、文字は白 ■#FFFFFFとします。文字とボタンは約6.10:1、ボタンと白いカードは同じく約6.10:1です。数値上は十分な差があっても、この例ではほかの緑系の部品と色の方向が違うため、保存操作だけが目立つ配置になっています。

修正後：ボタンを少し深い緑 ■#286653に変更し、白い文字 ■#FFFFFFを残します。文字とボタンの比率は約6.74:1、ボタンとカードの白 ■#FFFFFFも約6.74:1で、背景と区別しながら見出しの緑系に近づけられます。周囲の淡い背景 ■#F3F4ECに直接配置する場合も約6.09:1です。

補足文は落ち着いた灰緑 ■#516A61を白いカード ■#FFFFFFに合わせ、約5.86:1とします。ボタン以外の色も一緒に全部変えるのではなく、周囲にすでにある色の関係を確かめたうえで、まずボタンだけを変更するのが比較しやすい方法です。角の丸みや余白もほかの操作部品とそろえ、色だけの違いを減らします。

なじませた後もホバー・フォーカス・配置先を確認する

マウスを重ねたホバー状態では、ボタンを濃い緑 ■#194B3Dに変える例があります。白文字 ■#FFFFFFとの比は約9.93:1です。キーボードで操作場所を示すフォーカスには、ボタンから少し離した濃い青 ■#1F4560の輪郭線を用意します。線が接する白いカード ■#FFFFFFとの比は約10.10:1です。ホバーだけを操作状態の手掛かりにせず、実際にキー操作して表示を確認しましょう。

WCAG 2.2（WEBコンテンツを使いやすくするためのガイドライン）のレベルAAでは、通常サイズの文字と背景の比率は原則4.5:1以上、操作部品の識別に必要な輪郭などは隣接色と原則3:1以上が基準です。ただし比率が十分でも、ボタンの目的や優先順位が伝わるかは別の問題です。「観察メモを保存」のように動作を文字で明記し、スマートフォンでも押せる位置と余白を確保します。

白いカード ■#FFFFFFと外側の淡い背景 ■#F3F4ECの比率は約1.11:1と小さいため、必要な区切りは余白や見出しなどでも作ります。HueRollでは関連色の候補と選んだ色の白・黒に対するコントラストを確認できますが、任意の2色を比較したりWCAGの合否を自動判定したりはできません。実際のボタンと周囲の色は別途検証してください。