「1.4.1 色の使用」が求めること
WCAGは、ウェブコンテンツを利用しやすくするためのガイドラインであり、WCAG 2.2の全体像を理解すると各達成基準の位置づけがつかみやすくなります。
達成基準「1.4.1 色の使用」はLevel Aに位置づけられ、情報、操作、入力を促す手がかり、要素の違いを色だけで伝えないことを求めています。
色だけに頼らないとは、色を使わないという意味ではありません。
色と同じ意味を伝える文字、記号、下線、輪郭、模様などを併用し、色の違いを見分けにくい場合でも内容を判断できるようにします。
色だけでは情報が伝わらない場面
色の違いが情報の唯一の手がかりになっていると、色を区別しにくい人やモノクロ表示を使う人は意味を判断できないことがあります。
- 赤いラベルだけで必須項目を示している。
- 青い文字だけで本文とリンクを区別している。
- 棒グラフの項目を色だけで見分けるようにしている。
- リンクやボタンのフォーカス状態を色の変化だけで示している。
設計時には「色が見えなくても、同じ意味を読み取れるか」を確認します。
色以外の手がかりを加える実装例
必須項目を文字でも示す
ラベルを赤くするだけでは、どの項目が必須なのかを色から推測しなければなりません。
「必須」という文字をラベル内に置けば、色を判別できない場合にも入力条件が伝わります。
色だけに頼る例
<p>赤字の項目は必須です。</p>
<label for="name" style="color: red;">名前</label>
<input type="text" id="name" name="name">文字を併用する例
<label for="name">名前（必須）</label>
<input type="text" id="name" name="name" required>アスタリスクを使う場合も、記号だけを置かず「*は必須項目を示します」と近くで説明します。
入力欄全体の設計は、フォームの入力支援とエラー設計もあわせて確認すると整理しやすくなります。
リンクに下線と具体的な文言を使う
本文中のリンクを色だけで区別すると、リンクの範囲を見つけにくくなります。
下線を付け、リンク先の内容が伝わる文言にすると、色以外の見た目と文章の両方からリンクを識別できます。
色だけに頼る例
<a href="/details" style="color: blue; text-decoration: none;">こちら</a>下線と具体的な文言を使う例
<a href="/details" style="text-decoration: underline;">WCAG 2.2の詳しい説明</a>グラフに項目名、数値、模様を加える
「赤は売上、青は利益」と色だけで凡例を作ると、二つの棒を区別できない場合があります。
グラフ本体に項目名や数値を表示し、必要に応じて模様も使えば、色を見分けなくても対応関係を確認できます。
.sales-bar {
background-color: red;
background-image: repeating-linear-gradient(
45deg,
black 0,
black 5px,
transparent 5px,
transparent 10px
);
}
.profit-bar {
background-color: blue;
background-image: repeating-linear-gradient(
-45deg,
black 0,
black 5px,
transparent 5px,
transparent 10px
);
}画像の代替テキストも「赤は売上、青は利益」と色の対応だけを書くのではなく、画像が伝える内容を記述します。
<img src="chart.png" alt="売上100万円、利益50万円を比較した棒グラフ">代替テキストの役割と書き分けは、alt属性の基本と代替テキストの書き方で詳しく解説しています。
代替テキストを直すだけでは、画像を目で見る利用者への手がかりは増えないため、グラフ本体のラベルや模様もあわせて整えます。
フォーカス状態を輪郭でも示す
リンクやボタンにフォーカスしたときは、文字色の変化だけでなく、アウトラインや下線も表示します。
a:focus {
outline: 2px dashed blue;
outline-offset: 2px;
text-decoration: underline;
}この例では、輪郭と下線が加わるため、色の変化を判別できなくてもフォーカス位置を見つけやすくなります。
公開前の確認項目
- 必須、エラー、選択済みなどの状態を文字や記号でも示しているか。
- 本文中のリンクを下線などで区別できるか。
- グラフや図の項目をラベル、数値、模様でも判別できるか。
- フォーカス状態が輪郭や下線でもわかるか。
- 色を見ない状態でも、画面から同じ意味を読み取れるか。
色を補助として使う設計へ
「1.4.1 色の使用」への対応は、色を取り除くことではなく、色を唯一の手がかりにしないことです。
文字、記号、下線、輪郭、模様を場面に応じて組み合わせると、情報と操作方法をより多くの利用者に伝えやすくなります。
当社では、ウェブアクセシビリティ対応を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。
機能や導入方法はサービスページでご確認ください。