コントラスト

一言で言うと

強弱で優先順位を伝える。

もう少し詳しく

色・明度・サイズなどの視覚的な差異によって情報の優先順位や読みやすさを伝える概念です。Webアクセシビリティの国際規格 WCAG 2.1 では、通常テキストの文字色と背景色のコントラスト比は AA レベルで 4.5 対 1 以上、大きな文字では 3 対 1 以上が必要とされています。

HTMLとCSSを使ったWebフロントエンド開発、ネイティブアプリのUIデザイン、デザインシステム構築などの場面で登場します。CSSでは background-color と color の組み合わせによってコントラスト比が決まるため、デザイントークンやカラーパレットを設計する際に必ず意識する必要があります。

実務でどう使うか

関連する章

Ch147 で詳しく学べます。