ライムグリーンとネイビーの配色｜アクセントを小さく使うには？

ライムグリーンとネイビーは、明るい黄緑と暗い青を組み合わせる配色です。目を引くライムグリーンをバナー全体に広げる必要はありません。受付状況などの小さなラベルや見出し下の短いラインに限定すると、ネイビーの落ち着いた背景を残しつつ、重要な情報を示せます。配信イベントの告知バナーを例に、色を使う面積と配置の決め方を紹介します。

ライムグリーンは主役の色ではなく、情報を示す目印にする

この記事ではライムグリーンの例を■#B7EA4D、ネイビーの例を■#1C2F49とします。ライムグリーンという色名に唯一のカラーコードが決まっているわけではありません。HEX（ヘックス）は、Webの色を「#」と6桁の英数字で指定する方法です。

この2色のコントラスト比は約9.59:1です。コントラスト比とは2色の相対的な明るさの差を示す数値です。ネイビー■#1C2F49の面にライムグリーン■#B7EA4Dのラベルを置き、ラベルの文字もネイビーにすると、文字とラベル面の差も約9.59:1になります。

大きな見出しや説明文までライムグリーンにするのではなく、イベント名は白、開催情報は淡い色、ライムグリーンは「受付中」の状態表示と短いラインに役割を限定します。色による強調を一か所に集めることで、どこを先に見せたいかが整理しやすくなります。

配信イベントの告知バナーで小さなアクセントの面積を計算する

横1,200×縦400pxのオンライン配信イベントのバナーを考えます。px（ピクセル）は画面上の大きさを表す単位です。左側にイベント名・開始日時・「視聴を予約する」の案内を置き、右側には登壇者の写真を配置します。写真の上には必要な文字を重ねません。

例えばライムグリーンの「受付中」ラベルを横132×縦36pxにすると、色の塗り面はバナー全体の約0.99％です。さらに見出し下へ横280×縦6pxの短いラインを置くと約0.35％で、合計約1.34％になります。あくまで配置を考えるための面積例であり、差し色は何％が正しいという規則ではありません。

• ネイビー主体の案：左側の広い背景をネイビー■#1C2F49にし、見出しを白■#FFFFFFで表示します。見出しと背景の比は約13.53:1です。開始日時の説明文には淡いグレーグリーン■#DDE5DAを使い、比は約10.50:1です。ライムグリーン■#B7EA4Dの「受付中」ラベルにはネイビー■#1C2F49の文字を置き、見出し下にも短いライムグリーンのラインを添えます。予約ボタンは白■#FFFFFFの面にネイビー■#1C2F49の文字を使い、緑色の塗り面を増やしません。
• オフホワイト主体の案：広い背景をオフホワイト■#F6F8F2、見出しをネイビー■#1C2F49に変えます。見出しと背景の比は約12.65:1です。説明文は落ち着いた青灰■#435260にして約7.51:1を確保します。「受付中」のラベルをライムグリーン■#B7EA4Dで作る場合は、背景との比が約1.32:1と小さいため、ネイビー■#1C2F49の輪郭線を付けます。線と背景の比は約12.65:1で、ラベル文字もネイビーを使います。予約ボタンはネイビーの面に白■#FFFFFFの文字を合わせます。

暗い案ではアクセントが背景からはっきり浮かび上がり、明るい案ではラベルに輪郭が必要になります。いずれも「受付中」の文字を省かず、ライムグリーンの色だけで受付状況を知らせないようにします。

白背景への移動とスマートフォン表示で見失わないようにする

ライムグリーン■#B7EA4Dと白■#FFFFFFの差は約1.41:1で、白い文字をライムグリーンに載せても同じ値です。通常の文字には不十分です。また、オフホワイト■#F6F8F2上のライムグリーンも約1.32:1なので、状態を示すラインを色の差だけで識別させないようにします。

逆に、ネイビー■#1C2F49の背景に青灰■#435260の小さな文字を使うと約1.68:1しかありません。明るい背景の本文色を、そのまま暗いバナーへ移さず、白■#FFFFFFや淡いグレーグリーン■#DDE5DAに切り替えましょう。

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常の文字に原則4.5:1以上、大きな文字に3:1以上が必要です。また、意味のある図形や操作部品を識別するために必要な視覚的手がかりには、隣接色と原則3:1以上が求められます。装飾だけのラインは同じ要件とは限りません。バナーをスマートフォン用に縮める場合は、小さなラインを無理に残すより、文字付きの状態ラベルと見出しを優先します。

HueRollではHEXコードを調整し、配色候補や選択した色と白・黒とのコントラストを確認できます。ただし、任意の2色同士の直接比較やWCAGの自動判定はできません。今回のライムグリーン・ネイビー・補助色の組み合わせは、別途2色ずつ計算しました。