プレースホルダー画像のカラースキーム
プレースホルダー画像に効果的なカラーの組み合わせを探索。ニュートラルパレット、アクセシブルなコントラスト比、ダークモードの考慮、セマンティックカラーコーディングを解説。
Design & Branding
詳細な説明
プレースホルダー画像のカラースキーム
プレースホルダー画像に選択するカラーは、可読性、ビジュアル階層、全体的な開発体験に影響します。
クラシックニュートラルパレット
最も一般的なプレースホルダースタイルはニュートラルグレーを使用：
| 名前 | 背景 | テキスト | コントラスト比 |
|---|---|---|---|
| ライトグレー | #E5E7EB |
#374151 |
7.5:1 (AAA) |
| ミディアムグレー | #9CA3AF |
#1F2937 |
7.1:1 (AAA) |
| ダークグレー | #4B5563 |
#F3F4F6 |
8.2:1 (AAA) |
セマンティックカラーコーディング
カラーを使用してプレースホルダーが表すコンテンツの種類を伝える：
| コンテンツタイプ | 背景 | テキスト | 意味 |
|---|---|---|---|
| 写真/画像 | #DBEAFE |
#1E40AF |
ビジュアルコンテンツ |
| ビデオ | #FEE2E2 |
#991B1B |
ビデオコンテンツ |
| 広告/バナー | #FEF3C7 |
#92400E |
広告 |
アクセシビリティ要件
すべてのプレースホルダーテキストはWCAGコントラスト要件を満たす必要があります：
- AA標準: 通常テキストで4.5:1コントラスト比
- AAA標準: 通常テキストで7:1コントラスト比
ユースケース
組織のプレースホルダー規則を確立するデザインチームは、一貫した、アクセシブルで、意味のあるプレースホルダー画像を作成するためにキュレーションされたカラースキームを使用します。ダークモードサポートを持つチームは、両方のテーマに合わせたデュアルパレットプレースホルダーセットが必要です。