Contrast
This color as text, on a white page and a black page. AA needs 4.5:1 for normal text and 3:1 for large; AAA needs 7:1 and 4.5:1.
Why this exists
A color converter is easy to find. One that carries OKLCH and tells you the WCAG contrast in the same glance is rarer. Paste any CSS color and this page hands back all four notations and the two numbers that decide whether text will actually be readable: the ratio against white and the ratio against black. The color lives in the URL, so the link you copy reopens exactly what you saw. Nothing leaves your browser.
Frequently asked questions
- What is OKLCH and why is it here?
- OKLCH is a perceptual color space: lightness, chroma, and hue laid out so that a fixed step looks like a fixed step to the eye, which HSL never managed. CSS supports it natively now, so it is the modern way to pick a palette where every swatch reads as equally bright. Most converters still stop at HSL; this one carries the OKLCH triplet straight through.
- How is the contrast ratio calculated?
- By the WCAG 2 formula. Each color's relative luminance comes from its linearized sRGB channels weighted 0.2126 red, 0.7152 green, 0.0722 blue, then the ratio is (lighter + 0.05) divided by (darker + 0.05). The result runs from 1:1 for two identical colors up to 21:1 for pure black on pure white.
- What do AA and AAA mean?
- They are the two WCAG conformance bars. AA wants 4.5:1 for normal text and 3:1 for large text (18.66px bold or 24px regular and up). AAA is stricter: 7:1 for normal and 4.5:1 for large. The badges here show, for your color as a foreground, which bars it clears against a white page and a black page.
- Can I paste a named color like rebeccapurple?
- Yes. Anything the browser's own CSS parser accepts works: named colors, #abc and #aabbcc hex, rgb() and rgba(), hsl() and hsla(), and oklch(). Parsing runs through the browser's color engine, so if a stylesheet would accept it, this page will too.
- Does it track me or need a connection?
- No. No ads, no analytics, no third-party scripts, no outbound requests. Every conversion runs in your browser, and after the first load it works with no network at all.