ページの本文へ

Hitachi

企業情報研究開発

色作成支援ツール(CSS3ジェネレーター)のカラーパレットで示されるマークの意味を説明します。

はじめに:相対輝度について

W3Cによって勧告されているWCAG2.0は、色覚特性に依存せず色の違いが識別できるかの判断指標として、相対輝度の比(以下、輝度比)を用いています。本ツールは相対輝度を計算し、WCAG2.0で示されている基準と照らし合わせて「○」「×」「/」「?」の各マークを表示しています。

○マークの意味

輝度比が十分あるので、色覚特性に依存せず識別できます。

文字の場合、背景との輝度比が4.5:1以上となっています

WCAG2.0の項目1.4.3(等級AA)において、文字と背景の輝度比は4.5:1を満たすよう記されています。なお、項目1.4.6(等級AAA)を満たす場合は、文字と背景の輝度比が7:1以上でなければなりません。
文字と背景の輝度比の基準に関しては例外として扱えるものもあるため、詳細はそれぞれの本文をご参照ください。

文字以外の場合、隣接する要素との輝度比が3:1以上となっています

WCAG2.0の項目1.4.1において、「色だけで情報を伝えてはならない」という主旨の指針が示されています。例えばリンクテキストとそれ以外の文字との違いを示すのに色しか用いていない場合(リンクテキストに下線などがない場合)は、リンクテキストと通常のテキストとの輝度比を3:1以上にするという方法が示されています(G183参照)。本ツールはこの考え方に基づき、輝度比が3:1以上あれば色覚特性に依存せず色の違いを識別できると判断しています。

×マークの意味

文字と背景の輝度比が4.5:1を満たしていないため、文字が読みにくい可能性があります(参照元は上述)。
文字の場合は「読みやすいかどうか」が重要であるため、「識別できるかどうか」の基準より輝度比が大きくなっています。

/マークの意味

文字以外の隣接する要素との輝度比が3:1を満たしていないため、識別できない可能性があります(参照元は上述)。
ただ、装飾のための枠線など、伝えるべき情報を持たない(識別できなくても問題にならない)要素もあるでしょう。

?マークの意味

主に以下2点の理由により、文字と背景の輝度比の機械的な判断が困難です。

  1. 文字と隣接する箇所のうち、最も輝度比が小さい部分を特定するのが困難であるため。
  2. グラデーションなど、ブラウザによって色の表示の仕方が異なるCSSを使用しているため。

相対輝度を求めるには色のRGB値を知る必要があります。本ツールでは、CSSの記述によってRGB値を判断し、相対輝度を計算しています。そのため、同じCSSの記述であってもブラウザによって表示するRGB値が異なる場合は、輝度比を示すことができません。
この場合、色覚シミュレーターの「輝度比近似グレースケール」を用いて色覚特性に依存せず識別できるかどうかをご確認ください。