So funktioniert die Berechnung
Type any colour and it is parsed to sRGB, then re-expressed six ways: HEX, RGB, HSL, HWB, OKLCH and LCH. Conversions follow the standard path. sRGB is linearised with the usual gamma curve, dividing values at or below 0.04045 by 12.92 and otherwise raising (v + 0.055) ÷ 1.055 to the power 2.4. From there it goes through Björn Ottosson's OKLab matrices for OKLCH, or through XYZ and CIE Lab with a D65 white point for LCH.
The input field accepts more than the label suggests: hex in 3, 4, 6 or 8 digits, rgb() and rgba(), hsl() and hsla(), hwb(), oklch(), lch(), and seventeen basic CSS colour names such as teal, olive and magenta. Separate Foreground and Background fields drive the WCAG contrast panel, which defaults to #FFFFFF on #F42C2C. That panel reports the ratio and pass/fail chips for AA normal (4.5), AA large (3), AAA normal (7) and AAA large (4.5).
Alpha is parsed but then discarded, so an 8-digit hex or an rgba() with transparency converts as though fully opaque, and contrast is always computed on opaque colours. Out-of-gamut OKLCH and LCH inputs are clipped channel by channel back into sRGB rather than properly gamut-mapped, which can shift hue on very saturated values. The contrast maths is WCAG 2.x relative luminance, not the newer APCA model, and it grades colour pairs rather than real rendered text.
FAQ
What is OKLCH and why use it instead of HSL? +
OKLCH is a perceptually uniform polar space, meaning equal changes in its lightness value look equally different to the eye, which HSL does not guarantee. That makes it far better for generating tints and shades of a brand colour without lightness drifting between hues.
Does white text pass contrast on a red background? +
With the defaults of #FFFFFF on #F42C2C the ratio comes out around 4.00:1. That clears AA large text at 3:1 but falls short of AA normal at 4.5:1 and both AAA thresholds, so reserve it for headings at 24 px or larger rather than body copy.
Can I paste a colour that has transparency? +
You can paste 8-digit hex or rgba() and it will parse, but the alpha channel is dropped. Every output format and the contrast ratio treat the colour as fully opaque, so for a semi-transparent overlay you need to work out the composited colour first.
Which named colours does the input recognise? +
Seventeen of them: black, white, red, lime, blue, yellow, cyan, magenta, silver, gray, olive, green, purple, teal, navy, maroon and orange. Anything outside that list, such as rebeccapurple or coral, is rejected as an invalid colour, so paste the hex value instead.
What is the difference between the LCH and OKLCH rows? +
Both are polar lightness, chroma and hue forms, but LCH is built on CIE Lab with a D65 white point while OKLCH uses OKLab. OKLab was fitted specifically to fix Lab's hue shifts in blues and purples, so OKLCH hue stays truer as you change lightness.
