カーキと黒の配色が重いと感じたら？面積と余白を見直す
カーキと黒を組み合わせたバナーが重く感じられるときは、色そのものより、暗い面積が広すぎることや、写真・文字・ボタンの間に余白が少ないことが原因かもしれません。2色をやめる前に、どこを明るくするか、どこに空間を残すかを見直しましょう。アウトドア用品とキャンプ体験会の告知を例に調整方法を紹介します。
暗い色を隣り合わせで広く使うと重く見えやすい
カーキは、黄みや茶色みを含むくすんだ色を幅広く指します。この記事では暗めのカーキ#726D50と、黒に近い#171917を使います。HEX（ヘックス）カラーコードは、「#」に続く英数字で画面上の色を指定する形式で、ここでは6桁で表します。なお、CSSというWebの見た目を指定する仕組みで色名「khaki」をそのまま使うと、明るい黄系の#F0E68Cとなり、今回の暗いカーキとは異なります。
カーキ#726D50と黒#171917のコントラスト比は約3.38:1です。コントラスト比は隣り合う色の明るさの差を表す数値で、色が違っていても差が十分とは限りません。黒い背景にカーキの大きな帯を重ね、その中へ写真と細い文字を詰め込むと、暗い面がつながって見える場合があります。まず背景の一部を明るい生成り#F7F4EBへ変え、文字やボタンの周囲に空間を作ることから試します。
背景の面積と余白を変える2つの配色例
例1：アウトドア用品の新商品バナーは生成りを主役にする
黒#171917がバナーの大部分を占めているなら、生成り#F7F4EBを全体のおよそ3分の2まで広げる案を試します。見出し「新作キャンプギア」はカーキ#726D50、商品説明は黒#171917で載せます。商品写真の横に置く仕様欄は淡いカーキ#D8D2BFの面にし、欄内の文字は黒#171917にします。「商品を見る」ボタンは黒#171917を背景に、生成り#F7F4EBの文字を合わせます。
写真の四辺には本文1行分ほどの余白を出発点として確保し、見出しとボタンも写真に密着させません。カーキの飾りは見出しの下の短い線だけにすると、色数を増やさずに暗い部分の密集を減らせます。面積の数字は固定ルールではなく、写真の形や画面幅に合わせて調整する目安です。
例2：キャンプ体験会の告知は黒を見出し帯に残す
黒を完全に外したくない場合は、黒#171917を上部の見出し帯だけに使い、まずバナーの高さの4分の1程度から試します。「週末キャンプ体験」は帯の上に生成り#F7F4EBで表示します。日程・会場・参加条件は、下側の広い生成り#F7F4EBの面に黒#171917で載せ、項目の間隔を空けます。「詳細・申込」ボタンはカーキ#726D50を背景に生成り#F7F4EBの文字とし、本文から少し離して配置します。
この構成なら黒い帯で全体を引き締めつつ、読む場所は明るく保てます。カーキのボタンを何個も並べるより、案内したい操作を一つ選び、周囲に余白を残したほうが強弱を作りやすくなります。
文字とカードの境界は、実際の組み合わせで確認する
Webコンテンツを利用しやすくする指針「WCAG 2.2」のAA基準では、通常サイズの文字に4.5:1以上、十分に大きい文字に3:1以上のコントラスト比が必要です。カーキ#726D50と生成り#F7F4EBは約4.75:1、黒#171917と生成り#F7F4EBは約16.07:1、黒#171917と淡いカーキ#D8D2BFは約11.69:1で、いずれも通常サイズの文字の基準を満たします。ただし、カーキと生成りは基準に近いため、小さな本文には黒を優先する方法もあります。
一方、カーキ#726D50と黒#171917の約3.38:1は通常サイズの文字には不足します。また、淡いカーキ#D8D2BFと生成り#F7F4EBは約1.37:1なので、仕様欄を識別する唯一の境界には向きません。必要なカードの枠にはカーキ#726D50を使うと、淡いカーキ#D8D2BFに対して約3.46:1です。操作を理解するために必要な枠・アイコンは、隣接する色との比を原則3:1以上にし、純粋な装飾とは分けて判断します。
HueRollで確認できるコントラストは、選択色と白・黒との比較に限られます。今回のような生成りや淡いカーキを含む任意の2色の比較、AAの自動判定には対応していません。最終的な色の組み合わせを別途計算し、スマートフォンの狭い画面でも余白と文字の関係を見直しましょう。