コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

Help:配色のコントラスト比

本項では、アクセシビリティの観点から、適切なコントラスト比を定めるための方法を解説します。

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

[編集]

ウェブ上の配色については、アクセシビリティの観点から国際規格 (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.00: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.00: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.00: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以上です。


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

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

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

文字サイズによる特例

[編集]

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

サイズの大きな(テキスト):少なくとも18ポイント、又は14ポイントの太字。あるいは、中国語、日本語、及び韓国語 (CJK) のフォントは、それと同等の文字サイズ。
日本語の全角文字の場合は、拡大教科書普及推進会議 第一次報告「第2章 拡大教科書の標準的な規格について」に基づき、22ポイント又は18ポイントの太字を「同等な」サイズとみなすのが妥当である。
  • 1.4.3 最低限のコントラスト:(中略)大きな文字:サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。
  • 1.4.6 より十分なコントラスト:(中略)大きな文字:サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 4.5:1 のコントラスト比がある。
  • 日本語全角文字の場合
  • 22ポイント以上の標準文字
  • 18ポイント以上の太字
  • 半角英数字などの場合
  • 18ポイント[† 1]以上の標準字体
  • 14ポイント[† 2]以上の太字
  1. ^ 一般的には1.5emに相当するとされています。
  2. ^ 一般的には1.2emに相当するとされています。

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

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

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

ツールを使って算出する

[編集]

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

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

自力で算出する

[編集]
参考: WCAG 2.0(W3C勧告)日本語訳
コントラスト比 (contrast ratio):(L1+0.05)/(L2+0.05)
ここでは、L1は、明るいほうの色の相対輝度である。そして、L2は、暗いほうの色の相対輝度である。
相対輝度 (relative luminance):最も暗い黒を0に、最も明るい白を1に正規化した色空間内の任意の点の相対的な明るさ。
注記1:sRGB色空間においては、色の相対輝度は、と定義されており、R、G及びBは以下のように定義される:
の場合、そうでない場合
の場合、そうでない場合
の場合、そうでない場合
そして、RsRGB、GsRGB、及びBsRGBは、次のように定義される:

関連項目

[編集]

テンプレート

[編集]

ヘルプページ

[編集]

ウィキペディア記事

[編集]

外部リンク

[編集]