色だけに頼らない
意味を伝えるため、色にアイコン、テキスト、形状を組み合わせます。
「色だけに頼らない」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
色が見えないこともある
多くのユーザーには、選んだ赤と緑がほとんど同じに見えます。意味を伝えるために色だけを使うと、ユーザーは推測するしかありません。
色覚異常は珍しくない
男性のおよそ12人に1人は、何らかの色覚異常があります。これはまれな例外ではなく、ユーザーの大きな割合です。
赤と緑の落とし穴
典型的な間違いは、多くのユーザーに同じように見える赤いエラーと緑の成功表示です。赤と緑の混同は、圧倒的に最も一般的なタイプです。
基本ルール
WCAGの基準1.4.1では、情報を伝える手段として色を唯一の方法にしてはいけないと定めています。必ず別の手がかりも加えてください。
テキストラベルを追加する
最も簡単な対策は言葉です。赤いフィールドにエラーというラベルを添えれば、色が見えなくても意味が伝わります。
アイコンや図形を追加する
チェックマーク、警告の三角形、Xなどは形によって意味を伝えます。これで、グレースケールでも成功とエラーを区別できます。
リンクには色相以外も必要
グレーの段落内にある青いリンクは、一部のユーザーには見えなくなることがあります。下線を追加し、色に頼らなくてもリンクが分かるようにしてください。
グラフは大きな問題になりやすい
系列を色だけで区別するグラフは危険です。各線や領域にパターン、直接ラベル、または異なる形を追加してください。
正しいフォーム検証
不正なフィールドを赤い境界線だけで示してはいけません。テキストのエラーメッセージとアイコンも追加し、誰にでも何が失敗したのか分かるようにしてください。
グレースケールで確認する
簡単な確認方法です。デザインをグレースケールで表示してみましょう。それでも状態やリンクを区別できるなら、色だけに頼っていません。
下線を追加したリンク
下線を残すことで、色の違いを認識できないユーザーにもリンクが明確に伝わります。
a {
color: #0b5fff;
text-decoration: underline;
}クイックチェック
フォームエラーを表示する最も安全な方法を選んでください。
振り返り：色以外の手がかり
色だけを唯一の手がかりにしてはいけないことを学びました。テキスト、アイコン、形、下線などを追加して、誰にでも意味が伝わるようにします。次は、ツールを使ってコントラストを確認します。🌈
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「色だけに頼らない」レッスンは無料ですか？
はい。「色だけに頼らない」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「色だけに頼らない」で何を学びますか？
意味を伝えるため、色にアイコン、テキスト、形状を組み合わせます。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「色だけに頼らない」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。