Stepwise.

Color Converter & Contrast Checker

Convert a colour between hex, RGB, HSL, HSV and CMYK, and check its WCAG contrast ratio against another colour.

How to use this calculator

  1. 1Enter your colour in whichever format you have — hex, RGB or HSL.
  2. 2Every other format is produced automatically, along with the WCAG relative luminance.
  3. 3Set the comparison colour to whatever the colour will actually appear against, and check the conformance table.

How the calculation works

L = 0.2126R + 0.7152G + 0.0722B (each channel linearised) Contrast = (L₁ + 0.05) ÷ (L₂ + 0.05)
R, G, B
Linearised channel values — c/12.92 when c ≤ 0.04045, otherwise ((c + 0.055)/1.055)^2.4
L₁, L₂
Relative luminance of the lighter and darker colour respectively
0.05
A flare constant, representing ambient light reflecting off the screen

The three coefficients are not equal because human vision is not equally sensitive to each primary. Green contributes over 70% of perceived brightness, red about 21% and blue only 7% — which is why pure blue text on black is far harder to read than pure green on black, despite both being "full brightness" in RGB terms.

Channels are linearised first because sRGB values are gamma-encoded, not linear in light intensity. Skipping that step is the most common error in hand-rolled contrast checks, and it produces ratios that look plausible but are wrong.

HSL lightness and WCAG luminance are different quantities. hsl(60, 100%, 50%) — pure yellow — and hsl(240, 100%, 50%) — pure blue — have identical HSL lightness of 50%, but yellow has roughly 13 times the relative luminance.

Worked example

A mid blue (#3B82F6) on white

  1. 1.The hex splits into R=0x3B=59, G=0x82=130, B=0xF6=246.
  2. 2.Normalising and linearising: 59/255 = 0.2314 → ((0.2314+0.055)/1.055)^2.4 = 0.0437; the same for green gives 0.2232 and blue 0.9216.
  3. 3.Luminance: 0.2126(0.0437) + 0.7152(0.2232) + 0.0722(0.9216) = 0.2355.
  4. 4.White has luminance exactly 1, so contrast = (1 + 0.05) ÷ (0.2355 + 0.05) = 1.05 ÷ 0.2855 = 3.68:1.
  5. 5.That clears AA for large text (3:1) but not for normal text (4.5:1) — a common trap with mid-tone brand blues on white.

Result: 3.68:1 — passes AA large text only

The colour models and what each is for

The same colour has many valid descriptions, and which one is convenient depends entirely on what you are doing with it.

  • Hex and RGB — the same thing in different notation — three channels from 0 to 255, written as pairs of hex digits or as decimals. This is how screens actually work, additively mixing red, green and blue light.
  • HSL — hue, saturation, lightness. Far more intuitive to adjust by hand: change the hue to shift colour, the lightness to make a tint or shade. This is why design systems generate palettes in HSL and then export to hex.
  • HSV / HSB — similar to HSL but with value/brightness instead of lightness. At 100% value a colour is fully saturated; at 100% HSL lightness it is always white, which is the key difference.
  • CMYK — subtractive, for print — cyan, magenta, yellow and a separate black plate. The conversion here is the naive mathematical one; real print work needs colour profiles, because CMYK cannot reproduce every RGB colour.

Why contrast is calculated the way it is

A naive contrast check might subtract one brightness from another. WCAG does something more careful, for two reasons rooted in physics and biology.

First, sRGB values are gamma-encoded — the numbers are not proportional to actual light output, because encoding them non-linearly makes better use of the limited bits available. Each channel must be linearised before any physical calculation. Second, the eye is not equally sensitive to each primary: green dominates perceived brightness at around 71%, red contributes about 21%, and blue only 7%. The luminance formula weights them accordingly, which is why blue text is so much harder to read than its RGB values suggest.

The thresholds, and what they mean in practice

WCAG sets two conformance levels for text contrast. AA requires 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA requires 7:1 and 4.5:1 respectively. AA is what most legislation and procurement rules reference; AAA is a stretch target that is genuinely difficult to hit with brand colours.

The most common real-world failure is a mid-tone brand colour used as text on white. Anything in the middle of the lightness range tends to land between 3:1 and 4.5:1 — passing for headings and failing for body text. The usual fix is to keep the brand colour for large display text and darken it for body copy, rather than abandoning it entirely.

What a contrast ratio does not tell you

Passing 4.5:1 is a floor, not a guarantee of legibility. The ratio says nothing about font weight, letter spacing, or whether a hairline-thin typeface is readable at all. It also does not model colour blindness: a red/green pair can have excellent contrast and still be indistinguishable to someone with deuteranopia, which is why WCAG separately requires that colour never be the only means of conveying information.

The 0.05 constant in the formula represents ambient light reflecting off the screen, which sets a ceiling on achievable contrast — pure black on pure white computes to 21:1, not infinity, because in any real viewing environment some light always washes across the display.

What this assumes, and where it stops

Assumptions

  • Colours are in the sRGB colour space, which is what browsers and most displays assume by default.
  • The contrast calculation follows WCAG 2.x. WCAG 3 is expected to use a different perceptual model (APCA), which produces different numbers and is not implemented here.
  • CMYK conversion is the straightforward mathematical one, without an ICC colour profile — real print output will differ.

Limitations

  • Does not simulate colour-vision deficiency. Two colours can pass the contrast check and still be indistinguishable to a colour-blind viewer.
  • Contrast is calculated for solid colours only. Text over an image, gradient or semi-transparent overlay needs the actual composited colour behind each part of the text.
  • CMYK values are indicative only. Accurate print colour requires the specific press and paper profile.

Common questions

Why does my brand colour fail contrast on white?

Mid-tone colours very commonly land between 3:1 and 4.5:1 against white — enough for large headings, not enough for body text. The usual solution is to keep the brand colour for display sizes and use a darkened variant for smaller text, rather than changing the brand. Darkening the lightness in HSL while keeping hue and saturation preserves the colour identity.

What is the difference between HSL lightness and WCAG luminance?

HSL lightness is a simple geometric position in the colour model, treating all hues alike. WCAG luminance models how bright a colour actually appears to human vision, weighting green far above red and blue. Pure yellow and pure blue both sit at 50% HSL lightness, yet yellow has roughly thirteen times the relative luminance — which is exactly why the two measures cannot substitute for one another.

Is the maximum possible contrast ratio 21:1?

Yes, for pure black against pure white in sRGB. The ratio never reaches infinity because of the 0.05 flare constant in the formula, which accounts for ambient light reflecting off the screen in any real viewing environment.

Sources

Formula and content last reviewed on .

Results are estimates for information only, not professional advice.

Report an error

Related calculators

Tools people commonly use alongside the color converter & contrast checker.

See all developer tools calculators →