コントラスト比とは?WCAGの基準をやさしく解説

文字色と背景色の組み合わせで、「なんだか読みにくいな」と感じたことはないでしょうか。

実はこの読みやすさは、「コントラスト比」という数値で客観的にチェックできます。

この記事では、コントラスト比とは何か、そして国際的な基準であるWCAGがどんな数値を求めているのかを、初心者向けにやさしく解説します。

基本の理解

まずはコントラスト比と、その基準となるWCAGがそれぞれ何なのかを押さえましょう。

そもそもコントラスト比とは何か

コントラスト比とは、文字色と背景色の「明るさの差」を、1:1(差がまったく無い状態)から21:1(最大の差、真っ白と真っ黒の組み合わせ)までの数値で表した指標のことです。

数値だけだとイメージしにくいので、具体的な組み合わせで見てみましょう。

21:1(最大): 真っ白の背景に真っ黒の文字。もっともくっきり見える組み合わせです。
4.5:1(後述する合格ラインの目安): 白背景に、やや濃いめのグレー文字。問題なく読める組み合わせです。
1.5:1(基準を満たさない例): 白背景に、薄いグレー文字。見た目はおしゃれでも、かなり読みづらくなります。

実際にブラウザ上で見比べると、違いがより分かりやすくなります。

読みやすい文字の例

21:1(最大)
白背景 × 黒文字

読みやすい文字の例

4.5:1(合格ライン)
白背景 × 濃いめのグレー文字

読みにくい文字の例

1.5:1(基準未満)
白背景 × 薄いグレー文字

この配色は、次のようなCSSで再現できます。

/* 白背景(#ffffff)に対する文字色の例 */
.contrast-21 { color: #000000; } /* 21:1(最大) */
.contrast-45 { color: #767676; } /* 4.5:1(WCAG AAの合格ライン) */
.contrast-15 { color: #d3d3d3; } /* 1.5:1(基準を満たさない例) */

このように、明るさの差が大きいほどコントラスト比の数値は高くなり、読みやすくなります。

この数値があることで、「読みやすいかどうか」を感覚ではなく、客観的な基準で判断できるようになります。

そもそもWCAGとは何か

WCAG(Web Content Accessibility Guidelines)とは、Webサイトを誰にとっても使いやすくするための国際的なガイドラインのことです。

Web技術の標準化団体であるW3Cが策定しています。

弱視の人や、色の見分けが難しい人(色覚特性を持つ人)でも情報を読み取れるようにするため、WCAGでは文字と背景のコントラスト比について、最低限満たすべき数値を定めています。

代表的な基準(レベルAA)は、次の通りです。

文字の種類	必要なコントラスト比	具体的なサイズの目安
通常サイズの文字	4.5:1以上	記事の本文など(一般的なブログの本文は16px前後で、これに該当します)
大きな文字	3:1以上	見出しなど(目安: 24px以上、太字なら19px以上)

自分のブログやサイトの本文が何pxか分からない場合も、多くのテーマでは本文サイズが16px前後に設定されていることが多いため、まずは「通常サイズ(4.5:1以上)」の基準で確認してみるとよいでしょう。

大きな文字の方が基準が緩いのは、文字が大きいほど多少コントラストが低くても判読しやすいためです。

正式な内容を日本語で確認したい場合は、WAIC(ウェブアクセシビリティ基盤委員会)によるWCAG公式日本語訳ページを参照してください。

実践のポイント

実際にコントラスト比を確認・改善する際の注意点と、よくある疑問をまとめます。

注意点・よくある間違い

「おしゃれに見えるから」という理由だけで薄いグレーの文字色を選び、数値を確認しないまま公開してしまうことがあります。見た目の印象だけで判断せず、必ずツールで数値を確認しましょう。
大きな文字の基準(3:1)と、通常サイズの文字の基準(4.5:1)を混同してしまうことがあります。本文と見出しでは基準が異なる点に注意しましょう。

Google Lighthouseでまとめてチェックする方法

WebAIM Contrast CheckerやStarkは、1組ずつ色を試すのに向いたツールです。

一方、ページ全体のコントラスト不足箇所をまとめて洗い出したい場合は、Google Chromeに標準搭載されている「Lighthouse」が便利です。追加のインストールが不要で、次の手順で使えます。

確認したいページをGoogle Chromeで開く。
ページ上で右クリックして「検証」を選ぶ(またはF12キーを押す)。
開いたパネル上部のタブから「Lighthouse」を選ぶ。
「カテゴリ」で「アクセシビリティ」にチェックが入っていることを確認し、「ページの読み込みを分析」ボタンをクリックする。
レポートが表示されたら、コントラストに関する指摘がないか確認する。基準を満たしていない要素があれば、該当箇所とあわせて教えてくれる。

「特定の1色を試したいならWebAIM Contrast CheckerやStark」「ページ全体をまとめてチェックしたいならLighthouse」というように使い分けるとよいでしょう。

よくある質問

Q. コントラスト比はどうやって確認すればいい?
A. 無料のコントラスト比チェックツールに、文字色と背景色それぞれのHEXカラーコード(#ffffffのように、6桁の英数字で色を表す表記のことです)を入力するだけで、自動的に数値を計算してくれます。定番のツールとしては、Web上で使える「WebAIM Contrast Checker」や、Figmaを使っているなら「Stark」というプラグインがよく使われています。また、Google Chromeなどのブラウザの開発者ツール(要素を右クリックして「検証」)でも、文字色を確認する際にコントラスト比が表示される場合があります。デザインを確定する前に、こうしたツールで確認する習慣をつけるとよいでしょう。
Q. 基準を下回るとどうなる?
A. 罰則があるわけではありませんが、一部のユーザーにとって読みにくいページになってしまいます。近年は、公共性の高いサイトを中心にアクセシビリティ対応が求められる場面も増えています。
Q. 「レベルAA」「レベルAAA」とは何ですか?
A. WCAGの基準には段階があり、AAが標準的な基準(通常文字4.5:1以上)、AAAはより厳しい基準(通常文字7:1以上)です。多くのWebサイトは、まずAA準拠を目指せば十分とされています。