Colour Converter and Contrast Checker

The brand colour that passed review and failed the audit

The brand colour was chosen, it looked excellent in the deck, and everyone signed off. Months later an accessibility audit measured it against white and returned 2.8:1. Button labels, links, helper text, all failing. The colour was not bad. Nobody had measured it.

A colour looking "dark enough" on screen is not a measurement. Contrast is a ratio between quantities of light, not a judgement of how different two colours appear, and human estimation of that ratio is unreliable in a specific and predictable way.

What each format is good for

All four notations describe the same colour. What separates them is which operation they make easy, so the choice depends on the job rather than on the colour.

This converter reads and writes all four. On input it accepts both the modern space-separated CSS Color 4 syntax and the legacy comma syntax, because design tools emit the former while your existing stylesheets are still full of the latter.

Short hex hides a common bug worth knowing about. Expanding #f00 duplicates each nibble, so "f" becomes "ff". An implementation that pads with zeros instead produces "f0" and darkens every short hex it touches. On a single swatch nobody notices; across a palette the drift accumulates into colours that no longer match the design.

Out-of-range input is reported rather than clamped. Writing rgb(300, 0, 0) and getting red back would hide a typo that almost certainly came from a calculation upstream, so it returns an error naming the offending channel instead. Hue is the exception, because it is an angle rather than a bounded channel: hsl(400 ...) is legal CSS and simply wraps to 40 degrees.

Why OKLCH is worth the switch

The "lightness" in HSL is not a measure of perception. It is the midpoint between the largest and smallest of the red, green and blue channels, which is a statement about numbers rather than about light. The consequence is easy to demonstrate: hsl(60 100% 50%) and hsl(240 100% 50%) share a lightness of 50%, yet the yellow is dazzling and the blue is nearly dark. Convert both to OKLCH and the lightness values come out at 0.97 and 0.45. The eye is far more sensitive to yellow and green than to blue, and HSL does not model that at all.

The cost shows up most clearly when building a palette. The standard recipe is to pick a colour, hold lightness and saturation fixed, and rotate the hue in even steps. The output is never even. Yellows and cyans jump forward, blues and violets recede, and you end up hand-correcting each swatch until the set looks balanced, which quietly discards the systematic approach you started with.

1/* HSL: lightness is constant, perceived brightness is not */2.a { background: hsl(0   80% 55%); }   /* red, mid brightness */3.b { background: hsl(60  80% 55%); }   /* yellow, visibly much brighter */4.c { background: hsl(240 80% 55%); }   /* blue, visibly much darker */5 6/* OKLCH: L tracks perception, so the same rotation gives an even palette */7.a { background: oklch(0.65 0.18 25); }8.b { background: oklch(0.65 0.18 85); }9.c { background: oklch(0.65 0.18 265); }10 11/* The same property makes theme ramps predictable:12   subtracting 0.08 from L gives one step darker without shifting hue. */

Because the L channel in OKLCH corresponds to perceived lightness, two colours sharing an L value genuinely look equally bright, and rotating hue at fixed L produces a palette that is even without hand-correction. The same property makes darkening safe: lower L and the hue stays put. That is exactly how the accessible-colour suggestion here works, binary-searching on OKLCH lightness alone while carrying chroma and hue through untouched, so the suggestion still reads as your colour rather than a different one.

WCAG contrast and what 4.5:1 means

The contrast ratio is a number between 1 and 21. Both colours are converted to relative luminance, 0.05 is added to each, and the larger is divided by the smaller. Those offsets model ambient light reflecting off the screen, and they are what fixes the ceiling at exactly 21, since (1 + 0.05) divided by (0 + 0.05) is 21.

Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text gets a lower bar, 3:1 for AA and 4.5:1 for AAA, where large means 18pt and up, or 14pt and up when bold. The reason is stroke width: a thicker letterform stays legible at a ratio that would break a thin one. The thresholds are stated as minimums, so a pair landing on exactly 4.5 passes AA.

Why alpha makes contrast unmeasurable

rgba(0, 0, 0, 0.6) looks like a colour but has no luminance on its own. What reaches the eye is that colour blended with whatever sits behind it: a light grey over white, very nearly black over dark grey. One declaration, many actual colours.

For that reason the engine ignores the alpha channel when computing contrast. Guessing the backdrop would produce a confidently wrong number, which is worse than no number. To measure a translucent layer, composite it first and enter the resulting opaque colour. The blend is per channel: result = foreground alpha + background (1 - alpha).

The same ambiguity applies to gradients and to text over photography. If the backdrop is not a single colour, there is no single contrast ratio to report. The workable approach is to find the lightest and the darkest point the text can land on, measure both, and hold yourself to the worse of the two.