ヘルプ:配色のコントラスト比

テンプレート:About テンプレート:How-to テンプレート:文書の要旨 本項では、アクセシビリティの観点から、適切なコントラスト比を定めるための方法を解説します。

アクセシビリティとコントラスト比

ウェブ上の配色については、アクセシビリティの観点から国際規格 (ISO) や日本国内規格 (JIS) が定められています。

• 日本国内規格（JIS規格「JIS X 8341-3:2010」）2010年制定
• 国際規格（ISO規格「ISO/IEC 40500:2012」）2012年制定

WCAG 2.0参照

WCAG2.0では、前景（文字色）と背景（背景色）のコントラスト比の数値基準を定めています。

本項では、WCAG2.0に基づくコントラスト比とその算出方法について解説します。

コントラスト比とは

• コントラスト比は、最大で21：0、最小で1:1の値を取ります。
• 「白地に黒文字」が21:0、「白地に白文字」が1:1となります。
• コントラスト比が大きい（高い）ほど読みやすくなります。

（例）

• ※ウィキペディアの標準的な背景色が完全な白（#FFFFFF）ではない場合もある点に注意してください。

背景色	前景色	見本	コントラスト比（C型）
#FFFFFF	#000000	見本	21.0テンプレート:0:1
#FFFFFF	#333333	見本	12.63:1
#FFFFFF	#595959	見本	テンプレート:07.00:1
#FFFFFF	#666666	見本	テンプレート:05.74:1
#FFFFFF	#767676	見本	テンプレート:04.54:1
#FFFFFF	#999999	見本	テンプレート:02.85:1
#FFFFFF	#FFFFFF	見本	テンプレート:01.0テンプレート:0:1

コントラスト比の4タイプ

色覚の4類型

コントラスト比は4つのタイプがあります。一般的に使われる1タイプと、色覚異常者向けの3タイプです。

• C型 - 一般色覚型
• P型 - 1型色覚（赤）
• D型 - 2型色覚（緑）
• T型 - 3型色覚（青）

C型色覚（一般型）では十分なコントラストを達成していても、他の色覚型では不十分な場合や、その逆の場合もあります。

• 配色によっては、色覚の型による差異が著しくなります。

背景色	文字色	C型	P型	D型	T型	見本
#00FF00	#0B0080	11.54:1 AAA	テンプレート:07.62:1 AAA	テンプレート:02.39:1 A	テンプレート:07.16:1 AA	見本
#FF0000	#FFFFFF	テンプレート:04.0テンプレート:0:1 A	20.02:1 AAA	16.39:1 AAA	テンプレート:03.98:1 A	見本
#000000	#FF0000	テンプレート:05.25:1 AA	テンプレート:01.04:1 A	テンプレート:01.27:1 A	テンプレート:05.25:1 AA	見本
#0000FF	#FF9B16	テンプレート:04.07:1 A	テンプレート:03.72:1 A	テンプレート:04.09:1 A	テンプレート:08.37:1 AAA	見本

コントラスト比の目標値

理想的なコントラスト比は7.0：1以上です。

• WCAG 2.0（W3C勧告）日本語訳

• 1.4.3 最低限のコントラスト：テキストおよび画像化された文字の視覚的な表現には、少なくとも 4.5：1 のコントラスト比をもたせる。ただし、次に挙げる場合は除く（レベル AA）
• 1.4.6 より十分なコントラスト：テキストおよび画像化された文字の視覚的な表現には、少なくとも 7：1 のコントラスト比がある。ただし、以下に挙げる場合は除く（レベル AAA）

つまり、以下のようになります。

適合レベル	解説	必要なコントラスト比
AAA	より十分	7.0:1 以上
AA	最低限	4.5:1 以上

文字サイズによる特例

テキストのコントラスト比の目標値には、テキストの大きさに依存する緩和規定があります。 テンプレート:SquoteH

• WCAG 2.0（W3C勧告）日本語訳

サイズの大きな（テキスト）：少なくとも18ポイント、又は14ポイントの太字。あるいは、中国語、日本語、及び韓国語 (CJK) のフォントは、それと同等の文字サイズ。

