Color Picker and Contrast Checker

Pick a color, copy its HEX, RGB, or HSL value, and verify foreground and background text contrast against WCAG 2.2 thresholds.

Interactive workspace Free · no account required

Foreground color HEX value

Swap colors

Background color HEX value

Preview

Readable color starts with measurable contrast.

Preview normal and large text on the selected background before using the pair in an interface.

Converted foreground values

HEX #10b981 Copy

RGB rgb(16, 185, 129) Copy

HSL hsl(160, 84%, 39%) Copy

WCAG contrast ratio

7.26:1

WCAG 2.2 text thresholds

AA normal text Requires 4.5:1

Pass

AA large text Requires 3:1

Pass

AAA normal text Requires 7:1

Pass

AAA large text Requires 4.5:1

Pass

Colors stay in your browser and are not uploaded.

Move between HEX, RGB, and HSL

HEX and RGB describe the red, green, and blue channels used by screens. HSL expresses the same color as hue, saturation, and lightness, which can be easier to adjust systematically. The formats describe color differently but can resolve to the same visible output.

Check text contrast before shipping

Contrast compares the relative luminance of the text and its background. Under WCAG 2.2, Level AA calls for a ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA calls for 7:1 and 4.5:1 respectively. Treat thresholds as a starting check, then review the real interface at its final size and weight.

Color should not carry meaning alone

Pair status colors with labels, icons, patterns, or position so the message remains clear for people with color vision differences. Test hover, focus, active, disabled, error, and success states in both light and dark themes; the resting component alone is not enough.