Help:配色のコントラスト比
表示
この文書は手引き書です。ウィキペディア日本語版での活動の参考にされていますが、方針やガイドラインではありません。 |
この文書の要旨: コントラスト比は7.0:1以上が理想的です。これを算出するための外部ツールもあります。 |
本項では、アクセシビリティの観点から、適切なコントラスト比を定めるための方法を解説します。
アクセシビリティとコントラスト比
[編集]ウェブ上の配色については、アクセシビリティの観点から国際規格 (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 :1#FFFFFF #333333 見本 12.63:1 #FFFFFF #595959 見本 7.00:1 #FFFFFF #666666 見本 5.74:1 #FFFFFF #767676 見本 4.54:1 #FFFFFF #999999 見本 2.85:1 #FFFFFF #FFFFFF 見本 1.0 :1
コントラスト比の4タイプ
[編集]コントラスト比は4つのタイプがあります。一般的に使われる1タイプと、色覚異常者向けの3タイプです。
- C型 - 一般色覚型
- P型 - 1型色覚(赤)
- D型 - 2型色覚(緑)
- T型 - 3型色覚(青)
C型色覚(一般型)では十分なコントラストを達成していても、他の色覚型では不十分な場合や、その逆の場合もあります。
- 配色によっては、色覚の型による差異が著しくなります。
背景色 文字色 C型 P型 D型 T型 見本 #00FF00 #0B0080 11.54:1
AAA 7.62:1
AAA 2.39:1
A 7.16:1
AA見本 #FF0000 #FFFFFF 4.0 :1
A20.02:1
AAA16.39:1
AAA 3.98:1
A見本 #000000 #FF0000 5.25:1
AA 1.04:1
A 1.27:1
A 5.25:1
AA見本 #0000FF #FF9B16 4.07:1
A 3.72:1
A 4.09:1
A 8.37:1
AAA見本
コントラスト比の目標値
[編集]理想的なコントラスト比は7.0:1以上です。
|
つまり、以下のようになります。
適合レベル | 解説 | 必要なコントラスト比 |
AAA | より十分 | 7.0:1 以上 |
AA | 最低限 | 4.5:1 以上 |
文字サイズによる特例
[編集]テキストのコントラスト比の目標値には、テキストの大きさに依存する緩和規定があります。
|
- 日本語全角文字の場合
- 22ポイント以上の標準文字
- 18ポイント以上の太字
- 半角英数字などの場合
上記に該当する場合は、コントラスト比の判定基準が以下のようになります。
適合レベル | 解説 | 必要なコントラスト比 |
AAA | より十分 | 4.5:1 以上 |
AA | 最低限 | 3.0:1 以上 |
ただし、最終的に表示される文字のサイズは、ユーザー側の設定にも依存している点にも注意が必要です。
ツールを使って算出する
[編集]コントラスト比を算出するためのツールには以下のようなものがあります。(いずれも外部リンクである点に留意してください。)
- Color Contrast - インストール不要のオンライン無料ツール。Foregroundに文字色を、Backgroundに背景色を入力するのみ。コントラスト比算出の他、WCAGのAA水準およびAAA水準を満たしているか判定可能。Deque Systemsによる運用。
- Colour Contrast Analyser - World Wide Web Consortiumの草案アルゴリズムを使用
- カラー・コントラスト・アナライザー 2013J - WAT-C(Web Accessibility Tools Consortium)が開発し、株式会社インフォアクシアが日本語化したもの。Windows XP、Vista、7で動作検証済。(サポート終了)
- Firefoxアドオン
また、下記のカスタム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は、次のように定義される:
関連項目
[編集]- Help:色の使用 - Wikipedia:色の使用
- ウェブカラー - X11の色名称 - RGB
テンプレート
[編集]- 文字と背景に色をつける
- 色の例として色つきボックスを表示する
ヘルプページ
[編集]ウィキペディア記事
[編集]外部リンク
[編集]- ウェブアクセシビリティ基盤委員会 (WAIC、Web Accessibility Infrastructure Committee)
- Web Content Accessibility Guidelines (WCAG) 2.0 W3C 勧告 2008年12月11日
- 岡山県 人権尊重の視点に立った印刷物作成の手引 p.8 見やすい背景色は?