※日本語の全角文字の場合は、拡大教科書普及推進会議 第一次報告「第2章 拡大教科書の標準的な規格について」に基づき、22ポイント又は18ポイントの太字を「同等な」サイズとみなすのが妥当である。

• 1.4.3 最低限のコントラスト：（中略）大きな文字：サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。
• 1.4.6 より十分なコントラスト：（中略）大きな文字：サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 4.5:1 のコントラスト比がある。

• 日本語全角文字の場合

• 22ポイント以上の標準文字
• 18ポイント以上の太字

• 半角英数字などの場合

• 18ポイント以上の標準字体
• 14ポイント以上の太字

上記に該当する場合は、コントラスト比の判定基準が以下のようになります。

適合レベル	解説	必要なコントラスト比
AAA	より十分	4.5:1 以上
AA	最低限	3.0:1 以上

ただし、最終的に表示される文字のサイズは、ユーザー側の設定にも依存している点にも注意が必要です。

ツールを使って算出する

コントラスト比を算出するためのツールには以下のようなものがあります。（いずれも外部リンクである点に留意してください。）

• テンプレート:Lang - インストール不要のオンライン無料ツール。Foregroundに文字色を、Backgroundに背景色を入力するのみ。コントラスト比算出の他、WCAGのAA水準およびAAA水準を満たしているか判定可能。テンプレート:仮リンクによる運用。
• テンプレート:Lang - テンプレート:Langの草案アルゴリズムを使用
• カラー・コントラスト・アナライザー 2013J - WAT-C(Web Accessibility Tools Consortium)が開発し、株式会社インフォアクシアが日本語化したもの。Windows XP、Vista、7で動作検証済。（サポート終了）
• Firefoxアドオン

また、下記のカスタムJSを追加することもできます。

• 利用者:Waiesu/ContrastChecker.js

自力で算出する

参考： WCAG 2.0（W3C勧告）日本語訳

コントラスト比 (contrast ratio)：（L1＋0.05）/（L2＋0.05）

ここでは、L1は、明るいほうの色の相対輝度である。そして、L2は、暗いほうの色の相対輝度である。

相対輝度 (relative luminance)：最も暗い黒を0に、最も明るい白を1に正規化した色空間内の任意の点の相対的な明るさ。

注記1：sRGB色空間においては、色の相対輝度は、$L=0.2126\times R+0.7152\times G+0.0722\times B$と定義されており、R、G及びBは以下のように定義される：

$R_{sRGB}\le 0.03928$の場合$R=R_{sRGB}/12.92$、そうでない場合$R=((R_{sRGB}+0.055)/1.055{)}^{2.4}$

$G_{sRGB}\le 0.03928$の場合$G=G_{sRGB}/12.92$、そうでない場合$G=((G_{sRGB}+0.055)/1.055{)}^{2.4}$

$B_{sRGB}\le 0.03928$の場合$B=B_{sRGB}/12.92$、そうでない場合$B=((B_{sRGB}+0.055)/1.055{)}^{2.4}$

そして、R_sRGB、G_sRGB、及びB_sRGBは、次のように定義される：

$R_{sRGB}=R_{8bit}/255$

$G_{sRGB}=G_{8bit}/255$

$B_{sRGB}=B_{8bit}/255$

関連項目

• Help:色の使用 - Wikipedia:色の使用
• ウェブカラー - X11の色名称 - RGB

テンプレート

• 文字と背景に色をつける
  • Template:Font color
• 色の例として色つきボックスを表示する
  • Template:Color sample
  • テンプレート:仮リンク
  • Template:Swatch inline

ヘルプページ

• Wikipedia:アクセシビリティ#色
• Category:色を過剰に使用している記事
• Help:リンク色
• Help:JPEG画像を減色しPNG画像として保存する方法

ウィキペディア記事

• テンプレート:仮リンク
• ウェブカラー
• 色名一覧

外部リンク

• ウェブアクセシビリティ基盤委員会 (WAIC、Web Accessibility Infrastructure Committee)
• Web Content Accessibility Guidelines (WCAG) 2.0 W3C 勧告 2008年12月11日
• 岡山県 人権尊重の視点に立った印刷物作成の手引 p.8 見やすい背景色は？