Loading...
Convert colors between HEX, RGB, and HSL with a live picker, and check the contrast ratio of any foreground/background pair against WCAG accessibility thresholds. Designed for CSS work, design systems, and accessibility audits.
Pick a color visually or paste a value in any format; all notations update together, ready to copy into your stylesheet. The contrast checker reports the exact WCAG ratio and tells you whether the pair passes AA or AAA for normal and large text.
They describe the same colors. HEX and RGB specify raw red/green/blue channels; HSL (hue, saturation, lightness) is human-oriented — "same blue, a bit lighter" maps directly to changing L. Use HSL while exploring, HEX in production CSS.
WCAG 2.1 requires 4.5:1 for normal text and 3:1 for large text (18pt+) at level AA; AAA raises those to 7:1 and 4.5:1. The checker computes the exact ratio for your pair so you do not have to eyeball it.
The converter focuses on solid colors — the format design systems and contrast math are defined for. For overlays, convert the composited (blended) color instead.
PureKit · color · Free online tool — files processed locally in your browser, no upload.