移行中の知識
コントラスト
Contrast
定義
デザインにおけるコントラストとは、色、明度、大きさ、形、太さ、書体などの差によって、要素同士を区別したり一方を際立たせたりする関係です。視覚的階層や強調を作る手段になりますが、アクセシビリティで測定する文字と背景のコントラスト比だけを意味する言葉ではありません。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
記事ページ
見出しと本文の差
見るポイント
見出しを本文より大きく太くするだけでなく、前後の余白も変えて役割の違いを明確にする。色差が小さくても、複数の差を組み合わせれば階層を作れる。
フォーム送信画面
主操作と副操作
見るポイント
主要ボタンと「戻る」などの副操作を同じ見た目にせず、重要度の差を見た目にも反映する。差を強くしすぎて副操作が発見できなくならないかも確認する。
理解
理解のポイント
- 差を明確にすることで識別や焦点形成を助けられるが、必要な差の強さは情報の役割と周辺要素に依存する。
注意
誤解しやすい点
- すべての要素に強いコントラストを与え、相対的な強弱を失う。
- 構成上のコントラストとWCAGで定義されるtext / non-textのcontrast ratio要件を同じ概念として扱う。
観察
見比べて確かめる
関連
関連する概念
出典