Contrast Ratio
Definition
The ratio comes from one formula defined in WCAG 2.x: the lighter colour's relative luminance plus 0.05, divided by the darker colour's relative luminance plus 0.05. Two identical colours give 1:1. Black against white gives 21:1, the highest value available. Relative luminance is not the same as brightness as a person would name it — green contributes more than seven times what blue does — which is why a mid yellow and a mid blue can look strongly different and still measure poorly. The 0.05 constant models the light that a screen reflects in a normal room, and it is the reason the scale tops out at 21 rather than running to infinity. WCAG 2.2 is the current version and uses this same calculation; the ratio is what the thresholds of 4.5:1, 3:1 and 7:1 are measured in.
Why It Matters
The arithmetic is unforgiving in a way that eyeballing is not, and the margins are narrow. Grey #767676 on white measures 4.54:1 and passes Level AA for body text. Grey #777777, one digit away and indistinguishable on screen, measures 4.48:1 and fails — nobody spots that by looking, which is the whole argument for measuring. The same effect appears in reverse with brand colours: a client's orange at 2.9:1 against white is a fail for text at any normal size, while the same orange as a 3 pixel underline or an icon is fine under the non-text rule at 3:1. Knowing the number tells you which changes are available — darken the text, lighten the background, or move the colour to a role that only needs 3:1.
How It Works
Take each colour channel as a value from 0 to 255 and divide by 255. Linearise each one: if the result is at or below 0.03928, divide it by 12.92; otherwise add 0.055, divide by 1.055, and raise to the power of 2.4. Combine the three with fixed weights — 0.2126 times red, plus 0.7152 times green, plus 0.0722 times blue — and that is the relative luminance. Feed the larger and smaller luminance into the ratio formula and you have the number. Two practical cautions: any transparency has to be flattened against what is actually behind the element before you measure, because a colour at 60 per cent opacity is a different colour; and the formula ignores hue entirely, which is why some pairs pass and still read badly. A successor method, APCA, is being explored for WCAG 3 but that draft is not a standard and should not be used for conformance.
Real-World Example
Someone checks the palette for a report before publishing it at q3-figures.99helpers.site. The headings are #2D3A4F on a #F7F7F5 background, which works out at about 10.6:1 — comfortably past AAA. The captions under each chart are #8C8C8C on the same background, giving 3.2:1, which fails the 4.5:1 minimum for normal text; dropping them to #6E6E6E brings them to 4.9:1. The chart gridlines stay pale, because gridlines are decoration rather than a graphical object conveying information, and the bars themselves are checked against the background at 3:1. The corrected HTML replaces the earlier version on 99helpers, and the previous file stays available in version history.
Common Mistakes
- ✕Judging contrast by how different two swatches look — the formula weights green far above blue, so intuition and measurement disagree regularly
- ✕Measuring a colour that has opacity applied without compositing it first — the reported ratio is for a colour nobody ever sees
- ✕Assuming a pass on one background holds on another — the same text colour over a card, a tinted panel and a photograph gives three different numbers
- ✕Quoting APCA figures as WCAG conformance — WCAG 2.2 is the current standard and it uses the luminance ratio described here
Related Terms
Colour Contrast
Colour contrast is the difference in luminance between text and the surface behind it. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text at Level AA.
WCAG
WCAG, the Web Content Accessibility Guidelines, is the W3C standard that defines what accessible web content is. Its success criteria at Levels A, AA and AAA are what accessibility law and procurement point to.
Focus Indicator
A focus indicator is the visible ring or outline showing which element the keyboard is currently on. Switching it off with an outline of none and putting nothing back is one of the most common faults in hand-written CSS.
Accessibility Audit
An accessibility audit is a structured review of a site or document against a named standard, producing a list of failures mapped to specific success criteria. It combines automated scanning with manual testing, because tools alone catch only part of the picture.
Generated HTML
Generated HTML is markup produced by a program or a model rather than typed by a person. From a browser's point of view it is indistinguishable from hand-written HTML, and a static host serves it the same way.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →