The gray text era, and my part in it
For a stretch of the 2010s, half the web set its body text in light gray because it looked refined in design mockups. I was a full participant. I shipped a marketing site with body copy in #999999 on white, and when an older client told me he could not comfortably read his own homepage, I quietly checked the numbers. That gray measures about 2.8:1 against white. The accessibility guideline asks for 4.5:1. I had shipped text that was, by the math, nearly half as distinct as the minimum.
The fix took minutes and the site looked better, not worse. That experience is why I treat contrast checking as a design step rather than a compliance chore, and why this guide focuses on what the numbers mean and how to negotiate with them, not just on passing an audit.
What a contrast ratio actually measures
A contrast ratio compares the relative luminance of two colors: roughly, how much light each one emits to the eye, weighted by how sensitive human vision is to red, green, and blue. Green counts most, blue least. The ratio runs from 1:1, identical colors, to 21:1, pure black on pure white. It is a property of the color pair, so orange text on white scores exactly the same as white text on orange.
The formula lives in the WCAG spec and every checker implements it identically, so there is nothing subjective to argue about. Paste two hex values into a color contrast checker and the answer is the answer. If your colors live in RGB, HSL, or brand books with odd notations, a color converter gets them into comparable form first.
One number worth memorizing: #767676 is about the lightest gray that still passes 4.5:1 on a white background, at roughly 4.54:1. The visually similar #777777 comes in near 4.48:1 and fails. The threshold is a real line, and the difference of one hex step can sit exactly on it.
Why 4.5:1, and what AA and AAA mean
The 4.5:1 figure is not arbitrary taste. As the W3C's explainer describes, it was chosen to compensate for the contrast sensitivity typically lost with moderately low vision and with normal aging, so that text remains readable for far more people than a designer's own eyes suggest. Level AA, the standard most organizations target and the one referenced by most legal frameworks, requires 4.5:1 for normal text. Level AAA raises that to 7:1 for situations demanding more headroom.
In practice: treat AA as the floor for everything users must read, and reach for AAA on long-form reading experiences, older audiences, and anything medical, financial, or governmental. AAA everywhere is a nice ambition that most brand palettes cannot survive; AA everywhere is simply the job.
The large text exception, precisely
Big letters are easier to read at lower contrast, and the guidelines acknowledge it. Text that is at least 24 CSS pixels tall, or at least 18.66 pixels and bold, counts as large text and needs only 3:1 at level AA. The spec phrases this as 18 point, or 14 point bold, and the pixel equivalents assume the standard conversion of 1 point to 1.333 pixels: 18 times 1.333 is 24, and 14 times 1.333 is 18.66.
This exception is a legitimate design tool, not a loophole. A hero headline at 48 pixels can wear a softer brand color at 3:1 while the body text below it holds the 4.5:1 line. What the exception does not cover: buttons with normal-sized labels, navigation links, captions, and placeholder text. Those are normal text no matter how decorative they feel.
Two related traps. Thin font weights at large sizes pass the ratio but read worse than the number implies, because the strokes carry less ink. And text over photos has no single background color; check the lightest region the text actually crosses, sampling it with an image color picker rather than eyeballing.
When your brand color fails: the worked example
Here is the conversation every marketing team eventually has. Suppose the brand orange is #FF6600. Against white it measures about 2.9:1. That fails AA for normal text at 4.5:1 and even misses the 3:1 large text line. The brand book says use the orange; the math says nobody with tired eyes can read it. Both sides are holding real requirements.
The resolution is a role split, not a rebrand. Keep #FF6600 for what it does well: large graphic shapes, backgrounds, illustrations, accents. For text and interactive labels, create a darker sibling in the same hue family. A shade like #B34700 keeps the orange character and measures about 5.5:1 on white, comfortably past AA. Most established brands quietly run exactly this system: a display version and a text version of each signature color.
The other lever is flipping the pair. White text on that same #FF6600 scores the identical 2.9:1, but black text on the orange measures about 7.2:1, passing easily. Same brand color, same button, different ink. If you are auditing an existing site, pull its real palette with a color palette extractor first; the colors actually shipped are often not the colors in the brand book.
Beyond text: the other 3:1 rule
WCAG also asks 3:1 for non-text essentials: form field borders, focus indicators, icons that carry meaning, and the parts of charts a user must distinguish. This is the quieter failure mode. A pale gray input border on a white form can be invisible to exactly the users who most need to find it, while every line of text on the page passes.
Color alone as a signal is the related sin. If the only difference between a valid and invalid field is red versus green, users with the most common forms of color vision deficiency see two identical fields. Pair color with an icon, a label, or a weight change. Contrast gets you seen; redundancy gets you understood.
A workflow that keeps you honest
Check contrast at three moments: when the palette is designed, when components are built, and when real content lands on real backgrounds. The first catch is cheap, the last is where photo overlays and third-party embeds sneak failures back in.
And check with the tool, not your eyes, every time. Designer eyes on bright calibrated monitors are the least representative eyes your product will ever meet. The ratio is objective, takes seconds to verify, and does not care how the color looked in the pitch deck. That indifference is exactly what makes it useful.
Questions people ask
No. Logos, brand names in logos, and purely decorative text are explicitly exempt from the contrast minimum. The line is function: if a user needs to read it to use the page, it needs the ratio; if it is ornament, it does not.
At least 18 point, which is 24 CSS pixels, at any weight, or at least 14 point, which is about 18.66 pixels, if bold. Large text needs 3:1 at level AA instead of 4.5:1. Everything smaller is normal text regardless of how it is styled.
The thresholds are identical; the pairs just flip. Light text on dark backgrounds must hit the same 4.5:1. Watch saturated accent colors especially: shades tuned to pass on white frequently fail on dark gray, so a dark theme needs its own audit, not an inversion.
Legal frameworks in the US, UK, EU, Canada, and Australia generally reference level AA, not AAA. AAA is a voluntary higher bar worth adopting for reading-heavy or vulnerable-audience products. Treat AA as the requirement and AAA as the ambition.
Almost never. Split the color into roles: the original for large graphics and accents, a darker or lighter sibling in the same hue for text and interactive elements, or switch the ink color on top of it. Most failing palettes pass after one or two derived shades are added.