コントラストと色覚（WCAGとアクセシビリティ）

ねらい

きれいな配色を作れても、肝心の文字が読めなければデザインは仕事をしていない。「読める／読めない」を決めているのは、色の鮮やかさでも、色の名前でもない。明るさの差だ。

このクエストのねらいは二つ。一つ、読みやすさの正体がコントラスト（差）――それも明度差（明るさの差）だと体で分かること。二つ、人によって色の見え方が違うこと（色覚多様性）を知り、「色だけに意味を頼らない」という掟を持つこと。最後に、WCAGという世界共通の客観基準で、感覚に頼らず「これは読める」と言い切れるようになる。

ここは準備編「コントラストと階層」の色版であり、色彩編の締めくくりだ。これまで学んだ配色を、最後に「誰にでも届くか」で検品する回だと思ってほしい。

なぜ「色」では足りないのか ―― 明るさが先、色は後

まず、人の目の仕組みから入る。理由が分かると、掟が暗記でなく道具になる。

目の奥には、光を受け取る2種類のセンサーがある。杆体（かんたい）と錐体（すいたい）だ。杆体は明るさを感じる係で、数が圧倒的に多く、感度も高い。錐体は色を感じる係で、数は少ない。つまり人の視覚は、もともと「明るさを見る力」が主役で、「色を見る力」は脇役なのだ（典拠3）。

だから結論はこうなる。文字と背景を見分けてもらいたいなら、色を変えるより、明るさを離すのが正解だ。赤と緑のように「色の名前」がまるで違っても、明るさが近いと、ぼやけて読みにくい。逆に、白と黒のように色味がなくても、明るさが大きく離れていれば、くっきり読める。

ここで一つ、明度という言葉を押さえる。明度とは「その色の明るさの度合い」のこと。同じ赤でも、白に近い淡い赤は明度が高く、黒に近い濃い赤は明度が低い。読みやすさの主役は、この明度の差だ。

確かめ方 ―― 「グレーにして見る」

理屈は分かった。では自分の配色が大丈夫か、どう確かめるか。最強で最も簡単な方法がある。色を全部消して、白黒（グレースケール）にしてみることだ。

色を抜いても文字がちゃんと読めるなら、それは「明度差で読めている」証拠。合格だ。逆に、グレーにした瞬間に文字が背景に溶けて消えるなら、それは「色の違いだけに頼っていた」サイン。色の見分けが苦手な人や、まぶしい屋外でスマホを見る人には、最初から読めていない。

なぜこの方法が効くのか。さっき見たとおり、人の目の主役は「明るさのセンサー」だ。グレースケールは、その主役だけを残して脇役（色）を消す操作にあたる。つまり「色の助けがなくても読めるか」を、わざと厳しい条件で試している。これが通れば、たいていの環境で読める。

色覚は人によって違う ―― 色覚多様性

ここからが、このクエストの核心だ。「自分には読める」は、まったく当てにならない。なぜなら、色の見え方は人によって違うからだ。

目の奥の錐体（色のセンサー）は、本来3種類あって、ざっくり「赤・緑・青」をそれぞれ担当する。ところが、生まれつきこのうちの一つが弱い、または無い人が一定の割合でいる。とくに多いのが、赤と緑が見分けにくいタイプだ。これは病気でも異常でもなく、人類にもとからある多様性――だから近年は色覚多様性と呼ぶ（このタイプを、従来は色弱とも呼んできた）。

数字を押さえよう。日本では男性のおよそ20人に1人（約5%）、女性のおよそ500人に1人がこのタイプにあたる（典拠4）。クラスに男子が20人いれば、平均して1人。けっして珍しくない。あなたのサイトを見る100人のうち、何人かは「赤と緑が見分けにくい」人だと考えるのが現実的だ。

この色覚多様性が科学的に記述されたのは、意外に古い。化学者ジョン・ドルトンが1794年に発表（出版は1798年）した報告がそれで、彼自身が当事者だった。英語では色覚異常を、彼の名から「ダルトニズム」と呼ぶ（典拠5）。

この人たちに、赤と緑はどう見えるか。たとえば「赤字で必須、緑字で任意」と色だけで区別したフォーム。世界が白黒に見えるわけではない――色は見えている。ただ、赤と緑という特定の2色だけが似た色に見え、しかも明るさも近いと、区別がつかなくなる。「ここが赤いから危険、って言われても、どこが赤いのか分からない」――これが日常的に起きている。

だから、第3節のグレースケール検品が効く理由もここにある。グレースケールは色を全部消す、いちばん厳しい条件だ。色を消しても明度差で読めている配色なら、色の見分けが苦手な人にも届く。検品は厳しい側で行う、という考え方だ。

ここで一点だけ正確に。「色弱なら赤と緑が必ず区別できない」わけではない。区別がつきにくいのは、赤と緑で、かつ明るさ（明度）も近いときだ。逆に言えば、赤と緑を使っても明るさを大きく離せば、見分けられる余地は残る。これは次の節の掟（明るさを大きく変える・形や文字も足す）の根拠になる。

だから「色だけに頼らない」 ―― 形・位置・文字を足す

ここから掟が出る。意味を色だけに載せない。色は「おまけの目印」であって、「唯一の目印」にしてはいけない。色に加えて、**形・位置・文字（ラベルやアイコン）**でも同じ意味を伝える。これを本書では「二重符号化（同じ意味を二つの手段でだぶらせること）」と呼ぶ。アクセシビリティの実務では、これを「色だけに頼らない」原則（WCAGの達成基準1.4.1）と呼んでいる（典拠1）。

