Colour Contrast
Definition
The requirement lives in three success criteria, and it is worth knowing all three. 1.4.3 Contrast (Minimum), Level AA, sets 4.5:1 for body text and 3:1 for large text, where large means at least 18 point — about 24 pixels — or 14 point bold, about 18.66 pixels. 1.4.6 Contrast (Enhanced), Level AAA, raises those to 7:1 and 4.5:1. 1.4.11 Non-text Contrast, added at AA in WCAG 2.1, asks for 3:1 for user interface components and graphical objects: the border of an input, the bar of a chart, the outline of a checkbox, an icon that carries meaning on its own. A few things are exempt — logotypes, inactive controls, and incidental text such as a name on a photograph.
Why It Matters
Low contrast text is the single most common accessibility failure on the web. WebAIM finds it on roughly four out of five of the million home pages it scans each year, ahead of missing alt text and unlabelled fields. It is also the cheapest to fix, because the change is a hex value rather than a structural one. The people it affects are not a niche: about 8 per cent of men of northern European descent have some colour vision deficiency, contrast sensitivity declines steadily with age, and anyone reading a phone in daylight is temporarily in the same position. Placeholder grey at 3:1 looks refined on a calibrated monitor indoors and disappears on a bus.
How It Works
You measure it rather than judge it, because the eye is a poor instrument for this and every browser now ships a checker. The number produced is a contrast ratio, running from 1:1 for two identical colours to 21:1 for black on white, and it is derived from the relative luminance of the two colours rather than from how different they look. Chrome and Firefox both show the value in the colour picker in DevTools, with the AA and AA Large thresholds marked. Three practical points cover most real failures: text over a photograph needs a solid overlay or a scrim rather than luck, because the background varies pixel by pixel; opacity below 1 changes the effective colour, so measure the composited result; and both the light and the dark theme need checking, since a palette that passes in one often fails in the other.
Real-World Example
A freelancer publishes a pricing page at studio-rates.99helpers.site. The body text is #A0A0A0 on white, which measures 2.6:1 and fails Level AA for any size. Changing it to #6B6B6B gives 5.3:1 and passes for normal text. The feature tick marks in the plan table are a pale mint that measures 1.9:1 against white, which also fails 1.4.11 because the ticks carry meaning on their own; darkening them to a green at 3.4:1 clears it. Nothing about the design changes except four hex values, and the page is republished on 99helpers in seconds.
Common Mistakes
- ✕Treating the 3:1 allowance as applying to any bold text — it only applies from 14 point bold, about 18.66 pixels, or 18 point regular, about 24 pixels
- ✕Checking text and stopping there — since WCAG 2.1 the same page also needs 3:1 on input borders, focus rings, icons and chart elements that carry meaning
- ✕Testing a light theme only — a dark mode built by inverting a palette frequently drops text below 4.5:1 without anyone looking
- ✕Setting text over a photograph and eyeballing it — contrast varies across the image, so the failing part is wherever the picture happens to be light
Related Terms
Contrast Ratio
A contrast ratio is a single number between 1:1 and 21:1 describing how far apart two colours are in relative luminance. It is what a contrast checker reports, and it is calculated rather than estimated.
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.
Landing Page
A page built for one purpose, which people reach directly from an ad, an email or a shared link. It is judged by the share of visitors who do the one thing it asks.
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 →