Accessibility

Why Your Palette Needs Light and Dark Base Colors

If PaletteRx's health score is stuck below 60%, the most likely reason is missing base colors. Base colors are the unsung heroes of every palette. They are not flashy, but without them, nothing works.

The Accessibility Math

WCAG AA requires a 4.5:1 contrast ratio for text. Here is the problem: a saturated blue (#3b82f6) against a saturated orange (#f97316) gives a ratio of about 1.7:1. That is terrible. Two chromatic colors almost never have sufficient contrast against each other.

But that same blue on white (#ffffff) gives 4.6:1, passing AA. The base colors are what make the chromatic colors usable.

Light Bases: Not Just White

Your light base does not have to be pure white. A warm off-white (#faf9f7), a cool blue-gray (#f0f4f8), or a cream (#fefce8) can add personality while still providing near-maximum contrast. The key is staying above 90% lightness and below 10% saturation.

Dark Bases: Not Just Black

Pure black (#000000) is rarely the best dark base. It creates harsh contrast that feels stark and digital. A deep charcoal (#1a1a2e), dark navy (#0f172a), or warm black (#1c1917) feels more sophisticated while maintaining excellent contrast ratios.

The Health Score Connection

PaletteRx's health score checks two base-related conditions: "Has light and dark bases" and "All colors have AA contrast pairs." Adding one near-white and one near-black color instantly satisfies both. That is a 40% health score improvement in two clicks.

💡 Quick fix: Add #f8f9fb (light base) and #1a1a2e (dark base) to any palette. These neutrals pair accessibly with virtually any chromatic color.

Ready to Build Your Palette?

PaletteRx guides you from color selection to accessible, export-ready design systems in minutes.

🎨 Launch PaletteRx