Color Palette for Web Design: Contrast, Accessibility & Dark Mode

September 5, 2026 · 5 min read

A beautiful color palette that fails accessibility standards excludes users and may violate legal requirements. Web Content Accessibility Guidelines (WCAG) require minimum contrast ratios between text and background colors. Designing for accessibility from the start is easier than retrofitting — and results in better design for everyone.

WCAG Contrast Requirements

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). WCAG AAA requires 7:1 for normal text. White text on a light blue background might look nice but often fails AA requirements. Always check contrast ratios before finalizing your palette.

Designing for Dark Mode

Dark mode requires different thinking. You cannot simply invert colors — pure white text on pure black is too harsh. Use off-white (#E5E5E5) on dark gray (#1A1A1A) instead. Saturated colors that work on light backgrounds may need desaturation for dark backgrounds. Create two palette variants and test both.

Color Blindness Considerations

About 8% of men and 0.5% of women have some form of color blindness. Never rely on color alone to convey information — always add text labels, icons, or patterns. Red-green color blindness is most common, so avoid using red and green as the only differentiators (success vs error states, for example).

Building a Systematic Palette

Create a palette with 5-9 shades of each color (50 to 900, following Tailwind CSS convention). This gives you enough variation for backgrounds (50-100), borders (200-300), text (700-900), and interactive states (hover, active, disabled). Systematic palettes scale better than ad-hoc color choices.

Try It Now

Our free Color Palette Generator handles this instantly — no signup, no limits.

Also useful: our Hex to RGB Converter for related calculations.