コントラストが7:1に届かないグレーの本文

ある陶芸工房のサイトの日誌に、「マグに釉薬をかける方法」という記事があります。黒に近い見出しの下に、執筆情報の行と2つの長い段落が続きます。落ち着いた雑誌のような紙面にしたかったデザイナーは、段落と執筆情報を淡いグレーの#767676にして、見出しが引き立つようにしました。このグレーはよく考えて選ばれています。白の上で4.5:1の最低基準を満たす、最も明るい無彩色のグレーで、サイトはAAの診断に合格しています。

拡大鏡を使わずに読む弱視の利用者にとって、見出しは楽に読めても、段落は読むのがつらくなります。文字が欠けているわけではないのに1行読むたびに負担がかかり、数行読んだところで画面に顔を近づけるか、読むのをやめてしまいます。

コントラスト比は、文字と、その後ろの背景の明るさの差を表す値です。文字が背景と同じ色なら1:1、白の上の黒なら21:1で、数値が大きいほど文字がはっきり見えます。

WCAG 1.4.6では、文字と背景のあいだに7:1以上、大きな文字（24px以上、または18.66px以上の太字）には4.5:1以上を求めています。段落は17pxの標準の太さ、執筆情報は13pxなので、どちらも通常の文字で7:1が必要です。白の上の#767676は4.54:1です。AAの最低基準である1.4.3は満たしますが、1.4.6は満たしません。見出しは#1a1a1aで17.40:1あり、どちらの基準でも合格です。

2つの基準の違いは、想定している読者の違いでもあります。W3Cの1.4.6の解説によると、視力がおよそ20/80（小数視力0.25程度）まで落ちた人は、コントラストを感じ取る力も落ちていることが多く、7:1はその低下を補うための値です。それ以上に見えにくい人の多くは、拡大やコントラストの設定などの支援技術を使います。7:1は、その中間にいて、表示されたままのページを読む人のための基準です。

ブラウザーは、スタイルシートが指定した色をそのまま描くだけです。このグレーは多くの場合「muted」や「secondary」という名前のデザイントークンで、一度4.5:1を満たすか確かめただけで、デザイン上控えめにしたい段落、キャプション、執筆情報のすべてに使われます。

問題が大きくなるのは、長く読む文章です。記事、レシピの作り方、商品のお手入れ方法、利用規約などがそうです。同じグレーでも短いラベルなら一度読めば済みますが、1ページ分の文章は1行ずつ読み続けることになります。この読者は、屋外でスマートフォンを見るときや、明るさを下げたノートパソコンを使うとき、度が合わなくなった眼鏡で読むときにも、同じ読みにくさを抱えます。

10グループ中1グループに影響

• 全盲 （影響なし）
• 弱視 （影響あり）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響なし）
• 筋力・可動域 （影響なし）
• 認知 （影響なし）
• 光過敏 （影響なし）

• 視覚が限られる 弱視では、見え方のぼやけに加えて、コントラストを感じ取る力も落ちることがよくあります。多くの人が楽に読めるグレーでも文字の輪郭がにじみ、長い記事の1行ごとに負担がかかります。7:1は、拡大鏡やコントラストの設定を使わずに読む弱視の人に向けた基準です。

axeには7:1を確認する color-contrast-enhanced というルールがありますが、レベルAAAのタグが付いていて、初期状態では無効です。そのため、axeの初期設定のまま、またはAとAAのルールだけで実行する自動チェックでは、#767676は何も指摘されずに合格します。配色を4.5:1だけで確認しているデザインシステムでは、このグレーも「アクセシブル」とされます。AIに「アクセシブルなグレー」を尋ねると、#767676や、Bootstrapの secondary（#6c757d、4.69:1）、Tailwindの gray-500（#6b7280、4.83:1）のようなライブラリーのグレーが提案されることがありますが、どれも7:1に届きません。EaseWebの診断では color-contrast-enhanced を実行し、4.5:1は満たすものの7:1に届かない文字を、レベルAAAの要確認項目として報告します。