Tools Color Picker
Inspect and test
Color Picker and WCAG Contrast Checker
Pick colors, inspect HEX, RGB, and HSL values, and check WCAG contrast ratios.
HEX
RGB
HSL
WCAG Contrast Checker
#3B82F6
#FFFFFF
Sample Text Preview — The quick brown fox jumps over the lazy dog.
3.68:1
Contrast Ratio
Fail
AA Normal
Fail
AAA Normal
Pass
AA Large
Fail
AAA Large
AA requires 4.5:1 (normal text) or 3:1 (large text 18pt+). AAA requires 7:1 (normal) or 4.5:1 (large).
When to use it
- Check whether text and background colors meet WCAG contrast expectations.
- Convert a color between HEX, RGB, and HSL while adjusting UI tokens.
- Test a hover or muted text color before committing it to a design system.
Examples
- Compare muted body text against the page background before shipping a theme change.
- Convert an RGB value from browser devtools into a HEX value for documentation.
- Check AA contrast for button text against a primary background.
Limitations
Contrast checks are a baseline, not a full accessibility review. Also test focus states, font size, disabled states, and meaning that is conveyed only by color.
Related paths