例を見よう。グラフで線を色だけで区別すると、見分けにくい人には全部同じ線になる。そこで、線の種類（実線・点線）を変える、線に直接ラベルを付ける、印の形を変える。すると、色が分からなくても情報が届く。信号機が、色だけでなく並ぶ位置でも決まっているのは、まさにこの知恵だ（縦型なら赤が上、横型でも赤の位置が決まっている）。

身近な掟に落とすと、こうだ。リンクは色を変えるだけでなく下線も引く。エラーは赤くするだけでなく**「！」マークや「必須」の文字も出す。地図で塗り分けるなら、色に加えて模様や文字も入れる。どれも「色が伝わらなくても意味が残る」ための保険だ。色を捨てるのではない。色にもう一つの伝え方を相棒として付ける**のだ。

客観基準 ―― WCAGのコントラスト比

最後に、典拠主義の真骨頂。「明るさを離せ」と言われても、「どれくらい？」が分からなければ気分のままだ。ここに客観的な物差しがある。WCAG（ウェブ・コンテンツ・アクセシビリティ・ガイドライン）のコントラスト比だ。WCAGはそもそも、Webのアクセシビリティ――年齢や体の状態にかかわらず誰もが使えること――を実現するための指針である。

WCAGは、文字色と背景色の明るさ（正確には輝度という、物理的に測れる明るさ）の差を計算して、1:1 から 21:1 までの比で表す。1:1 は「まったく同じ＝読めない」、21:1 は「黒と白＝最大」。数字が大きいほど読みやすい。そして合格ラインがはっきり決まっている。

• 本文（小さい文字）：4.5:1 以上
• 大きい文字（おおむね24px以上、または太字18.66px以上）：3:1 以上

「24px・18.66px」という半端な数字には理由がある。これはWCAGが定める「大きい文字」の境目で、もとは印刷の単位pt（ポイント）で18pt・太字14ptと決まっている。それをWeb（px）に直すと、この数字になる。暗記すべき呪文ではなく、換算の結果だ。

そしてこの2つの合格ラインは、どちらもWCAGの同じ達成基準**1.4.3（Contrast Minimum）**に書かれている（典拠1）。「なんとなく濃いめ」ではなく、計算で出る数値だから、誰がやっても同じ答えになる。序論で立てた「感覚でなく根拠で決める」という姿勢の、色における実装がこれだ。

使い方は簡単だ。自分で計算する必要はない。コントラストチェッカーという無料ツール（ブラウザで「contrast checker」で出てくる）に文字色と背景色を入れると、比と「合格／不合格」が即座に出る。デザインツールにも同じ機能が入っていることが多い。だから手順はこうなる――配色を決めたら、最後にチェッカーに通す。これだけで「読めるかどうか」を主観から外せる。

なお、なぜ感覚に頼らず数値で確かめるのか。同じ色でも、周囲の色によって明るさは違って見えるからだ（これを示す有名な例がチェッカーシャドウ錯視。同じ灰色が、周りしだいで濃くも淡くも見える／典拠6）。目はだまされる。だから最後は数値で裏を取る。

WCAGは思いつきのルールではない。世界の標準を決める団体W3Cが、専門家の知見を集めて作った国際的なガイドラインだ（典拠1）。だから「なぜ4.5:1なの？」と問われても、「W3CのWCAG達成基準1.4.3に基づく」と即答できる。これが典拠を持つ強さだ。（ちなみに、ボタンの枠やアイコンなど“文字でない要素”の輪郭にも別途3:1という基準があり、それは達成基準1.4.11が定めている。混同しやすいので分けて覚えるとよい。）

見分け方 ―― この配色は誰にでも届くか

最後に、自分の配色を検品する目を持とう。次の4つを順に通せば、「読めるかどうか」を感覚から切り離せる。

1. グレーにしても文字が読めるか（色を抜いて消えないか／図4）
2. 意味を色だけに載せていないか（形・位置・文字でも伝えているか／図7）
3. 赤と緑だけで区別していないか（最も見分けにくい組み合わせ／図6）
4. コントラスト比は合格か（本文4.5:1・大きい字3:1／図8）

これら4つは別々のルールではなく、すべて一つの思想から出ている――読みやすさは作り手ではなく読者が決める。自分に見えることは、誰かに見えることを保証しない。だからこそ、計算（WCAG）と検品（グレースケール・二重符号化）という客観の道具を最後に通す。色彩編はここで一周する。きれいな色を選ぶ力に、「その色が誰にでも届くか」を確かめる力を足して、ようやく配色は仕事になる。

譜例

棚（design-gallery）で実例を見て、本文の4つの検品ポイントがどう守られているか確かめよう。とくに、リンクに下線があるか、エラー表示が色以外でも分かるか、本文と背景の明度差を見てほしい。

• 棚：コントラストと色覚の実例を見る

練習・チェック

1. 自分のスマホで好きなサイトを1つ開き、設定の「グレースケール（色を消す）」表示をオンにしてみよう。文字やボタンが、ちゃんと読めるまま残るか。消えたものがあれば、それは色だけに頼っていた箇所だ。
2. なぜ「赤と緑」の組み合わせが、とくに気をつけるべきなのか。一文で言えるか。（ヒント：何人に1人が、どんなときに見分けにくいか）
3. 自分が最近選んだ「文字色と背景色」を一組、無料のコントラストチェッカーに入れてみよう。本文なら4.5:1を超えているか。超えていなければ、文字を濃くするか背景を明るくして、合格させてみよう。