Glossary · Accessibility term
Contrast ratio
A contrast ratio is a number from 1:1 to 21:1 measuring how far apart two colors are in brightness, computed from a formula rather than judged by eye. Body text needs 4.5:1 at Level AA. Large text needs 3:1, where large means 18 point, or 14 point bold, which works out at roughly 24px and 18.5px. A separate rule asks 3:1 of non-text things, and its scope is narrower than the shorthand suggests. What it covers is the visual information somebody needs for identifying a control or its state, and the parts of a graphic somebody needs for understanding it. So the boundary of a text field and the focus ring around it are in, and an icon sitting beside a label that already says the same thing is not. The formula is why light gray on white keeps failing audits. It can look perfectly readable to a designer with good sight and still fall short, and the threshold is never rounded, so 4.49:1 fails 4.5:1.
In practice
The formula wants two solid colors, and real interfaces frequently do not have them. Text over a photograph, a gradient, video, or a semi-transparent overlay changes ratio across the element, and automated tools usually report those as undetermined rather than failing them. The standard has an answer here that almost nobody knows about. A border or stroke around the letters counts in the calculation. A narrow one counts as part of the letter, and a wide one that fills in the letterforms acts as a halo and counts as the background.
Two normative details catch careful teams. Setting a text color where nothing supplies a background color is itself a documented failure, and so is the reverse, because the missing half then comes from the reader's own settings and nobody can evaluate what that will be. Inheritance counts as supplying it, so the pair does not have to be declared on the same rule or even in the same stylesheet. What fails is the element that reaches the screen with only one of the two. And you measure the colors in the CSS rather than the pixels in a screenshot. Anti-aliasing can be switched off for the purpose, since those smoothed edge pixels are not the thing being tested.
The exemptions are narrower than the use they get. Logos and brand names carry no contrast requirement, and neither does text in an inactive component, in pure decoration, or in a picture that carries a lot of other visual content. Your navigation and your buttons are not exempt for using brand colors. And a logo that doubles as the home link is still an interface component, so the 3:1 rule for components reaches it even where the text rule does not.
Why it matters
Low contrast text was the failure found on more home pages than any other in 2026, on 83.9% of the top million, up from 79.1% the year before. The same handful of errors has topped that list for seven years running. Pages carried 34 distinct instances of it on average, and that number is what tells you what kind of problem this is. Not 34 decisions. A few color tokens, used everywhere. Where a site really is built that way, this is the cheapest thing on the whole list to fix, because it gets settled once at the palette stage and every page after that inherits the answer.
Where 4.5 to 1 comes from
The number is not arbitrary. It is the ratio that compensates for the contrast sensitivity lost at roughly 20/40 vision, which is the typical acuity of somebody around 80. The AAA figure of 7:1 does the same job for 20/80. So the AA threshold is not a designer's preference dressed up as arithmetic. It is an eye test, written as arithmetic.
Where this shows up on the site
Related terms
- Color blindnessColor blindness is a reduced ability to tell certain colors apart, and the figure everybody quotes, roughly 1 in 12 men and 1 in 200 women, is for red-green deficiency among people of Northern European descent.
- Low visionLow vision is sight loss that ordinary glasses cannot correct, and it covers far more ground than a single blurred-vision picture suggests.
- High contrast modeHigh contrast mode is an operating-system setting that throws away most of a site's colours and paints the page in a palette the user chose.
- PerceivablePerceivable is the first of WCAG's four principles, and the standard states it as information and user interface components being presentable in ways people can perceive.
- Focus indicatorA focus indicator is whatever pixels change to show that a control is focused.
Knowing the word is the easy part.
Find out where your own site stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, separates 27 best-practice checks from its WCAG findings, and names the rule behind every result.