色覚に配慮した配色｜赤と緑だけで区別しない図解の作り方

予約の空き状況を「赤は満席、緑は空席」で塗り分けた画像、料金プランを色の帯だけで分けた図解、凡例が色の四角だけのグラフ。SNSでは毎日のように見かける表現ですが、色の見え方が多くの人と異なる読み手には、肝心の「どれがどれか」が伝わっていないかもしれません。2026年11月時点で日本眼科医会が公開している啓発資料によると、生まれつき色の見え方が多くの人と少し違う人は、日本人男性の約5%、女性の約0.2%です。

とはいえ、ブランドカラーを捨てて無難な配色に変える必要はありません。必要なのは、色で示した意味を文字・記号・線種・模様のどれかでも読めるようにしておくことです。色はそのままに手がかりを1つ足すだけで、同じ図解でも伝わり方は大きく変わります。

この記事では、W3Cが示す「色だけに頼らない」原則を土台に、同じ予約表を色のみ・文字併記・記号併記で作り比べた計算結果、予約表・料金表・グラフの直し方、投稿前の確認方法、制作ルールへの落とし込み方までを解説します。商品写真の構図や代替テキストではなく、図解の中で色が担っている意味が伝わるかどうかに絞った内容です。

SNS画像の色覚配慮とは色以外でも意味が読める状態にすること

SNS画像の色覚配慮とは、色の違いを見分けにくい人にも図解や告知画像の意味が同じように伝わるよう、色に文字・記号・線種・模様などの手がかりを重ねて設計することです。色を使わないことではなく、色だけに意味を任せないことが要点になります。考え方の土台にあるのがカラーユニバーサルデザインで、色の感じ方の違いにかかわらず情報が正しく伝わるよう、色の使い方にあらかじめ配慮する取り組みを指します。

色の見え方には個人差があり赤と緑は混同されやすい

鳥取県の「カラーユニバーサルデザインガイドブック」は、NPO法人カラーユニバーサルデザイン機構（CUDO）の呼称にならい、多数派の色覚をC型、赤の光を主に感じる錐体に違いがあるタイプをP型、緑の光を主に感じる錐体に違いがあるタイプをD型などと呼んでいます。そのうえで、色弱者の大半を占めるP型・D型の人には「赤と緑」「深緑と茶色」「青と紫」のような組み合わせが見分けにくくなると説明しています。

見落としやすいのは、本人も周囲も違いに気づいていない場合が少なくないことです。日本眼科医会の資料は、見え方は白黒ではなくカラフルだが混同しやすい色が多くの人と違うこと、赤と緑でも明るさや濃さ、背景の色によっては似た色に見え、対象物が小さいとその傾向が強まることを解説しています。フォロワーに該当する人がいるかどうかではなく、いる前提で作るのが現実的です。

W3Cは色を唯一の伝達手段にしないよう求めている

Webアクセシビリティの国際的な指針であるWCAGには、「色の用途」という達成基準（1.4.1、レベルA）があります。ウェブアクセシビリティ基盤委員会（WAIC）による日本語訳では、色が情報を伝えたり反応を促したり、視覚的な要素を判別したりするための唯一の視覚的手段になっていないこと、という趣旨で定められています。2026年11月時点でW3Cが公開している解説文書は、この基準が色の使用や色分けを否定するものではなく、ほかの視覚的な手がかりで補えばよいと述べています。

押さえておきたいのは明るさの差の扱いです。解説文書では、色相に加えて明るさが違い、2色のコントラスト比が3:1以上あれば追加の手がかりになり得るとしています。一方で、特定の色を正確に見分けられることを前提にしたコンテンツでは、2色のコントラスト比にかかわらず追加の視覚的な手がかりが必要だと明記しています。「赤は満席、緑は空席」のように色そのものに意味を持たせた図解は、まさにこれに当たります。

なお、WCAGはWebコンテンツ向けの基準で、SNS投稿の画像を審査する制度ではありません。この原則を参考に図解を直しても、その投稿全体がWCAGに適合したと言えるわけではない点に注意してください。本記事では「色だけに頼らない」という考え方を、SNS図解の制作に応用する目的で扱います。

同じ予約表を色のみ・文字併記・記号併記で作り比べると差が出る

