このページの本文へ移動

Use of Color1.4.1 色の使用(レベルA)

色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。

出典:WAIC. “ 達成基準 1.4.1 を理解する新しいウィンドウを開きます ” WCAG 2.0 解説書(参照2024年6月1日)

概要

ウェブコンテンツが色に依存して重要な情報を伝えたり、機能を示したりすることを避けることを目的としています。具体的には、ユーザーが色覚異常や視覚障害を持っている場合でも、情報を確実に理解できるようにするため、エラーメッセージやリンクの強調表示、ボタンの有効/無効状態などを示す際に、色以外の方法(テキスト、アイコン、パターンなど)を併用することを求めています。これにより、すべてのユーザーにとってアクセスしやすく、理解しやすいウェブコンテンツの提供が可能となります。

このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。

課題に対する実践的な方法

状況A:特定の語句、背景、又は他のコンテンツの色を用いて情報を示している場合

色の違いをテキストでも提供(G14)

色で区別される情報をテキストとしても提供します。例えば、エラーメッセージを赤色のテキストで表示するだけでなく、「エラー: 入力に誤りがあります」という具体的なテキストを追加します。これにより、色覚障害者や色を見分けられないユーザーでも情報を正確に理解できます。

G14:色の違いで伝えている情報をテキストでも入手可能にする

フォームラベルにテキスト手がかりを追加(G205)

フォームコントロールのラベルが色で区別されている場合、そのラベルにテキストの手がかりを追加します。例えば、必須フィールドを赤いアスタリスクで示す場合、「* 必須項目」というテキストも併用します。これにより、すべてのユーザーがフォームを正しく理解し、入力できるようになります。

G205:色のついたフォームコントロールのラベルに対して、テキストによる手がかりを含める

文字色の違いに視覚的手がかりを追加(G182)

文字色の違いで情報を伝える場合、追加の視覚的な手がかりを提供します。例えば、重要なテキストを赤色にするだけでなく、太字や下線を使用して強調します。これにより、色の違いを認識しにくいユーザーにも情報が伝わりやすくなります。

G182:文字色の違いが情報を伝えるために使用される場合に、利用可能な追加の視覚的な手がかりを確保する

リンクとコントロールにコントラストと手がかりを提供(G183)

色のみでリンクやコントロールを特定する場合、周囲のテキストと少なくとも3:1のコントラスト比を確保し、リンクやコントロールがフォーカスされたときに追加の視覚的な手がかりを提供します。例えば、リンクテキストを青色にするだけでなく、下線を引き、フォーカス時には背景色を変えるなどの方法を用います。これにより、視覚的にアクセシブルなデザインが実現します。

G183:色が単独でリンク又はコントロールを特定する場所で、周囲のテキストと一緒に3:1のコントラスト比を使用し、そのリンク又はコントロールのフォーカスに追加の視覚的な手がかりを提供する

状況B:情報を伝える画像の中で色を用いている場合

色とパターンの併用(G111)

情報を伝えるために色を使用する場合、パターンや形状も併用することで、色だけに依存しない情報伝達を実現します。

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

色の違いをテキストでも提供(G14)

色の違いで伝えている情報を画像のキャプションや代替テキストとして提供することで、画像の内容がすべてのユーザーにとって理解しやすくなります。

G14:色の違いで伝えている情報をテキストでも入手可能にする

まとめ

達成基準 1.4.1を理解し、適用することで、色覚異常や視覚に障害のあるユーザーを含む、すべてのユーザーにとってアクセスしやすいウェブコンテンツを作成することができます。実践的な方法を取り入れることで、アクセシビリティの高いウェブサイトを構築する一助となります。

WCAG 2.0とその翻訳文書の利用について

本ページの内容は、「Web Content Accessibility Guidelines (WCAG) 2.0新しいウィンドウを開きます」、「WCAG 2.0 解説書新しいウィンドウを開きます」および「WCAG 2.0 達成方法集新しいウィンドウを開きます」からの引用を含んでいます。引用された内容は、W3CおよびWAICによって公開されており、以下のクリエイティブ・コモンズライセンスに基づいて使用されています。これらのガイドラインを参考にしつつ、ウェブアクセシビリティの向上に向けた具体的な取り組みを分かりやすく説明しています。

WCAG 2.0

この作品はクリエイティブ・コモンズ 表示 4.0 国際ライセンス新しいウィンドウを開きますの下に提供されています。

WCAG 2.0 解説書及び達成方法集

この作品はWCAG 2.0 解説書及び達成方法集からの引用を含みます。翻訳はWAICによって提供されており、文書のステータスは「勧告」です。なお、この文書の正式版はあくまでW3Cのサイト内にある英語版であることにご注意ください。

Contactお問い合わせ

当社ではウェブアクセシビリティ診断を提供しております。すべてのユーザーにアクセスできるウェブサイトを目指して、一緒に取り組みましょう。診断のご依頼や詳細については、お気軽にご連絡ください。

お問い合わせ