LEARN BY EXAMPLE
1.4.1 色の使用 レベル A
色がなくても、意味が伝わる。
概要
色で伝えている意味を、文字や形などでも伝えます。 例えば、入力が必要な項目には、色に加えて「必須」と表示します。
同じフォームで、比べてみましょう。
利用者が困る例 色だけで伝える
イベントのお申し込み
赤字の項目は必須です。
- 氏名
- 例:山田 太郎
- 会社名
- 例:サンプル株式会社
どちらを入力すればいい?
色の違いがわからないと、必須の項目を見分けられません。
改善した例 文字でも伝える
イベントのお申し込み
「必須」の項目を入力してください。
- 氏名 必須
- 例:山田 太郎
- 会社名 任意
- 例:サンプル株式会社
「氏名は必須」とわかる。
色に加えて文字があるので、入力の要否を判断できます。
達成できないと起こる問題の例
イベントの申込フォームで、氏名は赤字、会社名は黒字。「赤字の項目は必須です」とだけ説明されています。
色を見分けにくい利用者はどちらを必ず入力するのか判断できません。項目名を読めても、入力に必要な情報が足りない状態です。
達成するための改善例
同じフォームの氏名に「必須」、会社名に「任意」と表示します。色の違いがわからなくても、文字から入力の要否を判断できます。
色を使い続けてもかまいません。 この例では色に文字を添えることで、意味を伝える手がかりを増やしています。
確認のポイント
- 必須・エラー・選択中などの状態が色だけで示されていませんか。
- 色についての説明を読んだうえで、対象の項目を見分けられますか。
- グラフや予定表などでも、項目名・模様・記号などから意味がわかりますか。
条件と補足
どんなときに確認する?
色に意味を持たせて、情報・操作・状態などを区別している場面です。意味の区別に使っていない装飾色まで、すべて文字で説明する必要はありません。
「必須・任意」はこの教材で選んだ方法
この例では初めて見た人にも伝わりやすいよう、文字で明示しています。すべての任意項目に「任意」と書くこと自体が、この達成基準で必須という意味ではありません。記号を使う場合も、その意味がわかる説明を添えます。
色の使用とコントラストは別の確認
「文字を読める明るさの差があるか」と「色以外でも意味がわかるか」は、別々に確認します。本文の文字のコントラストは主に1.4.3で扱います。
明るさの差を追加の手がかりとして扱えるケースもあります。ただし、特定の色の識別が必要な情報には別の視覚的な手がかりが必要です。詳しい条件は公式解説を参照してください。
読み上げ対応も別に確認
この基準で必要なのは、画面を見ている人にも伝わる手がかりです。読み上げ専用の説明だけを加えても、画面上の色だけによる区別は解消しません。フォームの必須状態を支援技術へ伝える実装も、関連する基準と併せて確認します。
この改善例はこのフォームの必須表示に関するものです。フォームやサイト全体のWCAG適合を示すものではありません。
参照資料
- WCAG 2.2 本体:1.4.1 Use of Color(要件)
- WAIC:1.4.1 色の使用の解説(日本語訳)
- W3C:Understanding 1.4.1(英語公開版)
- W3C:G14 色で伝える情報をテキストでも提供する方法(実装例)
テクニックは達成する方法の例です。特定のテクニックを採用することだけが必須ではありません。
出典の最終確認: 2026-11-08。画面と説明文は、この教材のために作った例です。