同じ内容の予約表を3通りで作り比べると、色が判別しにくい条件で情報が残らないのは色のみの版だけで、文字や記号を重ねた版は色が見えなくても読み取れます。ここでは店舗の予約状況を伝える図解を例に、その差を計算で確かめます。

比較に使う予約表と3つの作り方

例として、1週間を午前と午後に分けた14マスの予約表を想定します。満席を赤（#E60012）、空席を緑（#009944）で塗った表を「色のみ版」とし、マスの中に「満席」「空席」と書き入れた「文字併記版」、×と○を重ねた「記号併記版」を用意します。配色は3つとも同じにして、色以外の手がかりの有無だけを変えます。

色のみ版は、色を見分けられる人には一目で分かるすっきりした表です。しかし意味を知る手がかりは色だけで、凡例の対応を覚えていないと読めません。文字併記版はマスが少し窮屈になる代わりに、凡例を見なくても読めます。記号併記版は文字より小さなスペースで済み、スマートフォンで縮小表示されても形が残りやすいのが利点です。

白黒にすると色のみの版だけ情報が消える

差がはっきりするのは、色を抜いたときです。WCAGが定める相対輝度の式で赤（#E60012）と緑（#009944）の明るさの差を計算すると、コントラスト比は約1.29:1でした。W3Cが明るさの差を手がかりとみなす目安の3:1に届かず、グレースケールにすると2色は近い濃さのグレーになります。明るさの面でも、満席と空席はほとんど区別できないということです。

色覚の見え方を近似する計算モデル（Machadoらのモデル）でD型の強い程度を近似すると、2色はどちらもくすんだ黄土色になり、コントラスト比は約1.02:1まで縮みました。P型の近似では赤が暗くなる分だけ差が広がりますが、それでも約2.18:1です。一方、文字併記版と記号併記版は、色の差が消えても「満席」の文字や×の形が残るため、読み取りに必要な情報は失われません。

文字と記号のどちらを選ぶかは、マスの大きさで決めるのが実用的です。スマートフォンの画面で読める大きさの文字が入るなら文字併記、入らないなら記号併記にして、凡例で記号の意味を示します。自社の投稿テンプレートがどこまで色に頼っているかを第三者の目で確かめたい場合は、無料のSNSアカウント診断でご相談いただけます。

色だけで区別しない図解は状態・区分・系列ごとに直し方が変わる

色だけに頼った図解は、色そのものは残したまま、状態には文字や記号、区分には名前と区切り、系列には直接ラベルや線種を持たせれば直せます。色が何を表しているかによって、足すべき手がかりが変わります。

予約や在庫などの状態表示は文字と記号を重ねる

満席と空席、在庫ありと残りわずか、完了と未完了のように状態を示す色は、最も読み違いが起きやすい使い方です。状態の数は2〜4つ程度のことが多いので、それぞれに短い文字か記号を割り当て、色と必ずセットで使います。×と○、チェックと空欄のように、形がはっきり違う記号を選ぶのがコツです。

見落としがちなのが、赤字の「残りわずか」のように文字はあっても緊急度を色だけで表している場合です。文字は読めても、「赤いから急ぎ」というニュアンスは伝わりません。「残り2枠」と数字で書く、警告のアイコンを添えるなど、緊急度も色以外で表しておくと誤解を防げます。

料金表やプラン比較は色帯に名前と区切りを持たせる

料金プランを色の帯だけで区別する図解では、どの価格がどのプランかを色の対応で読ませることになります。プラン名を各列の見出しに入れ、列の境目に線や余白を設け、おすすめのプランは色に加えて「おすすめ」のラベルや太い枠で示せば、色が判別できなくても構造が読めます。

カルーセル投稿で料金表を複数枚に分けるときは、2枚目以降にもプラン名を入れておきます。1枚目の色の凡例を覚えている前提で作ると、途中から見た人や色の対応を覚えきれない人が迷ってしまいます。

凡例が色だけのグラフは直接ラベルと線種で区別する

折れ線グラフや円グラフの系列を色の凡例だけで示すと、読み手は線の色と凡例の色を照合しなければなりません。効果が大きいのは、凡例をやめて線の端やグラフの中に系列名を直接書くことです。線が交差するグラフでは、実線と破線、丸と三角のようにマーカーの形も変えておきます。

