Skip to content

解説書 達成基準 1.4.3:コントラスト (最低限) (レベル AA)

要約

目標
より多くの人がテキストを見られる。
何をすればよいか
テキストとその背景の間に十分なコントラストを提供する。
なぜそれが重要か
うすい色のテキストを読むことができない人がいる。

意図

この達成基準の意図は、コントラストを強化する支援技術を使用しなくても、中度のロービジョンの人又はコントラスト知覚に障害のある人がテキストを読めるように、テキストとその背景の間に十分なコントラストを提供することである。

視覚的なコンテンツを利用するすべての人にとって、可読性をよくするためには、テキストとその背景の相対輝度の間に適切な明暗のコントラストが必要となる。多様な視覚障害がコントラストの感度に大きく影響する可能性があり、色 (色相) に関係なく、より高い明暗のコントラストを必要とする。特定の色合いを区別できない人 (しばしば色覚異常と呼ばれる) にとって、色相と彩度は、読解力の評価において、読みやすさにほとんど又は全く影響しない。さらに、特定の色合いを区別できなくても、明暗のコントラストの知覚に悪影響を与えることはない。したがって、W3C の勧告では、色 (色相) が重要な要素にならないようにコントラストは計算される。

装飾的及び情報を伝えないテキストは除外される。例えば、背景を作成するためにランダムな単語が使用され、かつその単語を意味を変えずに並べ替え又は置換できる場合、これは装飾的であり、この達成基準を満たす必要はない。

より大きい及びより広い文字ストロークを持つテキストは、より低いコントラストでも読みやすい。したがって、より大きいテキストに対するコントラスト要件は、より低い。これにより、コンテンツ制作者は、より大きいテキストに対して幅広い色の選択肢を使用することができ、ページ、特にタイトルのデザインに役立つ。18 ポイントのテキスト又は 14 ポイントの太字のテキストは、より低いコントラスト比を要求するのに十分な大きさであると判断される (関連リソースにある "The American Printing House for the Blind Guidelines for Large Printing and The Library of Congress Guidelines for Large Print" を参照のこと)。「18 ポイント」と「太字」の両者は、異なるフォントでは異なる意味合いを持つこともあるが、極めて細い線のフォント又は特異なフォントを除き、十分である。非常に多くの様々なフォントがあるため、ここでは一般的な基準を用いることとして、細い線のフォント又は特異なフォントに関する注記を、サイズの大きなテキストの定義に付けている。

注記

この達成基準を評価する場合、フォントのポイント数は、ユーザエージェントから取得されるべきである、又はユーザエージェントが行う方法でフォントメトリックをもとに算出されるべきである。ポイント数は、CSS3 Values で定義されている CSS の pt サイズに基づいている。ポイント数と CSS ピクセルの比は 1pt = 1.333px であり、したがって 14pt と 18pt は約 18.5px と 24px に相当する。

画像編集アプリケーションによってデフォルトとなるピクセル密度が異なるため (例: 72ppi 又は 96ppi)、文字を特定のサイズで提示する場合に、画像編集アプリケーションでのフォントのポイントサイズを特定することは当てにならない。サイズの大きな文字画像を作成する場合、コンテンツ制作者は画面に表示される画像の文字が、おおよそ本文のテキストの標準サイズの 1.2em と 1.5em 又は 120％ と 150％ に相当することを確認することが望ましい。例えば、72ppi の画像の場合、サイズの大きな文字画像を利用者にうまく提示するために、コンテンツ制作者は約 19pt と 24pt のフォントサイズを用いる必要がある。

この達成基準で言及されている 3:1 及び 4.5:1 のコントラスト比は、閾値として扱われることを意図している。算出されたコントラスト比を達成基準のコントラスト比と比較する場合、算出された値は丸めるべきではない（例えば、4.499:1 は 4.5:1 という閾値を満たさない）。

注記

コンテンツ制作者はフォントのスムージング／アンチエイリアシングのユーザ設定を制御できないので、この達成基準を評価するときは、画面に表示されるテキストではなく、ユーザエージェントから取得した前景色と背景色、つまり基礎となるマークアップ及びスタイルシート取得した色を参照すること。

アンチエイリアシングが原因で、特に線の細いフォント又は特異なフォントは、ユーザエージェントによって、基礎となる CSS で定義された実際のテキストの色よりもずっとうすい色でレンダリングされることがある。このため、テキストのコントラスト比が名目上は達成基準を満たしていても、実際にはコントラストがかなり低いという状況が起こり得る。このような場合、ベストプラクティスは、コンテンツ制作者がより強く太い線を持つフォントを選ぶか、この達成基準の規範的要件を上回る前景色と背景色の組み合わせを目指すことである。

