色のコントラストとアクセシビリティ：WCAGの式の由来と限界、各国の基準

薄いグレーの本文は、デザインカンプの上では洗練されて見えます。けれども同じ画面を屋外でスマートフォンで見たり、省電力で暗くしたノートPCで見たり、70代の家族が見たりすると事情は変わります。コントラストは一部の人への配慮ではなく、条件の悪いときに画面を読むすべての人の読む速さと読み間違いに関わる問題です。

この記事では、コントラスト基準がどうやって決まったのか、その数字をどこまで信用してよいのか、各国の制度が実際に何を求めているのか、配色でどこがつまずきやすいのかを扱います。計算はカラーコントラストチェッカーですぐに試せます。

コントラストが足りないと誰が困るか

加齢による見え方の変化。 水晶体が黄色く濁り、瞳孔が小さくなって網膜に届く光が減ります。視力検査の数字が良くてもコントラスト感度は落ちるため、薄いグレーの本文から読みにくくなります。
悪い表示条件。 屋外の映り込み、省電力で暗くなった画面、コントラスト性能の低いディスプレイは、画面上のあらゆるコントラストを削ります。WCAGの式に入っている0.05という定数は、この周囲光の反射を模したものです。
色覚の多様性。 赤緑の色覚特性は北欧系の男性で約8%、女性で約0.5%、日本人男性では約4%と報告されています。男子20数人のクラスに1人ほどです。明るさの差は普通に感じられますが、赤と緑のように色相だけで区別した情報を見落とします。

コントラスト基準は、「条件が悪くても読めるか」を1つの数字で代わりに確かめる仕組みだといえます。

4.5:1はどこから来たのか

2008年のWCAG 2.0がコントラスト基準を定めたとき、出発点は印刷物ではなくモニターでした。式はsRGBのガンマを外して実際の光の量（相対輝度）を求め、2色の比をとります。W3Cの解説書が示す根拠は次のとおりです。

オフィス用ディスプレイの人間工学規格ISO 9241-3は、通常の視力の人に最低3:1の輝度コントラストを推奨していた。
視力20/40（小数視力でおよそ0.5）の人はコントラスト感度が約1.5倍落ちるとみなし、3×1.5＝4.5を通常テキストのAA基準にした。0.5前後は高齢者に珍しくない水準です。
20/80程度のロービジョンを見込んだ値がAAAの7:1。
大きい文字は線が太く、同じコントラストでも読みやすいので、18ポイントまたは太字14ポイント以上には一段低い3:1（AA）を適用する。

WCAG 2.1（2018年）では、文字以外の要素、つまり入力欄の枠線・アイコン・フォーカス表示にも3:1を求める達成基準1.4.11が加わりました。白地に薄いグレーの枠だけの入力欄がここでよく引っかかります。

注意したいのは、これらの数字が大規模な可読性実験で一つずつ検証された値ではなく、既存の規格と視力のデータを組み合わせた「合意されたしきい値」だという点です。4.49と4.51の間に読みやすさの崖があるわけではありません。ただし基準は丸めを認めないため、監査では4.49は不合格です。

式への批判とAPCA

WCAG 2の式は単純さゆえに20年近く使われてきましたが、弱点も知られています。

明暗の向きを区別しない。 白地にグレーの文字と、同じグレー地に白い文字が同じ値になります。実際には暗い背景の明るい文字はにじんで見えるなど、感じ方が違います。
暗い色同士を高く評価しすぎる。 濃紺の上の濃いグレーのように濁って見える組み合わせが通る一方、鮮やかなオレンジ地に白文字のように読みやすい組み合わせが落ちる例がよく挙げられます。
文字の太さと大きさを2段階でしか見ない。 細いウェイト300の16pxと太いウェイト700の16pxが同じ基準です。日本語の本文は画数が多く、細いウェイトではこの差がさらに効いてきます。

これを改善しようとAndrew Somersが提案したのがAPCA（Accessible Perceptual Contrast Algorithm）です。知覚モデルに基づいて明るい文字と暗い文字を別々に計算し、結果（Lc値）を文字サイズ・太さの表と合わせて読みます。

ここでよくある誤解が「WCAG 3はAPCAを採用した」という説明です。実際には、APCAはWCAG 3の草案に探索的な内容として入ったものの2023年7月の作業草案で外され、現在の草案ではコントラストの算出方法は未定とされています。WCAG 3自体もまだ勧告ではなく、確定までには何年もかかると見られています。したがって今、法的義務や契約条件を判断する基準はWCAG 2.xだけです。APCAは、デザイン段階で「式は通ったが本当に読みやすいか」をもう一度確かめる補助として使うのが安全です。

各国の制度は何を求めているか

コントラストの数値はほぼどこでもWCAGをそのまま使っており、違いは「誰に義務があるか」です。

日本

技術基準はJIS X 8341-3:2016です。WCAG 2.0（国際規格ISO/IEC 40500:2012）と一致するよう改正されたため、コントラスト基準もWCAG 2.0のAAと同じです。総務省の「みんなの公共サイト運用ガイドライン」は、国・地方公共団体などにこの規格のAA準拠を目標とし、試験を行って結果を公開するよう求めています。

民間については、改正障害者差別解消法が2024年4月に施行され、事業者による「合理的配慮の提供」が義務になりました。ただしこれは、すべての民間サイトにJIS準拠を義務づけるという意味ではありません。ウェブアクセシビリティは、合理的配慮を的確に行うための「環境の整備」として努力義務の位置づけです。

韓国