棒グラフや地図のように塗りの面積が広い図では、斜線やドットのハッチングを重ねる方法があります。鳥取県のガイドブックもハッチングの有効性を示しつつ、つけた場所が目立つため使い方に注意が必要だと指摘しています。強調したい系列だけに色を付け、ほかをグレーにする方法も有効です。

キャプションの色名だけの案内は位置と文字で言い換える

画像の外にあるキャプションや固定コメントでも、「赤い枠をチェック」「緑のボタンをタップ」のように色名だけで場所を示す表現は避けます。色名を残すのは構いませんが、「左上の『満席』の枠」「右下の『予約する』ボタン」のように、位置や文字と組み合わせて伝えます。

鳥取県のガイドブックは、カラーユニバーサルデザインのポイントの1つに「色の名前を用いたコミュニケーションを可能にする」を挙げています。図解の色に名前を添えておけば、コメント欄で「赤のところ」と話題になっても、色の見え方が違う人が会話から取り残されにくくなります。

予約表、料金表、グラフのテンプレートを一通り作り直すとなると、社内の担当者だけでは手が回らないこともあります。投稿制作を外部に任せる場合の費用の目安や料金体系は、以下の記事で詳しく解説しています。

SNS運用hub

SNS運用代行の費用相場と月額の内訳｜SNS別の料金と総額の出し方

🕒️

SNS運用代行の見積もりを何社かから取ると、月5万円台の会社もあれば月50万円を超える会社もあり、どの金額が妥当なのか判断に迷います。金額の差の多くは、会社の良し悪しよりも「何を任せるか」の違いから生まれています。投稿の作業だけを任せるのか、企画や撮影、動画の制作、コメント対応、分析、広告まで任せるのかで、同じ「SNS運用代行」でも買っている仕事の量はまったく違います。この記事では、2026年11月6日に、料金を公式サイトで公開している運用代行会社とオンラインアシスタントのサービス、あわせて12の料金表を開き...

SNSの配色は色相より明るさの差で選びブランドカラーと両立させる

見分けやすい配色の基本は、色相の違いより明るさと鮮やかさの差を大きく取ることで、ブランドカラーも役割を整理すれば無理なく残せます。配色の工夫は色以外の手がかりの代わりではなく、SNS画像のアクセシビリティを底上げする土台です。

色相より明るさと鮮やかさの差を優先する

赤と緑のように色相が大きく違う2色でも、明るさが近いと区別しにくくなります。鳥取県のガイドブックは、彩度は高い色と低い色を、明度は明るい色と暗い色を組み合わせると見分けやすくなると説明しています。暗い赤（#A0001E）と明るい緑（#8FD18F）の組み合わせなら、計算上のコントラスト比は約4.6:1になり、白黒にしても濃淡で区別できます。

色選びに迷う場合は、東京大学分子細胞生物学研究所や日本塗料工業会、DIC、CUDOなどが作成した「カラーユニバーサルデザイン推奨配色セット」が参考になります。東京大学の発表によると、被験者実験を重ねて数千の候補色から20色に絞り込んだ、どのような色覚の人にも比較的見分けやすい配色です。

スマホの小さな表示と流し見を前提にする

SNSの図解は、多くの場合スマートフォンの画面で、フィードを流し見する中で読まれます。鳥取県のガイドブックは、色の判別が難しくなる環境として、対象物が小さい、色を認識する時間が短い、見るときの明るさが十分でない、といった条件を挙げています。小さなマス、細い線、短い表示時間というSNSの条件は、これにそのまま当てはまります。

そのため、色で区別する部分はできるだけ面積を大きくし、線は太めに、色文字は太字にします。ストーリーズのように数秒で切り替わる画面では、凡例と本体を見比べる時間はないものと考え、意味が一目で分かる文字や記号を本体に直接置くのが安全です。

ブランドカラーが赤と緑でも役割を分ければ使える

ブランドカラーが赤と緑の組み合わせでも、使うのをやめる必要はありません。ブランドカラーは雰囲気をつくる色として使い、意味の区別は文字・記号・明るさの差に任せると決めるのが考え方の軸です。満席と空席の表なら、ブランドの赤を満席に残しつつ空席は明るい色にして濃淡の差を付け、両方に「満席」「空席」と書き添えます。