テキストに対するコントラストの要件は、文字画像 (ピクセルでレンダリングされ、画像フォーマットで保存された文字 - 達成基準 1.4.5 文字画像を参照) にも適用される。

この要件は、文字画像がテキストとして理解されることを意図した状況に適用される。たまたま道路標識が入った写真などの付随的なテキストはこの例外には含まれない。なんらかの理由で、すべての閲覧者に見えないように設計されているテキストも含まれない。企業のロゴなどの図案化されたテキストは、ページ上の機能の観点から取り扱われるべきであり、これは、テキストによる代替でコンテンツを含むことを保証するかもしれないし、保証しないかもしれない。ロゴ及びロゴタイプの範囲を超える企業の視覚的なガイドラインは含まれない。

この達成基準には、「意味のあるその他の視覚的なコンテンツを含む写真の一部分である」という例外がある。この例外は、特定の見た目にするためにテキストを置き換えるための文字画像から、テキストのある写真を区別することを意図している。

注記

文字画像は、画素に分解されてしまうので、テキストと同じようにきれいに拡大することができない。また、一部の利用者にとって必要となる文字画像の前景と背景のコントラスト及び色の組み合わせを変更することは困難である。したがって、可能な限り、テキストを用いることを勧めるが、それができない場合には、さらに高い解像度の画像を提供することを考慮すること。

この達成基準は、プレースホルダーテキストおよびオブジェクトにポインターをかざされたりキーボードフォーカスされた時に表示されるテキストを含め、ページ内のテキストに適用される。そのようなテキストを使用するのであれば、十分なコントラストを提供する必要がある。

この達成基準はテキストだけに適用されるが、同様の問題は、チャート、グラフ、ダイアグラム、及び他のテキストベースでない情報で提示されるコンテンツにおいても生じることであり、達成基準 1.4.11 非テキストのコントラストでカバーされている。

1.4.6 コントラスト (高度) も参照のこと。

コントラスト比を定めた論理的根拠

3:1 のコントラスト比は、[[ISO-9241-3]] 及び [[ANSI-HFES-100-1988]] で、標準的なテキスト及び視覚に対して推奨されている最低限のレベルである。この達成基準では、中程度の視力低下、先天性もしくは後天性の色覚異常、又は加齢に伴うコントラスト感度の低下によって生じるコントラストの低下を考慮するために、4.5:1 の比率が用いられている。

その根拠は、a) ANSI 規格において通常の観測者にとっての最低限の許容可能なコントラストとして 3:1 のコントラスト比が採用されていること、かつ b) 集団において、視力 20/40 (0.5) はおよそ 1.5 のコントラスト感度低下と関連しているという実証的知見 [[ARDITI-FAYE]] に基づいている。したがって、 視力 20/40 (0.5) の利用者には、3 * 1.5 = 4.5 : 1 のコントラスト比が必要になる。類似した実証的知見と同じ論理に従うと、視力 20/80 (0.25) の利用者には約 7:1 のコントラストが必要になる。この比率は、達成基準 1.4.6 で用いられている。

色相は、色覚異常 (先天性及び後天性の両方) をもつ利用者によって、通常の目の見える利用者とは異なる色及び相対的な輝度コントラストを結果としてもたらすように、異なって知覚される。このため、有効なコントラスト及び読みやすさは、人々によって異なる。しかし、色覚異常は非常に多様であるため、定量的なデータに基づく (コントラストのための) 有効で一般的な色の組み合わせを規定することは、実現不可能である。十分な輝度コントラストを要求することは、色の知覚から独立したコントラストを要求することによって、これに対応している。幸いにも、輝度の寄与のほとんどは、分光応答で大部分が重なる中波長及び長波長の受容体からのものである。その結果、有効な輝度コントラストが一般的に、特定の色覚異常に関係なく計算できる。ただし、赤色を知覚しにくい 1 型 2 色覚の人の場合、暗い色 (一般に黒に見える) に対して主に長波長の色を用いることは除く (この理由のために、WCAG ワーキンググループは、黒の背景色に赤の前景色を使うことを避ける参考達成方法を提供している)。詳細については、[ARDITI-KNOBLAUCH] [ARDITI-KNOBLAUCH-1996] [ARDITI] を参照のこと。

注記

認知の障害のある人は、コントラストの低い色の組み合わせ又は色相を必要とすることもある。そのため、コンテンツ制作者にコンテンツの前景色と背景色を調節するメカニズムを提供することを認め、それを推奨する。選択可能な組み合わせの中には、ここで指定されているより低いレベルのコントラストがあってもよい。ここで要求されている指定値に戻すことができるメカニズムが提供されていれば、この達成基準に反していることにはならない。

