WEBデザインが地味に見えるときの配色改善｜アクセントカラーの使い方
落ち着いた色でWEBサイトを作ったのに、完成すると少し地味に感じることがあります。そんなときも、鮮やかな色を何色も追加する必要はありません。もともと色があって文字も読めるのに、開催情報も申込みボタンも同じような印象で、どこを見てほしいか分からない場合があるためです。ここでは地域の朝市の出店者募集ページを例に、緑を基調とした雰囲気を残しながら、アクセントカラーと色の面積を見直す方法を紹介します。
地味に見える原因を「色の少なさ」だけで判断しない
最初に、ページを開いたとき何が一番目に入り、最後にどの操作へ進んでほしいのか確認します。例えばページ背景がクリーム#F8F6F0、冒頭の案内面が淡い緑#DFE8DEなら、面同士のコントラスト比は約1.16:1です。案内面の文字を濃いチャコール#283630にすれば約10.08:1あり、文字は読めても、ページ冒頭と本文の切り替わりは控えめです。
従来の「出店を申し込む」ボタンが深い緑#386957で、白#FFFFFFの文字を使っていれば、文字のコントラスト比は約6.31:1、ボタンとクリーム#F8F6F0も約5.84:1あります。これは単純なコントラスト不足ではありません。見出し・案内ラベル・ボタンに似た緑を繰り返すと、どれが重要か伝わりにくくなることが課題です。
そこで、朝市らしい緑はサイトの主役色として残し、申込みという最後の操作にだけ別の暖色を用意します。色相（赤・緑などの色み）の違いだけでなく、周囲との明暗差、色の面積、ボタンの置き場所をセットで考えます。
朝市の出店者募集ページを改善する配色例
開催日、募集区画、出店料、当日の搬入方法、申込みフォームがあるページを想定します。HEXはWEBの色を16進数で指定するコードです。広い面を緑と明るい中立色で整理し、申込みだけにテラコッタを使います。
- ページ冒頭：淡い緑#DFE8DEの広い面を、深いフォレストグリーン#285944に変更します。募集タイトルは白#FFFFFFで表示し、文字と背景の比率を約8.07:1にします。暗い色は冒頭の限られた範囲だけに使い、日程や料金が続く本文は明るくします。
- 冒頭の「募集要項を見る」ボタン：淡いゴールド#F8DEAAを背景に、チャコール#283630で文字を載せます。文字とボタンは約9.65:1、ボタンと周囲の緑#285944は約6.16:1です。詳細を読むための補助操作として使います。
- 本文と開催情報：クリーム#F8F6F0にチャコール#283630で説明を書くと約11.70:1です。開催日や出店料の見出しは濃い緑#24523Fにし、同じ背景と約8.26:1の差があります。
- 「募集中」のラベル：従来の深い緑#386957に白#FFFFFFを合わせると約6.31:1です。受付状況はこの色を残し、「募集中」「締切」などの文言も表示します。予約ボタンまで同色にせず、情報と操作の役割を分けます。
- 募集区画のカード：白#FFFFFFにチャコール#283630で区画や価格を書くと約12.65:1です。白#FFFFFFとクリーム#F8F6F0の面同士は約1.08:1なので、必要な輪郭にはグレーグリーン#78847Dを使います。この線と白#FFFFFFは約3.89:1です。
- 搬入方法・注意事項：淡いセージ#EDF3ECにチャコール#283630で説明すると約11.22:1です。セージ#EDF3ECと周囲のクリーム#F8F6F0は約1.04:1と近いため、必要に応じてグレーグリーン#78847Dの枠線を付けます。この線とセージ#EDF3ECの比率は約3.45:1です。
- 「出店を申し込む」ボタン：明るい本文エリアだけでテラコッタ#A8412Eを使い、白#FFFFFFの文字を表示します。文字とボタンは約6.07:1、ボタンとクリーム#F8F6F0は約5.62:1です。目立たせたい申込み操作にアクセントの面積を集中させます。
- 補足説明：フォーム下の注意書きはグレーグリーン#57645Dをクリーム#F8F6F0に載せると約5.74:1です。補足文字を薄くしすぎず、出店条件は文字でも明確に示します。
この例では、新たに強い色を何か所にも置くのではなく、深い緑で募集ページの入口を作り、テラコッタで申込みの終点を示しています。写真や文字の多い中央部分は明るいまま残すことも、アクセントを効かせるための大事な調整です。
アクセントを増やす前に、配置先と状態表示を確認する
テラコッタ#A8412Eのボタンを深い緑#285944の冒頭へそのまま置くと、ボタン面と背景の比率は約1.33:1しかありません。暖色と寒色の違いがあっても、輪郭を見つけやすいとは限りません。冒頭ではゴールドのボタン、明るい本文ではテラコッタのボタンと、背景に応じて変えましょう。
WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。操作を識別するために必要な非テキストの表示にも、隣接色と3:1以上が基準です。色を増やすだけで強調が完成するわけではなく、見出しの大きさや余白、ボタンの文言も一緒に見直します。
最後にスマートフォンで開催日・申込み条件・ボタンの位置と、キーボード操作時のフォーカス表示を確かめます。HueRollでは配色候補や選択色と白・黒のコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。紹介した色同士の比率は別途計算した値です。