WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

G111: 色とパターンを併用する

適用(対象)

画像をサポートするウェブコンテンツ技術全て

これは、次の達成基準に関連する実装方法である:

解説

この実装方法の目的は、非テキストコンテンツの中で情報を伝達するために色の違いを用いている場合に、色に依存することなく同じ情報を伝達するためにパターン(模様)を併用することである。

事例

事例 1

不動産会社のサイトに、米国のいくつかの地域における平均住宅価格の棒グラフがある。それぞれの地域を表す棒は、異なる色とパターンになっている。色とパターンの色とのコントラスト比は十分にあり、達成基準1.4.1を満たしている。凡例にもそれぞれの棒が識別できるように、同じ色とパターンが使用されている。

事例 2

交通システムのオンライン地図には路線が色分けされている。それぞれの路線上の停車場は菱形、正方形又は円など、区別しやすいアイコンになっており、路線を区別しやすくしている。

事例 3

プロセスを完了するまでのインタラクティブな一連の手順を示すフローチャートがある。フローチャートでは、緑色の背景に破線の矢印で条件を満たした場合に進む次のステップを示しており、赤の背景に点線の矢印で条件を満たしていない場合に進む次のステップを示している。線と背景色には達成基準1.4.1を満たす十分なコントラストがある。

事例 4

コンテンツにはインタラクティブなゲームがある。4人分のゲームのコマは、色とパターンの両方を使っておりそれぞれ識別できるようになっている。

参考リソース

この実装方法に関するリソースは、今のところない。

検証

チェックポイント

ウェブページ上にある情報を伝達するために色の違いを用いている画像に対して:

  1. 色を用いて伝達されている情報の全てに、色に依存しないパターンも併用している。

判定基準

注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。