ウェブページの表現＝ビジュアルデザインに関するガイドラインです。
レベル1：必ず達成
本文のような複数行にわたるテキストブロックに含まれるインラインリンクは、リンクとしての手がかりを備えていないと、特にロービジョンや認知障害のあるユーザーは見逃してしまうかもしれません。
リンクを示すのに色だけを使用する
本文中の一部のテキストがリンクのため青色で表現されている。
リンクを示すのに色と下線を使用する
リンク色のほか下線をつかってリンクであることが表現されている。
レベル1：必ず達成
フォーカス・選択・ホバー・押下・展開・チェックなど、状態をもつUIコンポーネントは、状態の変化を視覚的に判別できるようにしてください。色に変化を持たせるだけでなく、色以外の手がかり（テキストや形状）を変化させることで状態を表現するようにしてください。ホバーのように状態の変化が装飾的なものであれば、テキストや形状の変化は必要ではありません。
押下状態がアイコンの変化でわかる
チェック状態がアイコンの変化でわかる
展開状態がアイコンの変化でわかる
フォーカス状態が枠線の変化でわかる
選択状態が塗りの変化でわかる
レベル1：必ず達成
フォーカスインジケーターを非表示にすると、キーボードユーザーや弱視のユーザーはコンテンツや機能を利用できなくなってしまいます。
コントラストが低すぎる
色の変化のみ
十分なコントラストのあるフォーカスインジケーター
背景色を用いて表現されたフォーカスインジケーター
レベル2：可能な限り達成
テキストの読みやすさには色のコントラストが重要です。特にロービジョンのユーザーには十分なコントラストが必要です。
APCA (Accessible Perceptual Contrast Algorithm) は2色のコントラスト比の計算アルゴリズムおよび評価手法です。WCAG 2.1で使われているコントラスト比計算の問題を解消するため開発されました。人間の知覚特性を加味した評価値を算出できることが特徴です。現在パブリックベータ版で、WCAGの次期バージョンにて取り入れられることが検討されています。
白背景とLIFULLオレンジの文字色の組み合わせをAPCAでコントラストを計算すると59.7となりAPCA 60を満たしません。これを取りざたして問題視する必要はありません。ただし、文字色はそのままに、白でない色を背景にする場合、コントラストを確保するために文字の色を見直すことを推奨します。
上記例では、白地#FFFFFFに対して#AAAAAA(Lc 45.8)、グレー地#D9D9D9に対して#7F7F7F(Lc 45.1)を確保しています。
レベル2：可能な限り達成
フォームコントロールなどのユーザーが操作するUIコンポーネントや、アイコンやグラフなどの情報を持つグラフィックは、情報・機能・状態を判別し操作するために、充分なコントラストが必要です。
ただし、UIコンポーネントがアクティブではないときはコントラストの確保は不要です。
レベル2：可能な限り達成
小さすぎるターゲットは、タッチ操作するユーザーや細かい操作を苦手とするユーザーにとって使いにくいことがあります。
不十分なターゲットサイズ
ターゲットサイズが24px未満であり、隣接するコンポーネントとの間隔も確保されていない。
十分なターゲットサイズ
ターゲットサイズを24px以上以上とする。ターゲットサイズが24px未満となる場合は、ターゲットサイズと隣接するコンポーネントとの間隔を足し合わせた値が24px以上になるようにする。
レベル2：可能な限り達成
特定の認知障害のあるユーザーは、均等割付されたテキストを読むことに苦労することがあります。
均等割付する
均等割付しない
レベル2：可能な限り達成
レスポンシブデザインはブラウザービューポートサイズの変動にレイアウトが応じるため、ズーム時にも横スクロールを必要とせずコンテンツを利用できます。