Color picker + contrast checker

Pick a foreground and a background — see the WCAG 2.2 contrast ratio, AA/AAA badges, and the same color in hex, rgb, hsl, and oklch. Any CSS color the browser understands works: named, hex, rgb, hsl, oklch, color().

Foreground

The color of the text or icon.

Empty input.

Background

The color sitting behind the foreground.

Empty input.

Contrast

WCAG 2.2 ratio. Higher is better. 1.0 = identical colors, 21.0 = black on white.

Enter valid foreground and background colors to see the contrast ratio.