Contrast (Minimum)

What it asks

Text and images of text must have a contrast ratio of at least 4.5:1 against their background. Large text — defined as 18pt (24px) normal weight or 14pt (18.66px) bold — only needs 3:1. The ratio is calculated from the relative luminance of foreground and background. Logos, brand names, and purely decorative text are exempt. Inactive controls are also exempt, but watch out: that exemption is narrower than designers usually think.

How to meet it

• Run every text-on-background combination through a contrast checker (axe DevTools, WebAIM, Stark, Figma plugins). Get to 4.5:1 minimum.
• For light-gray placeholder text in form fields, raise it to at least 4.5:1 against the field background — placeholder is text.
• Audit text-over-image hero sections. The background color varies per pixel, so check the worst-case region or add a dark overlay.
• For dark mode, recompute every ratio — color tokens that pass on white often fail on near-black.
• For brand colors that fail on white, darken the brand for text only; keep the original for graphics.
• For buttons, the label-to-button-background contrast is what counts — not the button-to-page contrast.

Common failures

• Light-gray helper text (#999 on #fff = 2.85:1) on form fields — fails badly.
• White text on a brand-color button where the brand color is mid-saturation (orange, yellow-green, teal).
• Hero headlines placed over photographs with no overlay — contrast varies across the image, often dropping below 3:1.
• Placeholder text using the same color as the label, but at smaller weight, making it the lowest-contrast element on the page.
• “Inactive” or “disabled” buttons styled at 2:1, which is fine if truly non-interactive — but often they’re still tabbable, breaking the exemption.
• Dark-mode tokens that mirror light mode without recalculating ratios — #bbb on #222 is close to compliant but not quite.

Why it matters

1.4.3 is the most-cited single failure in WCAG audits, full stop. Lighthouse, axe, Stark, and every automated tool flag it reliably, so it’s also the cheapest to catch. The fix is usually one design-token change that cascades across the system — make it once, test once, ship. Skipping it is almost always a brand-vs-accessibility tradeoff that ends in a complaint.