色の意味をブランドカラーに背負わせないと決めておくと、キャンペーンごとに配色が変わっても読み方がぶれません。ブランドの見た目を守ることと誰にでも伝わることは、どちらかを捨てる関係ではなく、役割分担で両立できるものです。

ブランドカラーを守りながら伝わる図解に作り替えられるかどうかは、投稿制作を任せる会社を選ぶときの確認点にもなります。SNS運用会社の選び方とおすすめの会社は、以下の記事にまとめています。

SNS運用hub

SNS運用代行会社の選び方とおすすめ12選｜任せ方・料金・契約期間で比較

🕒️

SNS運用代行会社を探し始めると、候補の多さと、会社ごとの中身の違いに戸惑う担当者は少なくありません。同じ「運用代行」でも、投稿の作成と投稿作業だけを受ける会社もあれば、戦略づくりから撮影、広告の配信、インフルエンサーの起用までまとめて受ける会社もあり、公式サイトに出ている月額も5万円前後から60万円以上まで開きがあります。この記事では、2026年11月時点で各社の公式サイトを開き、サービス内容と料金・契約期間の表記を確かめた12社を、「どこまで任せるか」という任せ方の違いで整理して紹介します。あわせて、...

投稿前の確認はグレースケール化を軸にシミュレーターで補う

投稿前の確認は、画像をグレースケールにして意味が読めるかを見るのが基本で、色覚シミュレーターは見分けにくい組み合わせを探す補助として使います。どちらの方法にも分かることと分からないことがあるため、役割を分けて組み合わせます。

グレースケールで色を抜いても読めるか確かめる

最も手軽なのは、完成した画像を白黒にして見ることです。デザインツールでグレースケールに変換するほか、iPhoneなら「設定」の「アクセシビリティ」から「画面表示とテキストサイズ」の「カラーフィルタ」でグレイスケールを選ぶと、投稿予定の画像をスマートフォンの表示サイズのまま確かめられます。

白黒で読めるということは、明るさの差か、文字や記号などの手がかりがあるということです。ただし、色そのものに意味を持たせた図解では、白黒で区別できても文字や記号が必要なのは前述のとおりです。白黒確認は色以外の手がかりが足りているかを見る工程と位置づけ、合格の基準をはっきりさせておきます。

シミュレーターは補助として使い限界を知っておく

見え方を近似するツールには、Chromeのデベロッパーツールの「Rendering」タブにある「Emulate vision deficiencies」や、Photoshopの校正設定にあるP型・D型の表示などがあります。Chromeでは1型（Protanopia）、2型（Deuteranopia）、3型（Tritanopia）、色を感じない状態（Achromatopsia）などを選べ、ブラウザに表示した画像の見え方を手早く確かめられます。

ただし、シミュレーションは全員の見え方を再現するものではありません。鳥取県のガイドブックも、掲載した疑似変換画像は見分けにくさを再現したもので、色弱者が感じている色を完全に再現したものではないと注記しています。程度には個人差があるため、シミュレーターで問題がなかったことを「誰にでも見える」根拠にはしないでください。見分けにくい組み合わせを見つける道具として使うのが適切です。

当事者の声は任意と同意を前提に聞く

可能であれば、色の見え方が異なる人に実際の画像を見てもらうと、シミュレーターでは気づけない迷いどころが分かります。社内や協力者に頼むときは、色覚の特性は本人が周囲に伝えていないこともある個人的な情報だと理解し、協力はあくまで任意にします。

意見をもらうときは、「見えますか」と聞くより、「この表で空いている日はどこですか」のように、伝えたい内容を読み取ってもらう聞き方のほうが具体的な改善点が出やすくなります。一人の感想を全員の見え方の代表とはせず、確認方法の1つとして扱います。

こうした確認を担当者の勘に任せず、投稿案や制作物を見るときの物差しとして持っておくと、チェックの抜け漏れが減ります。SNSの成果物をどんな観点でレビューするかは、以下の記事が参考になります。

SNS運用hub

SNS成果物レビューのやり方｜投稿案・企画書・月次報告の良し悪しを見抜く視点

🕒️

