「文字が見にくい」と言われたら？
WCAGコントラスト基準で解決した話
目次
1. きっかけ ─ 「文字が見にくい」という一言
先日、制作中のホームページの修正版をお客様にご確認いただいたとき、こんなご意見をいただきました。
「この部分の文字が見にくいので、もう少し見やすく色を工夫してほしい。」
ご意見自体はありがたいのですが、「見にくい」という感覚は人によって異なります。
実は同じお客様からすでに数回、そのようなご意見をいただいており、その度に調整をしていました。しかし、いくら変えてもそれは「感覚」であり、別の方から言わせれば「前の方が見やすかった」と言われる可能性も・・・いわゆる堂々巡りに陥るリスクがあります。
そこで取り出したのが、Webアクセシビリティの国際規格「WCAG（Web Content Accessibility Guidelines）」です。「このデザインはWCAGのコントラスト比基準を満たしています」とお伝えしたところ、お客様にもご納得いただくことができました。
2. WCAGとは？2.1と2.2のAA/AAA基準を詳しく解説
WCAGは、W3C（World Wide Web Consortium）が策定した、Webコンテンツのアクセシビリティに関する国際ガイドラインです。視覚・聴覚・認知・運動など、さまざまな障がいを持つ方を含め、誰もがWebを利用できるようにすることを目的としています。
現在の最新版は2023年10月5日に正式勧告された「WCAG 2.2」です。それぞれ「A（最低限）」「AA（標準）」「AAA（最高水準）」の3段階の達成基準が定められており、一般的なWeb制作ではAAを目標とすることが推奨されています。
■ コントラスト比の基準（テキスト）
テキストと背景色の明暗の差を数値化したものが「コントラスト比」です。
WCAG 2.1・2.2ともに、テキストのコントラスト比については同じ基準が適用されます。
- AA基準（通常テキスト）：コントラスト比 4.5:1 以上
- AA基準（大きなテキスト：18pt以上、または太字14pt以上）：3:1 以上
- AAA基準（通常テキスト）：7:1 以上
- AAA基準（大きなテキスト）：4.5:1 以上
なお「大きなテキスト」の定義は、18pt（約24px）以上の通常テキスト、または14pt（約18.7px）以上の太字テキストです。
■ WCAG 2.1と2.2の主な違い
コントラスト比の基準そのものは、WCAG 2.1と2.2で変わりません。
WCAG 2.2は2.1との後方互換性を保ちながら、9つの新しい達成基準を追加しています。主な追加内容は以下のとおりです。
- フォーカスの視認性強化（キーボード操作時のフォーカス表示がコンテンツに隠れないこと）
- タッチターゲットの最小サイズ（24×24 CSSピクセル以上）
- ドラッグ操作の代替手段の提供
- 認証時に記憶に頼る認知テストを不要にすること（パスワードの貼り付け許可など）
- ヘルプ機能を複数ページで一貫した位置に配置すること
また、WCAG 2.1に存在した「4.1.1 解析（Parsing）」という基準がWCAG 2.2では廃止・削除されています。これは、現代のブラウザや支援技術がHTMLの解析エラーを問題なく処理できるようになったためです。
色のコントラストに関しては、2.1のAA基準を満たしていれば、2.2においても同じ基準が適用されるため、現状のWeb制作では十分です。
3. 解決策 ─ 「感覚」ではなく「数値」で話す
「見にくい」「見やすい」という感覚的な議論は、双方が正しいからこそ終わりません。そこで有効なのが、国際規格という客観的な根拠を持ち出すことです。
実際のやりとりでは、次のようにお伝えしました。
「このデザインは、W3C（World Wide Web Consortium）が策定したWebアクセシビリティの国際規格『WCAG 2.1 AA基準』のコントラスト比をクリアしています。視覚に障がいのある方を含む多くのユーザーが読みやすいと認められた基準です。
よってデザイン的には問題ないと判断できますが、気になるようであれば解決策としてBのような方法もあります」
もちろん、お客様の感覚を否定するわけではなく、「基準を満たした上でさらに改善できる点があれば一緒に検討しましょう」というスタンスを忘れないことが大切です。
4. コントラスト比を調べるおすすめツール・サイト
コントラスト比は目視ではわかりません。以下のツールを使えば、色コードを入力するだけで瞬時に確認できます。
① WebAIM Contrast Checker
URL：https://webaim.org/resources/contrastchecker/
文字色（Foreground）と背景色（Background）を設定してコントラスト比を計算し、基準を満たしているか確認できます。
色はカラーコード、カラーピッカーで指定でき、明度の調節も可能です。
色を設定すると、リアルタイムでコントラスト比が算出され、プレビューも通常テキスト、太字テキスト、またチェックマークなどのグラフィカルオブジェクトで確認できます。
それぞれの結果が適合レベルをクリアしているかどうかは、「Pass」あるいは「Fail」で一目でわかるようになっています。とてもわかりやすく使いやすツールです。
② Adobe Color
クリエイター向けのツールの開発・販売を行なうAdobeが提供するツールです。
ツール自体は配色ツールとしてクリエイティブ活動に役立つ様々な機能が備えられていますが、機能のひとつとしてアクセシビリティチェック用のコントラストチェッカーが含まれていいます。
他のコントラストチェッカーと同様の使用感ですが、設定した色に対して最適なコントラストの色も提案してくれます。
Adobe製のツールながら、インストールやログイン不要で利用することができますが、ログインすれば他のAdobe製品と連携できるので、普段からAdobeにアプリケーションを使用しているデザイナーにとっては使いやすいツールでしょう。
5. まとめ
「文字が見にくい」というフィードバックは、制作者として真摯に受け止めるべきものです。
しかし、感覚的な議論を続けていても正解にたどり着くのは難しいです。
そんなときに活用できるのが、WCAGのコントラスト比という客観的な指標です。今回のケースでは、W3Cの定めるAA基準を満たしているという事実をお伝えし、その上でさならる提案をしたことで、お客様にもご納得いただけました。
Webデザインにおけるアクセシビリティは、特定の方への配慮であると同時に、すべてのユーザーにとっての「読みやすさ」にもつながります。
ぜひ一度、ご自身のサイトのコントラスト比も確認してみてください。
