黄色を基調にしたWEBサイトの配色｜見づらくならない色の使い方
黄色を基調にしたWEBサイトは、明るい印象を作りたいときに選択肢になります。ただし、黄色の背景に白文字を重ねたり、見出しやボタンまで似た明るさの黄色にしたりすると、情報が見つけにくくなることがあります。この記事では、明るい黄色#F8D44Fを例に、文字・背景・申込みボタンをどう組み合わせるかを考えます。HEXはWEB上の色を16進数で表すコードです。
黄色は見せ場に使い、文字は暗い色と組み合わせる
黄色を主役にすることは、画面全体を黄色で塗ることではありません。ページ冒頭の案内エリアを黄色にして、詳しい説明や料金表は白に近い背景へ切り替えると、どこが案内でどこが読む場所かを分けやすくなります。黄色は色相（赤・青・黄などの色み）に特徴があるため、さらに鮮やかな色を足すよりも、明度（色の明るさ）の差を確保することが重要です。
例えば、黄色#F8D44Fの上に白#FFFFFFの文字を載せた場合、コントラスト比は約1.45:1です。コントラスト比は前景と背景の相対的な明るさの差を表し、この組み合わせでは通常の文字を読むための差が足りません。一方、濃いチャコール#24313Aを文字にすると約9.22:1、深いブルーグレー#234859の見出しでも約6.78:1になります。
黄色に合わせる文字は必ず黒である必要はありません。十分に暗い青系やグレー系も候補です。ただし、黄色の上に文字を置く場合も、淡い背景に置き換える場合も、実際に隣り合う2色の差をそれぞれ確認します。
クラフト教室の申込みページで使う配色例
工作ワークショップの日程、完成作品の写真、参加費、持ち物、申込みボタンを載せるページを想定します。明るさはページ冒頭に集め、申込みに必要な情報は落ち着いた面に整理します。
- ページ冒頭：明るい黄色#F8D44Fを背景に、チャコール#24313Aで開催概要を書きます。文字との比率は約9.22:1です。見出しだけ深いブルーグレー#234859に変える場合も約6.78:1を確保できます。
- 日程と参加費の本文：温かみのあるオフホワイト#FBF9F2を広い背景に使い、チャコール#24313Aで文字を表示します。比率は約12.65:1です。明るい黄色を長い文章の背景に使い続けない設計です。
- ワークショップの紹介カード：白#FFFFFFの面にチャコール#24313Aで説明を書きます。文字は約13.33:1ですが、白#FFFFFFと周囲のオフホワイト#FBF9F2の差は約1.05:1です。カードの境界にはグレイッシュブルー#6E777Cの線を使い、白#FFFFFFに対して約4.57:1の差を付けます。
- 持ち物の案内欄：淡いクリームイエロー#FFF0BEを背景にし、チャコール#24313Aで項目を示します。文字は約11.72:1です。必要な境界線をグレイッシュブルー#6E777Cにすると、この背景に対して約4.02:1です。
- 「参加を申し込む」ボタン：濃いティール#165D68の背景に白#FFFFFFの文字を使います。文字との比率は約7.50:1で、ボタンを黄色#F8D44Fの上に置いた場合の面同士の差は約5.19:1、オフホワイト#FBF9F2の上では約7.12:1です。
黄色は教室の雰囲気を伝える面、チャコールは文章、濃いティールは申込みというように役割を固定すると、明るい色を使いながら情報の優先順位を整理できます。写真が多い部分では、黄色の装飾を増やしすぎず、作品自体の色を見せる余白も残します。
薄い黄色の区切りと操作状態に注意する
淡いクリームイエロー#FFF0BEとオフホワイト#FBF9F2の比率は約1.08:1です。似た明るさの面は色の違いだけで区別しづらいため、余白、見出し、必要な枠線を併用しましょう。また、くすんだ金色#D5A62Eと白#FFFFFFの比率は約2.25:1なので、申込みに必要な小さなアイコンや文字の色としては避け、装飾にとどめます。
WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。入力欄の輪郭など、操作や状態の識別に必要な非テキスト情報も、隣接する色との3:1以上が基準です。「満席」「受付中」の違いは色だけでなく、文字でも伝えてください。
最後にスマートフォンで、申込みボタンと写真の位置関係、小さな日付文字、カードの区切りを確認します。HueRollでは選択色と白・黒とのコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定はできません。この記事のような色同士の組み合わせは別途計算し、完成した画面で確かめましょう。