GTM-MML4VXJ
Skip to main content
  1. ホーム >
  2. 企業情報 >
  3. 事業方針 >
  4. 技術・研究開発・デザイン >
  5. デザイン >
  6. ユニバーサルデザイン >
  7. 7.1.4.3 最低限のコントラストに関する達成基準

7.1.4.3 最低限のコントラストに関する達成基準

テキスト及び画像化された文字の視覚的な表現には、少なくとも4.5:1 のコントラスト比がなければならない。ただし、次の場合は除く。

a) 大きな文字
サイズの大きなテキスト及びサイズの大きな画像化された文字には、少なくとも3:1 のコントラスト比がある。
b) 附随的
テキスト又は画像化された文字において、次の場合はコントラストの要件は該当しない。アクティブではないユーザインタフェースコンポーネントの一部である、装飾だけを目的にしている、だれ(誰)も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。
c) ロゴタイプ
ロゴ又はブランド名の一部である文字には、コントラストの要件はない。

引用元:JIS X 8341-3:2010「高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」

解説

情報を伝えている文字(「テキスト」及び「画像化された文字」)と背景の色の「コントラスト比」を少なくとも4.5:1以上にする必要があります。本達成基準が適用されるのは文字だけですが、文字以外で情報を伝えている図表やグラフなどでも可能な限り「コントラスト比」を確保することが推奨されています。

また、サイズの大きな文字の場合には、コントラストが若干弱くても読みやすいとされているため、3:1 以上の「コントラスト比」があればよく、次のような文字が該当します。

  • 日本語、中国語、韓国語:22ポイント以上(半角英数字:18ポイント以上)
  • 日本語、中国語、韓国語:18ポイント以上の太字(半角英数字:14ポイント以上の太字)

ただし、次のような文字は本達成基準は適用されず、「コントラスト比」の要件はありません。

  • アクティブではないフォーム・コントロール(例:非活性のボタン)
  • 装飾を目的にした文字
  • 写真の一部に写っている文字
  • 企業名、ブランド名、製品名などのロゴタイプ

例えば、写真を背景にする場合、文字の背景が様々な色になることがあります。その場合には、文字の周囲を「コントラスト比」が十分となる色で縁取ったり、文字の部分にだけ「コントラスト比」が十分となる色の背景色を用いたりするなどの工夫をすることによって、「コントラスト比」を確保することができます。

なお、本達成基準で用いられている「コントラスト比」は、W3Cの "WCAG 2.0" で定められている計算式を用いて算出することができます。実際に「コントラスト比」を確認する際には、この計算式を採用している以下のツールを用いることによってチェックすることが可能です。

チェックツール

事例と実装

良い例 1:コントラスト比が4.5:1以上

スクリーンショット:コントラスト比が4.5:1以上ある赤字

文中で強調されている文字の赤色(#CE0000)と背景色(#FFFFFF)とのコントラスト比が5.8:1あり、コントラスト比が十分にある。

悪い例 1:コントラスト比が4.5:1未満

スクリーンショット:コントラスト比が4.5:1以上ない赤字

文中で強調されている文字の赤色(#FF0000)と背景色(#FFFFFF)とのコントラスト比が4.0:1しかなく、コントラスト比が不十分である。

良い例 2:縁取りした文字

スクリーンショット:縁取りをしてコントラスト比を確保した写真上の文字

写真を背景にしていて、部分的にコントラスト比が不十分になる箇所があるが、コントラスト比を確保した色で文字を縁取ることによって、4.5:1以上のコントラスト比を確保している。

良い例 3:背景色をつけた文字

スクリーンショット:コントラスト比を確保した背景色を敷いた写真上の文字

写真を背景にしていて、部分的にコントラスト比が不十分になる箇所があるが、コントラスト比を確保した色の背景を敷くことによって、4.5:1以上のコントラスト比を確保している。

悪い例 2:写真上の文字

スクリーンショット:部分的にコントラスト比が不十分な写真上の文字

写真では様々な色が背景になるために、単一の文字色ではコントラスト比が確保できない。

参考情報

関連する達成基準

等級AA