色だけに頼らない販促物：色の見分けにくさがあっても伝わるポスターとバナーの直し方

考え方の根拠：色は「唯一の手段」にしない

Webの国際的なガイドラインであるWCAGの達成基準1.4.1「色の使用」は、情報の伝達、操作の指示、反応の促し、視覚要素の区別を、色だけで行わないよう求めています(レベルA)。補う手段として、文字ラベル、アイコンや記号、パターンや質感、下線などが挙げられています。同ページでは、必須項目を赤で示すなら、アイコンや文字ラベルも添える例が紹介されています。

ただしこれはWebコンテンツの基準です。紙のポスターやSNSバナーに法的な適用があるという話ではなく、考え方を借りる編集上の方針として使います。この記事の点検リストも、基準そのものではなく、それを販促物向けに置き換えた私案です。

点検リスト：色依存の箇所を洗い出す

デザインを開き、次の8項目を上から順に確認します。「はい」が付いた箇所が直す候補です。

• 1、点検する場面：凡例・グラフ・路線図、色依存の兆候：線や棒が色の違いだけで区別され、直接のラベルがない
• 2、点検する場面：会場マップ、色依存の兆候：エリアが色分けだけで、エリア名が地図上にない
• 3、点検する場面：料金・プラン表、色依存の兆候：「おすすめ」「満席」などを色で示している
• 4、点検する場面：日程・申込状況、色依存の兆候：「受付中は緑、締切は赤」のように状態を色で示している
• 5、点検する場面：注意書き、色依存の兆候：「赤字の項目は必須」「青字はオンライン限定」のような説明がある
• 6、点検する場面：ボタン・リンク風の要素、色依存の兆候：押せる場所が色の違いだけで示され、形や下線がない
• 7、点検する場面：文字と背景、色依存の兆候：明るさの近い色同士(赤と緑、黄と白など)で文字を載せている
• 8、点検する場面：記号・アイコン、色依存の兆候：同じ形で色違いのマークが別の意味を持つ

7番は「色の区別」というより「明るさの差」の問題ですが、同時に起きやすいので一緒に見ます。WCAGのコントラスト(最小)は、通常の文字で背景との比4.5:1以上、大きな文字(18pt以上、または太字14pt以上)で3:1以上を求めています。また、ブランドカラーだから低コントラストでよい、という扱いにはならないとも書かれています(ロゴ自体は例外)。印刷物では紙の色やインクで見え方が変わるため、これは画面上の目安として使います。

補い方の判断表

兆候が見つかったら、次の表から補う手段を選びます。

• 状態(受付中/締切)、補う手段：文字+記号、直し方の例：「受付中 ●」「締切 ×」のように言葉を必ず入れる
• 必須/任意、補う手段：文字ラベル、直し方の例：色付き文字に加えて「(必須)」と書く
• 複数の系列(グラフ)、補う手段：直接ラベル+線種、直し方の例：凡例ではなく線の端に名前を書く。実線・破線も使い分ける
• エリア(会場マップ)、補う手段：地図上の名前+塗りの模様、直し方の例：各エリアに「A」「B」と文字を置く。必要なら斜線などの模様も足す
• 押す場所、補う手段：形・下線・矢印、直し方の例：ボタンを枠付きにする、「申し込む →」と文言で示す
• おすすめ、補う手段：帯・見出し・大きさ、直し方の例：「おすすめ」と書いた帯を付け、枠も太くする
• 色違いのアイコン、補う手段：形を変える、直し方の例：○△□など形そのものを変える

説明用の例:イベント日程表の直し

以下は説明用に作った架空の例で、実際の販促物を検証した結果ではありません。

• 直す前:「ワークショップA(緑の文字=申込受付中)」「ワークショップB(赤の文字=満席)」
• 直した後:「ワークショップA ● 受付中」「ワークショップB × 満席(キャンセル待ち受付)」

色は残してかまいません。ただし、色を外しても「どちらが申し込めるか」が文字だけで分かるようにします。

AIに任せること、人が確認すること

AIは「色で区別している箇所を文章から拾う」下書き作りには向きます。一方、画像内の色の見え方や、色覚の特性による見分けにくさの判定は任せられません。そこは次の節のグレースケール確認など、人が行います。

分担は次のとおりです。

• AIに任せる:文面とレイアウトの説明から、色依存の候補を洗い出す。補う文言案を出す。
• 人が確認する:実際の見た目、文字の大きさ、紙や画面での色、掲載情報の正しさ。
• 渡さないもの:未公開の価格、顧客名、個人情報など。必要なら架空の値に置き換えます。

依頼文の例

次の文面は、そのまま貼って使えます。角括弧の部分を自分の内容に置き換えてください(この依頼文自体は、本記事のために作った未実行の例です)。

あなたは販促物の読みやすさを点検する担当です。
次のポスター(またはバナー)の説明を読み、
「色の違いだけで意味を区別している箇所」を一覧にしてください。

【媒体】[A3ポスター/横長Webバナー など]
【色の使い方】
- [緑の文字=受付中、赤の文字=満席]
- [青い枠=オンライン、オレンジの枠=会場]
【文字情報】
[ここに掲載する文面を貼る(未公開の機密は架空の値に置き換える)]

出力形式:
1. 色依存の箇所(1行ずつ)
2. それぞれに足せる補助(文字・記号・形・位置のどれか)
3. 補った後の文面案

注意: 見た目を実際に確認できないものとして扱い、
色の見え方についての断定は書かないでください。

返ってきた案は、そのまま採用せず、自分のデザインに当てはめて確認します。AIが色の組み合わせを「見分けやすい/にくい」と断言していたら、その部分は採用せず、次の手順で自分の目で確かめます。

直した後の確認手順

1. グレースケールで見る。 書き出した画像をグレースケールにするか、スマホの白黒表示などで確認します。色を消しても、状態・区別・押す場所が分かれば合格です。これは私の提案する簡易確認で、色覚の見え方を再現するものではありません。
2. 文字を声に出して読む。 色の説明(「赤い項目」など)に頼らず、文字だけで内容が通じるかを確認します。
3. コントラストを確認する。 Canvaを使っている場合は、メニューの「ファイル」から「アクセシビリティ」→「Check Design Accessibility」で、小さな文字や低コントラストの文字、代替テキストの不足を検出できます。ただし公式ヘルプでは、これはアクセシビリティ適合を保証するものではないと明記されています。また、私が確認した範囲では、「色だけで区別している」状態を検出する機能の記載はありませんでした。つまり、この記事の点検リストは自動チェックで代用できません。
4. 第三者に見てもらう。 可能なら、色の見分けにくさのある方を含め、複数人に見てもらいます。制作者本人は意図を知っているため、気づきにくい箇所が残ります。

直すときのよくある迷い

全部を白黒にしなければいけませんか。 いいえ。色は残して構いません。直すのは「色を消すと意味が消える箇所」だけです。

色名で説明すれば足りますか。 「赤い枠の項目」と書くと、かえって色を見分ける必要が生まれます。ラベルや記号の名前で呼べる形にします。

ブランドカラーを変えたくありません。 色そのものを変えずに、濃淡(明るさの差)、枠線、アイコン、文言で補えます。文字色だけは、背景との明るさの差を確保するのが先決です。

提出前チェック

• 状態・種類・必須などの意味を、色以外でも言える。
• 凡例に頼らず、図表に直接ラベルがある。
• 押す場所が文言や形で分かる。
• グレースケールにしても、読み間違える箇所がない。
• 小さな文字と背景の明るさの差が十分にある。

この5点が揃えば、色の見分けにくさがあっても、多くの場面で内容が伝わりやすくなります。