Pale grey text on a white background looks “clean” — until someone with low vision tries to read your pricing table. WCAG measures contrast as a ratio between foreground and background luminance. For normal-sized body text, Level AA asks for at least 4.5:1. Large text (roughly 18pt+ or 14pt+ bold) can use 3:1. User interface components and graphics that convey information need at least 3:1 against adjacent colours.
How to check in under a minute
Use a contrast checker with an eyedropper (WebAIM’s Contrast Checker is a solid free option). Sample the text colour and the background colour — not a nearby shadow or photograph. If you use text on a gradient or photo, test the worst spot. If it fails, darken the text or lighten the background until the ratio passes.
Buttons and links
“Ghost” buttons with thin coloured outlines often fail because the label colour does not contrast enough with the page background — or the focus ring is invisible. Primary call-to-action buttons should use a solid fill with text that clears 4.5:1 against that fill. Do not rely on colour alone to state meaning; pair hue with weight, iconography, or text.
Brand colours that fail AA
You rarely need to throw away a palette. Adjust lightness until the pairing passes, then use the stronger mix for body copy and keep pastel shades for large headings or backgrounds. Document approved pairs in a short brand note so the next update does not undo your work.
Need help auditing your templates? We review contrast, focus, and components together as part of our accessibility work.