Colour Converter & Contrast Checker

Why contrast ratio is not brightness difference

WCAG contrast is defined as (L1 + 0.05) / (L2 + 0.05), where L is relative luminance — each channel linearised out of sRGB's gamma curve, then weighted 0.2126 red, 0.7152 green, 0.0722 blue. Those weights reflect how much each primary contributes to perceived brightness, which is why a saturated blue and a saturated yellow of the same numeric “lightness” behave completely differently against white.

The practical consequence: you cannot judge contrast by eye on a bright monitor in a bright room. A mid-blue that looks obviously readable to a designer can fail 4.5:1 and be genuinely hard work for someone with reduced contrast sensitivity.

The thresholds, and what “large text” means

WCAG 2.2 level AA requires 4.5:1 for normal text and 3:1 for large text, where large means at least 18pt (24px) or 14pt (18.66px) bold. Level AAA raises those to 7:1 and 4.5:1. User interface components and meaningful graphics need 3:1 against their surroundings under criterion 1.4.11 — which is why a button border that passes for a graphic can still fail for the label inside it.

HSL is for reasoning, RGB is for rendering

HSL separates hue from saturation and lightness, so “the same blue but 20% lighter” is a single number change rather than three. It is a transform of RGB, not a perceptual model: two colours with identical HSL lightness can look very different in brightness. For palette work that must hold up perceptually, OKLCH is the modern answer; HSL remains far easier to reason about by hand.

CMYK here is an approximation, deliberately

Real CMYK conversion depends on the printing process, paper and ICC profile, and no screen colour maps cleanly onto ink. The values above use the standard naive formula, which is fine for a rough idea and wrong for anything going to press. For print work, convert in software with the correct profile.

Frequently Asked Questions