Color Schemes for Placeholder Images

Color Schemes for Placeholder Images

The colors you choose for placeholder images affect readability, visual hierarchy, and the overall development experience. This guide covers effective color schemes for different contexts and accessibility requirements.

Classic Neutral Palette

The most common placeholder style uses neutral grays:

Name	Background	Text	Contrast Ratio
Light gray	#E5E7EB	#374151	7.5:1 (AAA)
Medium gray	#9CA3AF	#1F2937	7.1:1 (AAA)
Dark gray	#4B5563	#F3F4F6	8.2:1 (AAA)
Near-black	#1F2937	#D1D5DB	9.3:1 (AAA)

Semantic Color Coding

Use colors to communicate the type of content the placeholder represents:

Content Type	Background	Text	Meaning
Photo/Image	#DBEAFE (blue-100)	#1E40AF (blue-800)	Visual content
Video	#FEE2E2 (red-100)	#991B1B (red-800)	Video content
Ad/Banner	#FEF3C7 (amber-100)	#92400E (amber-800)	Advertising
User content	#D1FAE5 (green-100)	#065F46 (green-800)	User-generated
Decorative	#EDE9FE (violet-100)	#5B21B6 (violet-800)	Decorative imagery

Dark Mode Considerations

If your application supports dark mode, create a separate set of placeholder colors:

Mode	Background	Text
Light mode	#E5E7EB	#374151
Dark mode	#374151	#D1D5DB
Light mode (branded)	#DBEAFE	#1E40AF
Dark mode (branded)	#1E3A5F	#93C5FD

Accessibility Requirements

All placeholder text must meet WCAG contrast requirements:

• AA standard: 4.5:1 contrast ratio for normal text
• AAA standard: 7:1 contrast ratio for normal text
• Large text exception: 3:1 ratio for text 18px+ (or 14px+ bold)

Use the Color Converter tool to check contrast ratios between your chosen background and text colors.

Quick-Start Palette

For developers who need a ready-to-use set of accessible placeholder colors:

Set 1: bg=#F3F4F6 text=#374151 (light, accessible)
Set 2: bg=#DBEAFE text=#1E40AF (blue tint)
Set 3: bg=#D1FAE5 text=#065F46 (green tint)
Set 4: bg=#FEE2E2 text=#991B1B (red tint)
Set 5: bg=#FEF3C7 text=#92400E (amber tint)