SNS運用を外部に任せてから数か月、毎月きちんと投稿案や月次レポートは届いている。けれど、それが良い仕事なのかどうかを社内で説明できない。上司から「代行に払っている分の成果は出ているのか」と聞かれ、レポートのグラフを見せる以外に答えようがなかった、という担当者は少なくありません。成果物が「届いていること」と「考え抜かれていること」は別物です。投稿本数がそろい、数字が並んだ報告書があっても、なぜその投稿なのか、数字が動いた理由は何か、来月は何を確かめるのかが書かれていなければ、それは作業報告に留ま...

色の意味を制作ルールに書き込んで運用で崩さない

色だけに頼らない図解を続けるには、色と記号の対応をテンプレートに残し、投稿前チェックに色の項目を加えて、担当者が替わっても同じ作り方ができる状態にしておくことが欠かせません。仕組みにしておけば、繁忙期でも品質がぶれにくくなります。

色と記号の対応表をテンプレートに残す

図解の作り方を担当者の工夫に任せると、忙しい時期や担当交代のたびに色だけの表に戻りがちです。満席は赤と×、空席は明るい色と○のように、状態ごとの色・記号・文字の対応を一覧にして、デザインテンプレートそのものに組み込んでおくと迷いがなくなります。

グラフ用には、系列ごとの色に加えて線種とマーカーの形も決めておきます。デザインツールでテンプレート化するときも、凡例ではなく直接ラベルを置いた状態を初期形にしておけば、使う人が意識しなくても色だけに頼らない図解になります。

投稿前チェックに色の項目を加える

投稿前のチェックリストが誤字や日時、リンクの確認だけになっているなら、色の項目を加えます。項目を増やしすぎると形だけになるので、まずは「色を抜いても意味が読めるか」「色名だけで場所を指示していないか」の2点を足すだけでも効果があります。

外部に制作を依頼する場合も、対応表とチェック項目を最初に共有しておきます。「ブランドカラーは守る、ただし色だけで意味を区別しない」という方針を依頼時に伝えておけば、修正の往復を減らせます。

自社のテンプレートやチェックリストをどう直せばよいか迷う場合は、無料のSNSアカウント診断で現在の投稿をもとにご相談いただけます。

色のルールは、商品写真や投稿素材の基準書と同じ場所で管理すると運用で崩れにくくなります。素材の比率や構図、世界観をまとめた基準書の作り方は、以下の記事で解説しています。

SNS運用hub

SNS商品ビジュアルの基準づくり｜EC写真と分けて考える投稿素材の設計

🕒️

ECサイト用に撮った商品写真をそのままInstagramに載せたら、いいねも保存もほとんど付かなかった。そんな経験から「SNS用に撮り直すべきなのか」「撮り直すなら何を変えればいいのか」と迷っている担当者は少なくありません。白背景の写真は商品ページでは十分に役立っているので、何が足りないのかが言葉にしにくいのです。原因は写真の上手い下手ではなく、EC写真とSNS用の商品ビジュアルで求められる役割が違うことにあります。販売ページでは購入前の不安を消す情報が求められ、SNSのフィードでは指を止めてもらい、自分が使う場...

まとめ：色はそのままに文字か記号を足せば伝わる図解になる

SNS画像の色覚配慮は、ブランドの色を捨てる取り組みではなく、色が担っていた意味をほかの手がかりでも読めるようにする作業です。最後に要点を3つにまとめます。

• 色に意味を持たせたら文字か記号を添える。赤＝満席・緑＝空席のように特定の色を見分ける前提の図解は、明るさの差があっても文字や記号が必要です。
• 確認は白黒を軸にシミュレーターで補う。グレースケールで読めるかを基本にし、シミュレーターは近似として使い、当事者の声は任意で聞きます。
• 対応表とチェック項目で運用に組み込む。色・記号・文字の対応をテンプレートに残せば、担当者が替わってもブランドカラーと伝わりやすさを両立できます。

まずは無料でSNSアカウント診断を

ハーマンドットは、SNS運用代行やインフルエンサーマーケティングを支援する会社です。「ブランドカラーは変えたくないが、予約表や料金表がきちんと伝わっているか不安」「過去の図解テンプレートを見直したい」といった制作面のご相談も、現在の投稿を見ながら一緒に整理します。

診断はWCAGへの適合性を判定する審査ではなく、伝わりやすさとブランドの見た目を両立させるための制作相談です。初回相談は完全無料・所要時間30分・オンライン対応可能です。お気軽にお申し込みください。