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

基本の理解

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

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

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

「4.5:1」は「4.5対1」と読み、右側はいつも1です。

左側の数字が大きいほど明暗の差が大きく、文字がくっきり見える、と覚えておけば大丈夫です。

最大が21:1なのは、真っ白と真っ黒が画面に表示できる一番明るい色と一番暗い色で、これ以上明るさの差を広げられないためです。

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

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

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

色の名前のあとに付いている「#FFFFFF」のような表記は、カラーコード(HEXカラーコード)と呼ばれる、色を6桁の英数字で表した識別番号です。

このあと紹介するチェックツールでは、このカラーコードを入力して数値を確かめます(仕組みはカラーコードとは?で解説しています)。

CSSを書く方向けに補足すると、上の3つの文字色は次のように指定できます(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以上	見出しなど(18ポイント=約24px以上、太字なら14ポイント=約18.7px以上)

表の「px(ピクセル)」は、画面上で文字の大きさなどを表す単位です。

WCAGでは大きな文字を「18ポイント以上、または14ポイント以上の太字」と定めており、Webでよく使うpxに直すと表の数値になります。

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

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

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

ボタンや入力欄の枠線は3:1が目安

コントラスト比の基準は、文字だけのものではありません。

WCAGでは、ボタンの形、入力欄の枠線、アイコンなど、見分けられないと操作に困る文字以外の部品にも、周りの色と3:1以上の差をつけるよう定めています。

左の入力欄は、明るい場所や画面の設定によっては枠線が見えず、どこに入力すればよいか分からなくなる

文字の4.5:1に比べると基準はゆるやかですが、薄すぎる枠線や淡い色のボタンは見落とされがちなので注意しましょう(WAICによる達成基準1.4.11「非テキストのコントラスト」の日本語訳)。

リンクやボタンの色の決め方はリンク・ボタンなどのUIカラーとは?、色以外の手がかりも添える考え方は色だけに頼らないデザインとは?で解説しています。

コントラスト比の確かめ方と直し方

ここからは、無料のツールでコントラスト比を確かめる方法と、基準に届かなかったときの直し方を見ていきましょう。

1組ずつ確かめるならWebAIM Contrast CheckerやStark

文字色と背景色の組み合わせを1組ずつ確かめるなら、無料のチェックツールに2つのカラーコードを入力するだけで、自動的に数値を計算してくれます。

定番のツールとしては、Web上で使える「WebAIM Contrast Checker」や、Figmaを使っているなら「Stark」というプラグインがよく使われています。

WebAIM Contrast Checkerでは、文字色(Foreground)と背景色(Background)の欄にカラーコードを入れると、コントラスト比と、レベルAA・AAAの基準を満たしているか(Pass/Fail)が表示されます。

ページ全体をまとめて確かめるならLighthouse

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

追加のインストールが不要で、次の手順で使えます。

1. 確認したいページをGoogle Chromeで開く。
2. ページ上で右クリックして「検証」を選ぶ(またはF12キーを押す)。
   英語やコードがたくさん並んだ画面(デベロッパーツール)が開きますが、見るだけでページが壊れることはないので安心してください。
3. 開いたパネル上部のタブから「Lighthouse」を選ぶ。
   見当たらないときは、タブの並びの右端にある「»」をクリックすると出てきます。
4. カテゴリで「Accessibility」(アクセシビリティ)にチェックが入っていることを確認し、「Analyze page load」(ページの読み込みを分析)ボタンをクリックする。
   表示が日本語になっている場合は、同じ位置にある日本語の項目を選んでください。
5. レポートが表示されたら、コントラストに関する指摘がないか確認する。
   基準を満たしていない要素があれば、該当箇所とあわせて教えてくれる。

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

Lighthouseの詳しい使い方やスコアの見方は、Google Lighthouseとは?で、見本ページと動画を使って解説しています。

ただし、画像の中の文字や写真の上に重ねた文字は、ツールでは正しく判定できないことがあるので、目で見ても確かめましょう。

基準に届かないときの直し方

ツールで基準に届かないと分かったら、文字色と背景色の明るさの差を広げます。

方法は、文字色を濃くするか、背景色を明るくする(暗い背景なら、文字色を明るくするか背景色を暗くする)かの2つです。

見た目の印象はほとんど変えずに、数値だけを基準に届かせた例

上の例のように、ほんの少し調整するだけで基準に届くことも多いので、色の雰囲気を大きく変える必要はありません。

ブランドカラーのように色みを変えたくない場合は、色相(色み)はそのままに、明るさだけを下げた濃い色を作って文字やボタンに使います(作り方はブランドカラーをWebに展開する方法とは?で解説しています)。

WebAIM Contrast Checkerなら、色の欄の下にある明るさ(Lightness)のスライダーで少しずつ色を変えながら、Passになる色を探せます。

なお、ここで紹介したのはあくまで「決めた色の組み合わせが基準を満たしているか」を確認するツールです。

配色そのものを一から考えたい場合は、Adobe ColorやCoolorsなどの配色ジェネレーターも役立ちます。使い方は配色ジェネレーターを紹介した記事で詳しく解説しています。

実践のポイント

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

注意点・よくある間違い

• 「おしゃれに見えるから」という理由だけで薄いグレーの文字色を選び、数値を確認しないまま公開してしまうことがあります。
  見た目の印象だけで判断せず、必ずツールで数値を確認しましょう。
• 大きな文字の基準(3:1)と、通常サイズの文字の基準(4.5:1)を混同してしまうことがあります。
  本文と見出しでは基準が異なる点に注意しましょう。
• 文字ばかり確認して、ボタンの形や入力欄の枠線の薄さを見落としてしまうことがあります。
  文字以外の部品も、周りの色と3:1以上の差があるか確かめましょう。

よくある質問

• Q. 「レベルAA」「レベルAAA」とは何ですか?自分のサイトはどちらを目指せばいい?
  A. WCAGの基準には段階があり、AAが標準的な基準(通常文字4.5:1以上)、AAAはより厳しい基準(通常文字7:1以上)です。
  一般的なブログやWebサイトなら、まずはAAを目指せば十分です。
  日本の規格(JIS X 8341-3)に沿って対応する自治体などの公共サイトも、AAを目標にしています。
• Q. 基準を下回るとどうなる?
  A. 罰則があるわけではありませんが、一部のユーザーにとって読みにくいページになってしまいます。
  近年は、公共性の高いサイトを中心にアクセシビリティ対応が求められる場面も増えています。
• Q. Chromeの開発者ツールでも確認できる?
  A. 確認したい文字を右クリックして「検証」を選び、文字色のカラーコードの横にある小さな色の四角をクリックすると、コントラスト比が表示される場合があります。
  ツールを開かずにその場で1組だけ確かめたいときに便利です。

まとめ

コントラスト比とは、文字色と背景色の明るさの差を数値化したものです。

国際基準であるWCAGでは、通常サイズの文字で4.5:1以上、大きな文字で3:1以上、ボタンや枠線などの部品で3:1以上という基準(レベルAA)を定めています。

基準に届かないときは、文字色を少し濃くするか背景色を明るくするだけで解決することがほとんどです。

まずは自分のサイトの本文の文字色と背景色のカラーコードをWebAIM Contrast Checkerに入れて、4.5:1を超えているか確かめてみてください。