4.5:1 のコントラスト比は、約 20/40 (0.5) の視力に等しい視覚損失をもつ利用者によって通常経験されるコントラスト感度の低下を埋め合わせをするため、レベル AA に対して選択された。20/40 (0.5) は、80 歳前後の高齢者の典型的な視力として、よく報告される視力である。[[GITTINGS-FOZARD]]

7:1 のコントラスト比は、約 20/80 (0.25) の視力に等しい視覚損失をもつ利用者によって通常経験されるコントラスト感度の低下を埋め合わせをするため、レベル AAA に対して選択された。この程度の視覚損失を超える人は、通常、コンテンツにアクセスするために支援技術を使用する (そして、支援技術は通常、コントラストの強化と画面の拡大機能が組み込まれている)。したがって、7:1 のレベルは、一般に支援技術を使用していないロービジョンの利用者によって経験されるコントラスト感度の低下に対する補償を提供し、同様に色覚異常の利用者に対してもコントラストの強化を提供する。

注記

[ISO-9241-3] 及び [ANSI-HFES-100-1988] における計算は、本文のテキストのためのものである。それよりもはるかに大きいサイズのテキストに対しては、緩やかなコントラスト比が提供されている。

計算式に関する注記

RGB 値の非線形から線形への変換は、IEC/4WD 61966-2-1 [IEC-4WD] に基づいている。

コントラストの計算式 (L1/L2) は、[ISO-9241-3] 及び [ANSI-HFES-100-1988] 規格に基づいている。

ANSI/HFS 100-1988 規格では、L1 及び L2 の計算を含むために、周辺光からの寄与を必要とする。用いている .05 という値は、[IEC-4WD] の Typical Viewing Flare に基づいている。

この達成基準及びその定義では、ウェブコンテンツが光そのものを放たないという事実を反映するために、「輝度」ではなく、「コントラスト比」及び「相対輝度」という用語を用いている。コントラスト比は、コンテンツが表示されたときに生じる相対輝度の評価基準 (尺度) を与える。(比率なので無次元である)

注記

コントラスト比を用いてウェブコンテンツのコントラストを分析するツールの一覧は、関連リソースを参照のこと。

キーボードフォーカスを表示するための達成方法については、2.4.7 フォーカスの可視化も参照のこと。

アクティブではないユーザインタフェース コンポーネント

利用者が操作に使用できないユーザインタフェース コンポーネント (例: HTML で disabled になっているコントロール) は、コントラスト要件を満たす必要はない。アクティブではないユーザインタフェース コンポーネントは、視認できてもその時点では操作ができない。その一例はフォームの下部にある送信ボタンで、視認できるが、フォーム内の全ての必須フィールドが入力されるまでアクティブ化されないようなものである。

グレーのボタンに、コントラストのないグレーのテキストがある。
図 1 デフォルトのブラウザスタイルを使用した、アクティブではないボタン。

利点

  • ロービジョンの人は、背景とのコントラストがないテキストを読むのが困難なことがよくある。これは、コントラストをさらに低下させる色覚異常がある人の場合、深刻となりえる。テキストとその背景との間に最低限のコントラスト比を提供することで、たとえその人があらゆる色を見ることができなくても、テキストをより読みやすくすることができる。また、まれに色がまったく見えない人にも有用である。

関連リソース

リソースは、情報提供のみを目的としており、推奨を意味するものではない。

テクニック

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断するテクニック、又は複数のテクニックの組み合わせを表している。しかしながら、必ずしもこれらのテクニックを用いる必要はない。その他のテクニックについての詳細は、WCAG 達成基準のテクニックを理解するの「その他のテクニック」を参照のこと。

十分なテクニック

そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付のテクニック (又は、テクニックの組み合わせ) がある。

状況 A: 太字でないテキストが 18 ポイント未満、太字のテキストが 14 ポイント未満の場合:

状況 B: 太字でないテキストが少なくとも 18 ポイント以上、太字のテキストが少なくとも 14 ポイント以上の場合:

参考テクニック

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加のテクニックを検討することが望ましい。ただし、すべての状況において、すべてのテクニックが使用可能、又は効果的であるとは限らない。

失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。

重要な用語
支援技術 (assistive technology)

障害のある利用者の要件を満たすために、主流のユーザエージェントが提供する機能を超えた機能を提供するような、ユーザエージェントとして動作する、又は主流のユーザエージェントと共に動作するハードウェア及び／又はソフトウェア。

