Color Picker Guide: HEX, RGB, HSL, and WCAG Accessibility
5 min read · Updated June 2026
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
| Format | Example | Best For |
|---|---|---|
| HEX | #3B82F6 | CSS, design tools, most common |
| RGB | rgb(59, 130, 246) | CSS with alpha (rgba) |
| HSL | hsl(217, 91%, 60%) | Adjusting hue/saturation/lightness |
WCAG Contrast Requirements
| Level | Normal Text | Large Text (18px+ bold or 24px+) |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
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
🎨 Pick accessible Colors
Use our Color Picker and WCAG Checker to pick colors with live HEX/RGB/HSL conversion and WCAG AA/AAA contrast ratio validation.
The Bottom Line
- WCAG AA requires 4.5:1 contrast for normal text, 3:1 for large text
- Never rely on color alone to convey information
- Test both light and dark mode contrast ratios
- 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.