Contrast is the one item on this page with a hard, testable standard behind it, so it is worth stating the numbers. WCAG 2.1 level AA requires a contrast ratio of at least 4.5:1 for body text, and 3:1 for large text — which the specification defines as 18.66px bold or 24px regular and above — as well as 3:1 for the visual boundaries of interactive components and meaningful graphics. Level AAA raises body text to 7:1. These are ratios of relative luminance, not of how different two colours look, which is why a mid-grey on white can fail while a saturated blue on white passes comfortably. The same reasoning applies to form controls, which we cover in more depth in building accessible web forms.
Gradients have a subtlety that catches people out: the colour space the browser interpolates in changes the result. A gradient between two complementary hues interpolated in sRGB passes through a desaturated grey in the middle, because it is averaging the red, green and blue channels independently. Interpolating in a perceptual space such as OKLCH keeps the chroma up and produces the vivid midpoint most designers actually wanted. If a two-colour gradient looks unexpectedly muddy in the middle, that is the cause.
Shadows read as more convincing when they are layered rather than single. Real light produces a tight, dark contact shadow immediately beneath an object and a much wider, fainter ambient shadow around it. One large blurred shadow can only approximate one of those at a time, which is why a single box-shadow at high blur tends to look like fog rather than depth. Two or three stacked shadows with increasing blur and decreasing opacity is the standard fix.
Font pairing works on contrast of classification rather than similarity — a geometric sans against a transitional serif reads as deliberate, while two humanist sans faces read as a mistake. Worth remembering while you experiment: every additional weight and style you select is another file the browser has to fetch before text renders. We measured what that costs on this very site in eliminating a render-blocking font request, where a single stylesheet link was holding up first paint by roughly 860 ms.
WCAG 2.1 contrast thresholds
What the contrast checker is testing against:
| Content | AA | AAA |
|---|---|---|
| Body text (under 18.66px bold / 24px regular) | 4.5:1 | 7:1 |
| Large text (18.66px bold / 24px regular and above) | 3:1 | 4.5:1 |
| UI component boundaries, focus indicators | 3:1 | Not defined |
| Meaningful graphics and icons | 3:1 | Not defined |
| Disabled controls, decorative elements | Exempt | Exempt |