注記

支援技術が提供する機能としては、代替の提示 (例: 合成音声や拡大表示したコンテンツ)、代替入力手法 (例: 音声認識)、付加的なナビゲーション又は位置確認のメカニズム、及びコンテンツ変換 (例: テーブルをよりアクセシブルにするもの) などを挙げることができる。

注記

支援技術は、API を利用、監視することで、主流のユーザエージェントとデータやメッセージのやりとりをすることが多い。

注記

主流のユーザエージェントと支援技術との区別は、絶対的なものではない。多くの主流のユーザエージェントは、障害のある個人を支援する機能を提供している。基本的な差異は、主流のユーザエージェントが障害のある人もない人も含めて、広く多様な利用者を対象にしているのに対し、支援技術は、特定の障害のある利用者という、より狭く限られた人たちを対象にしているということである。支援技術により提供される支援は、対象とする利用者に特化した、よりニーズに適したものである。主流のユーザエージェントは、プログラムオブジェクトからのウェブコンテンツの抽出、マークアップの識別可能な構造への解釈といった、重要な機能を支援技術に対して提供する場合がある。

コントラスト比 (contrast ratio)

(L1 + 0.05) / (L2 + 0.05) ここでは、

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

注記

コントラスト比は、1～21 の範囲になりうる (通常は、1:1～21:1 と記述される)。

注記

コンテンツ制作者は、テキストのレンダリング (例: フォントのスムージングやアンチエイリアス) に関する利用者の設定を制御できないため、アンチエイリアスをオフにした状態でテキストのコントラスト比を評価してもよい。

注記

達成基準 1.4.3 及び 1.4.6 の目的上、コントラストは通常の使用においてテキストがレンダリングされるときに指定されている背景色に対して測定する。もし背景色の指定がない場合は、背景色には白を想定する。

注記

背景色は、テキストが通常の使用においてレンダリングされるときに背景となるコンテンツの色として指定された色である。テキストの色は指定されているが背景色が指定されていない場合、利用者のデフォルトの背景色は未知であり、コントラストが十分かどうかを評価することができないため、失敗となる。同じ理由で、背景色が指定されているがテキストの色が指定されていない場合も失敗となる。

注記

文字の周囲に縁取りがある場合、その縁取りがコントラストを強めることもあり、文字とその背景色におけるコントラストの計算に用いられる。文字の周囲の細い縁取りは文字として扱われる。文字の周囲の太い縁取りが、光彩のようになって、文字の内側の細部を塗りつぶしていれば、背景色として考慮されることになる。

注記

WCAG に適合しているか判断する場合は、典型的な提示において隣接するであろうと制作者が想定するコンテンツで指定された色の組み合わせについて評価しなければならない。制作者は、ユーザエージェントによる色の変更などのように通常とは異なる提示を考慮する必要はない。ただし、それが制作者のコードによって起こる場合は除く。

自然言語 (human language)

人間とコミュニケーションをとるために話される、書かれる、又は (視覚的もしくは触覚的な手段で) 手話にされる言語。

注記

手話も参照。

文字画像 (image of text)

特定の視覚的効果を得るために非テキスト形式 (例えば画像) でレンダリングされたテキスト。

注記

テキスト以外の部分が重要な視覚的コンテンツである場合、画像に含まれるテキストは該当しない。

サイズの大きなテキスト (large scale text)

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

注記

特別に細い線のフォント、又は文字の形が分かりにくくなるような独特の見た目や特徴のあるフォントは、コントラストが低い場合に特に読みづらい。

注記

ここでいう文字サイズは、コンテンツが提供される際のサイズであり、利用者によるサイズ変更は含まれない。

注記

利用者が目にする文字の実際のサイズは、コンテンツ制作者が指定したサイズと利用者のディスプレイあるいはユーザエージェントの設定の両方に依存している。多くの主流となっている本文テキストで用いられるフォントにおいて、14 ポイントと 18 ポイントは、1.2em と 1.5em、又は、 (本文フォントが 100％であると仮定して) デフォルトサイズの 120%と 150%に、おおよそ同等である。しかし、制作者は、使用する特定のフォントについて、このことをチェックしておく必要がある。フォントが相対単位で定義されている時、実際に表示される文字サイズのポイント数は、ユーザエージェントによって計算される。この達成基準について評価する時には、文字サイズのポイント数は、ユーザエージェントから取得されるべきであり、又はユーザエージェントが行うフォントの計算基準に基づいて計算するべきである。ロービジョンの利用者については、自分で適切な設定を選択することを想定している。

注記