「障害者差別禁止及び権利救済等に関する法律」がウェブサイトを通じた情報アクセスでの差別を禁じ、技術基準として韓国型ウェブコンテンツアクセシビリティ指針（KWCAG）2.2（KS X OT0003:2022、2022年12月改正）が使われます。4原則・14指針・33の検査項目からなり、コントラスト項目は「テキストコンテンツと背景の明度対比は4.5対1以上」を求め、大きい文字（18pt、太字14pt以上）と拡大可能なコンテンツには3:1を認めています。WCAG 2.xのAAと事実上同じ数字です。

EU

欧州アクセシビリティ法（European Accessibility Act、指令2019/882）が2025年6月28日から適用されています。EC（電子商取引）、銀行サービス、電子書籍、旅客輸送サービスなど消費者向けの製品・サービスが対象で、零細企業（従業員10人未満かつ年間売上高または総資産200万ユーロ以下）が提供するサービスは適用除外です。適合の推定に使われる整合規格はEN 301 549で、ウェブ部分はWCAG 2.1 AAをそのまま取り込んでいます。公共機関のサイトはそれ以前からウェブアクセシビリティ指令（2016/2102）の対象でした。

米国

連邦機関はリハビリテーション法第508条に従い、2017年に改訂された508基準がWCAG 2.0 AAを参照しています。州・地方政府には、司法省が2024年4月にADA第II編の最終規則を公布し、WCAG 2.1 AAを技術基準としました。当初の期限は2026年（人口5万人以上）と2027年でしたが、2026年4月の暫定最終規則でそれぞれ2027年4月、2028年4月に1年延期されました。民間企業（第III編）には明文のウェブ技術基準はまだありませんが、訴訟ではWCAGが事実上の物差しとして使われています。

どの市場を対象にしても、「本文4.5:1、大きい文字とUI要素3:1」を守ればコントラストの項目で問題になることはありません。

配色でつまずきやすい箇所

ブランドカラーをボタンの背景にそのまま使う。 明るい緑・オレンジ・水色のブランドカラーは、白文字との比が4.5:1に届かないことがほとんどです。選択肢は3つです。ボタンの文字を黒系にする、ボタン用に明度だけ下げた「濃いブランドカラー」を別に用意する、文字を大きい文字の基準（太字18.5px以上）まで大きくして3:1を適用する。色相と彩度を保ったまま明度だけを調整した候補は、カラーコントラストチェッカーの提案機能で確認できます。

補助テキストとプレースホルダー。 日付、キャプション、入力欄のヒントは「重要度が低いから」と薄くされがちですが、基準に例外はありません。白地で合格する最も明るいグレーは#767676付近です。

状態の変化。 ホバー、フォーカス、選択、エラーの各状態で色が変わるなら、すべての組み合わせを確認する必要があります。特にフォーカスリングは1.4.11により周囲の背景と3:1が必要です。無効化された要素は例外ですが、「無効に見えるだけの有効なボタン」は例外ではありません。

ダークモード。 ライトモードの配色を反転すれば終わりではありません。純粋な黒に純粋な白（21:1）はにじんで見えるという声が多く、#121212のような濃いグレーの背景と少し落とした白を使うデザインシステムが多くあります。それでも4.5:1は十分に超えます。むしろ白地では問題なかった鮮やかなアクセントカラーが、暗い背景でコントラスト不足になる例に注意が必要です。

画像の上の文字。 写真の平均ではなく、文字の背後で最も明るい（または暗い）部分で測ります。半透明の黒のオーバーレイを敷けばたいてい解決します。実際に合成された色を知りたいときは、スクリーンショットを撮ってカラーピッカーで文字の背後のピクセルを拾ってみてください。

色だけで情報を伝える。 グラフの凡例を赤と緑だけで区別したり、必須項目を赤い枠だけで示したりするのは、コントラスト比に関係なく達成基準1.4.1の不適合です。アイコン、テキストラベル、線の種類を併用してください。

デザイントークンで管理する

コントラストは画面ごとに直しても、新しい画面を作るたびに再発します。根本的な対策は、組み合わせをトークンの段階で検証することです。

背景トークン（surface、surface-muted、brandなど）と前景トークン（text、text-muted、on-brandなど）を分ける。
許可する組み合わせを表にし、各セルにコントラスト比を書いておく。4.5未満のセルは「大きい文字専用」か「使用禁止」とする。
明度の段階はHSLではなくOKLCHのような知覚的に均等な色空間で作る。HSLの明度50%は黄色と青で体感の明るさがまったく違うため、色相が変わると比がばらつきます。色空間の変換はカラーコンバーターで試せます。

よくある誤解

「AAAを目指すべき」。 W3C自身、サイト全体の一般的な目標としてAAAを推奨していません。本文7:1はブランド表現を大きく制約します。制度が求めるのはAAです。
「自動チェックが通れば終わり」。 自動ツールはCSSで宣言された色しか見ません。画像内の文字、グラデーション上の文字、ホバー状態は見落とされがちです。
「コントラストが高ければ色覚特性のある人も大丈夫」。 コントラスト比は文字と背景の明るさの差です。2つのデータ色が互いに区別できるかは別に確認が必要です。
「APCAが新しい基準」。 前述のとおり、まだどの規格にも確定していません。

コントラスト基準は完全な可読性モデルではなく、最低限の安全線を誰もが同じ方法で測るための約束です。その線を越えたあとも、実機で、明るい場所と暗い場所で実際に読んでみることがいちばん確かな確認方法です。