Color Picker Guide: HEX, RGB, HSL, and WCAG Accessibility

Choosing colors is only half the job — making sure they are accessible is equally important. WCAG contrast requirements affect 15% of the global population with some form of vision impairment. This guide covers color formats and accessibility compliance.

Color Formats Explained

WCAG Contrast Requirements

Common Mistakes

• Light gray on white — The most common accessibility failure
• Relying on color alone — Always add icons or text labels for color-blind users
• Not testing dark mode — Colors that work in light mode may fail in dark mode
• Using brand colors without checking — Your brand color might not meet contrast requirements

Worked Example: Making a Button Pass WCAG AA

A designer has a primary button with white text on a brand blue, #60A5FA. The contrast ratio is about 2.3:1 — it fails AA for normal text (4.5:1). Fixing it step by step:

1. Convert #60A5FA to HSL: roughly hsl(217, 91%, 68%)
2. Lower the lightness while keeping hue and saturation: hsl(217, 91%, 50%) becomes about #1D6FF2
3. Recheck contrast against white text: about 4.6:1 — AA now passes
4. Test the new color in dark mode too, where the text color may need to flip instead of the background

Notice how close the middle option looks to passing — that is exactly why eyeballing is not enough. Every text and background combination should be measured with a contrast checker like the Color Picker and WCAG Checker before it ships.

Common Mistakes

• Checking body text but not disabled states — grayed-out buttons and placeholder inputs are still read by real users. Keep even disabled text as close to 4.5:1 as the design allows.
• Trusting one color across both themes — a card background that passes with slate text in light mode can fail completely in dark mode, where the same text sits on a near-black surface.
• Using opacity to fake a lighter shade — text at 60% opacity blends with whatever sits behind it, so the real contrast depends on the background, not the declared color.
• Encoding meaning in hue only — red and green validation states are invisible to the roughly 8% of men with color vision deficiency. Always add icons, text labels, or patterns.
• Misjudging the large-text rule — a 20px headline may legally use 3:1, so forcing 4.5:1 everywhere wastes design headroom; conversely, 17px bold does not count as "large text."

Frequently Asked Questions

How is the contrast ratio actually calculated?

Both colors are converted to relative luminance (linearized sRGB values weighted for human perception), then the lighter luminance is divided by the darker one. The result ranges from 1:1 for identical colors to 21:1 for pure black on pure white.

Does WCAG apply to icons and graphics?

Yes. WCAG 1.4.11 requires 3:1 contrast for meaningful graphical objects such as form field icons, chart lines, and focus indicators. Purely decorative images are exempt from the requirement.

Is dark mode automatically accessible if light mode is?

No. Inverting a theme changes every background, so every text pair must be rechecked. Dark themes also introduce new hazards such as pure white text on pure black, which causes halation for some readers — prefer slightly off-white on dark gray.

Which format should I hand to developers?

HEX is the safest default because every tool accepts it. Include the HSL equivalent when hover, active, and focus variants will be derived, since adjusting lightness in HSL is far more predictable than nudging RGB channels.

The Bottom Line

1. WCAG AA requires 4.5:1 contrast for normal text, 3:1 for large text
2. Never rely on color alone to convey information
3. Test both light and dark mode contrast ratios
4. HSL is the easiest format for creating color variations

Disclaimer: This guide is for informational purposes only. Always test with real users and automated accessibility tools.