フォントサイズを指定せずにテキストを用いる際は、サイズを指定していないテキストに対して主要ブラウザで用いられる最小のフォントサイズをそのテキストのサイズとみなすのが妥当であろう。もし、レベル 1 の見出しが、主要なブラウザで 14 ポイントの太字あるいはそれ以上のサイズでレンダリングされるならば、それは「サイズの大きな」テキストであると考えてよい。相対的な拡大縮小は、同様の方法でそのデフォルトのサイズから算出することが可能である。

注記

半角の英数字のテキストにおける 18 ポイント及び 14 ポイントのサイズは、拡大印刷の最小サイズ (14 ポイント) と標準的な大きい文字サイズ (18 ポイント) に基づいている。例えば、CJK 言語のようなその他の文字については、「同等な」サイズはその言語での拡大印刷の最小サイズと拡大印刷でその次に大きな標準のサイズとなる。

プログラムによる解釈 (programmatically determined)

支援技術を含む様々なユーザエージェントが抽出でき、利用者に様々な感覚モダリティで提示できるような形のデータがコンテンツ制作者によって提供されたとき、そのデータがソフトウェアによって解釈されること。

純粋な装飾 (pure decoration)

見栄えのためだけのもので、情報は提供せず、機能性も備えていないもの。

注記

テキストが純粋な装飾といえるのは、単語を並べ替え、又は置き換えても意図が変わらないときだけである。

相対輝度 (relative luminance)

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

注記

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

  • RsRGB <= 0.04045 の場合 R = RsRGB/12.92、そうでない場合 R = ((RsRGB+0.055)/1.055) ^ 2.4
  • GsRGB <= 0.04045 の場合 G = GsRGB/12.92、そうでない場合 G = ((GsRGB+0.055)/1.055) ^ 2.4
  • BsRGB <= 0.04045 の場合 B = BsRGB/12.92、そうでない場合 B = ((BsRGB+0.055)/1.055) ^ 2.4

そして、RsRGB、GsRGB、及び BsRGB は、次のように定義される:

  • RsRGB = R8bit/255
  • GsRGB = G8bit/255
  • BsRGB = B8bit/255

^ という記号は、指数演算子である (計算式は、[SRGB] を参考にしている)。

注記

2021 年 5 月以前は、定義にある 0.04045 の値が異なっていた (0.03928)。これは、古いバージョンの仕様から取り込んだものであり、現在は更新されている。本ガイドラインの文脈における計算には、実質的な影響はない。

注記

ウェブコンテンツを閲覧するのに今日用いられているほとんどすべてのシステムは、sRGB 符号化を前提としている。コンテンツを処理して表示するのに別の色空間が用いられている事が分かっているのでない限り、コンテンツ制作者は sRGB 色空間を用いて検証するべきである。もしその他の色空間を用いるのであれば、達成基準 1.4.3 を理解するを参照。

注記

表示時にディザリングが発生する場合は、元の色の値が用いられる。元々ディザリングがかけられている色については、用いられている色の平均値を用いるべきである (R の平均値、G の平均値、及び B の平均値)。

注記

コントラストと閃光を検証する際に、この計算を自動で行うツールが利用できる。

注記

MathML を用いて相対輝度の定義を与える別のページでもこの計算式を表示できる。

手話 (sign language)

意味を伝えるために、手と腕の動き、顔の表情又は身体の姿勢の組み合わせを用いる言語。

テキスト (text)

プログラムによる解釈が可能な文字の並びで、自然言語で何かを表現しているもの。

ユーザエージェント (user agent)

ウェブコンテンツを取得して利用者に提示するあらゆるソフトウェア。
ユーザインタフェース コンポーネント (user interface component)

コンテンツの一部分で、特定の機能を実現するための単一のコントロールとして利用者が知覚するもの。

注記

複数のユーザインタフェース コンポーネントが、単一のプログラム要素で実装されることもある。ここでいう「コンポーネント」は、プログラムの手法と結びついたものではなく、利用者が別々のコントロールとして知覚するものを指す。

注記

ユーザインタフェース コンポーネントには、フォーム要素、リンクだけでなく、スクリプトで生成されるコンポーネントが含まれる。

注記

ここでの「コンポーネント」又は「ユーザインタフェース コンポーネント」は、「ユーザインタフェース要素」とも呼ばれる。

テストルール

以下は、この達成基準の特定の側面に関するテストルールである。この特定のルールを使用して WCAG に適合しているかどうかを確認する必要はないが、これらのルールは定義され、承認されたテスト方法である。テストルールの使用については、WCAG 達成基準のテストルールを理解するを参照のこと。

Back to Top