明るい緑の背景には何色の文字を合わせる？読みやすさから考える配色

明るい緑をWEBサイトの背景に使うと、軽やかな印象を作れます。ただし、緑が明るいほど白文字や淡い文字との明暗差が小さくなり、見出しは目立っても小さな案内が読みにくくなることがあります。ここでは植物スケッチ講座の申込みページを例に、背景の明るさを確認しながら文字色を選ぶ方法を紹介します。

明るい緑には白より濃い文字色を合わせる

文字を選ぶときは「緑と相性がよい色」だけでなく、背景とのコントラスト比を確認します。コントラスト比とは、文字と背景の相対的な明るさの差を示す数値です。WCAG 2.2（WEBコンテンツを利用しやすくするための国際的な指針）のレベルAAでは、通常サイズの文字は4.5:1以上、条件を満たす大きな文字は3:1以上が基準です。

例えば明るい緑■#88F2A2の上に白■#FFFFFFの文字を置くと、比率は約1.38:1で、通常文字だけでなく大きな文字の基準にも届きません。一方、濃いチャコールグリーン■#20342Aを使うと約9.63:1になり、通常文字の基準を上回ります。色相が近くても、明るさに差があれば読み取りやすい組み合わせを作れます。

より鮮やかな黄緑寄りの緑■#3DFF6Eでも、白■#FFFFFFは約1.34:1、チャコールグリーン■#20342Aは約9.92:1です。また、落ち着いたグレーグリーン■#6B8773を元の明るい緑■#88F2A2に重ねると約2.86:1なので、小さな補足文字には向きません。白や薄いグレーを避けるだけでなく、中間色も数値で確かめましょう。

植物スケッチ講座の申込みページでの配色例

講座名と開催日時を載せる最上部の案内帯には、明るい緑■#88F2A2を使います。見出しの文字をチャコールグリーン■#20342Aにすると約9.63:1、日時などの説明を深い緑■#274D39にすると約6.92:1です。どちらも背景との比率が通常文字の4.5:1以上なので、見出しだけでなく小さめの案内にも使えます。

持ち物や受講方法など長い説明は、案内帯から分けてオフホワイト■#F7FCF8の面にまとめ、文字をチャコールグリーン■#20342Aにします。比率は約12.76:1です。補足欄にはさらに淡い緑■#DDFBE5を敷き、同じ文字■#20342Aを使えば約11.98:1です。背景の緑を段階的に薄くしながらも、説明文の文字色をむやみに薄めないのがポイントです。

「講座に申し込む」ボタンは、明るい緑■#88F2A2の案内帯の中に、濃い青灰色■#1C3C53の背景と白■#FFFFFFの文字で置く例が考えられます。ボタン内の文字と背景の比率は約11.53:1、ボタンと周囲の明るい緑■#88F2A2は約8.39:1です。色の差だけに頼らず、余白と輪郭のあるボタン形状でも操作場所を示しましょう。

小さい文字・状態表示・画面幅を見直す

重要でない情報だからといって文字色を薄くすると、読みにくさにつながります。開催日、参加費、申込み期限など、判断に必要な情報は十分なコントラストを維持します。例えば淡いクリーム色■#FFF7D6を明るい緑■#88F2A2の上に置くと約1.28:1です。色同士が柔らかく見えても、文字色には適しません。

申込み受付中・受付終了などの状態は、緑やグレーだけで区別せず、具体的な文字で示します。ボタンのホバー（マウスを重ねた状態）やフォーカス（キーボードで操作中の位置）も、文字と背景、必要な輪郭と隣接色を確認してください。スマートフォンで文字が小さくなったり背景が切り替わったりした場合も、組み合わせを見直します。

HueRollではHEX（色を16進数で表したカラーコード）を入力して色を選び、選択色と白・黒とのコントラストを確認できます。ただし、任意の2色の比較やAA・AAAの自動判定には対応していません。ここで示した緑と濃い文字色などの比率は別途計算した値です。実際の画面で、読みやすさと操作の分かりやすさを合わせて確認しましょう。