「図と地の関係」とコントラストの重要性
最近デザインをする際、特に気を付けていることの１つに「コントラスト」があります。
コントラストを整えると見やすさが格段に上がって驚くことがよくあるので、今回はゲシュタルト心理学の「図と地の関係」とあわせてコントラストの重要性をご紹介します。
「図と地の関係」とは
「図と地の関係」とは、人がものを見るときに、注目する対象を「図」、その背景を「地」として認識するという考え方です。
有名な例に「ルビンの壺」があります。
デンマークの心理学者エドガー・ルビンが考案した騙し絵で、白い部分に注目すると壺に、黒い部分に注目すると向かい合う2人の顔に見え、
ここから、人は対象と背景を区別して情報を認識しているとわかります。
Webデザインにおけるコントラストの重要性
Webデザインにおいても、文字やボタンなどの要素を背景から明確に区別できることは、情報の認識しやすさに大きく関係します。
例えば、背景と文字の色が似ていると、文字が背景に埋もれてしまい、情報を読み取りづらくなりますし、
反対に、適切なコントラストを確保することで、文字やボタンを認識しやすくなり、情報をスムーズに伝えることができます。
また、Webアクセシビリティのガイドライン「WCAG」では、文字のコントラスト比について以下の基準が設けられています。
- 通常の文字：4.5:1以上
- 大きな文字：3:1以上
※WCAG 2.2の達成基準AAにおける原則的な基準です。一部例外があります。
弊社でも、デザインルールのひとつとしてコントラストの確保が定められているため、
私自身も普段から意識しているつもりですが、制作に集中しているとふとコントラストが不十分になり
指摘を受けて初めて気づくことがあります。
よって私は時々、実際に数値化してコントラストを確認するようにしています。
デザインツールのFigmaではコントラストを数値化するプラグインがあり、簡単に数値確認が可能なので、
「ここはコントラストが確保できているか？」計って確かめることはとても有効でお勧めです。
まとめ
コントラストは、情報を正しく伝え、ユーザーにとって心地よいデザインを作るために欠かせない要素です。
「図と地の関係」を意識しながら、文字やボタンが背景から明確に区別できているか、今後も丁寧に確認していきたいと思います。