Stop guessing whether your buttons pass accessibility. Here's the exact ratios, the difference between AA and AAA, and the 4 most common ways designers fail the check.
If you've heard "your contrast doesn't meet WCAG AA" in a design review and nodded politely while wondering what that actually means — this is for you. Sixty seconds, no jargon, every number you need to remember.
WCAG (Web Content Accessibility Guidelines) defines a minimum contrast ratio between text and its background. The ratio is a number from 1:1 (identical colors, invisible text) to 21:1 (pure black on pure white).
Four thresholds matter:
3:1 — minimum for large text and UI components at level AA
4.5:1 — minimum for normal text at level AA
4.5:1 — minimum for large text at level AAA
7:1 — minimum for normal text at level AAA
That's it. If your text-on-background ratio hits the number for the level you're targeting, you pass.
Per WCAG: 18pt or larger (about 24px), OR 14pt bold or larger (about 18.66px bold). Anything smaller is "normal text" and needs the higher ratio.
This matters because the "large text" threshold (3:1 for AA) is much easier to pass than the "normal text" threshold (4.5:1). If your headings use a colored accent that fails as body text, it might still pass at heading sizes.
AA is the legal compliance floor in most jurisdictions. The Americans with Disabilities Act (ADA), the EU's European Accessibility Act (EAA), the UK Equality Act, and Section 508 (US federal contractors) all reference WCAG 2.1 AA as the standard. If you're building a commercial site that anyone in those jurisdictions might use, AA is what you legally need.
AAA is the ideal level. It's recommended for content where accessibility is critical — government services, healthcare, education, banking, and emergency information. Most consumer products don't target AAA because hitting 7:1 for normal text radically restricts your color palette (essentially black or near-black on white, or white on near-black).
Lifestyle and minimalist designs love #999 on white. It looks elegant. It's also 2.85:1 — failing AA for both normal and large text. The minimum gray-on-white that passes AA for body text is around #767676.
Mid-saturation oranges, yellows, and greens look great as accents but fail as text. Pure #FFA500 (orange) on white is 1.97:1 — doesn't even pass for large text. Either darken the orange significantly, or use the orange as the button background with white text.
Form-field placeholders styled as color: lightgray (#D3D3D3 on white = 1.61:1) are technically not "essential text" per WCAG — but in practice, users with vision impairments need to read them. Aim for at least 4.5:1 even on placeholders.
Dark mode designers sometimes inverse from #000 on white to #FFF on black, which is 21:1 — technically passing, but harsh. The fix is usually #E0E0E0 on #121212 (around 16:1) — still passes AAA, easier on eyes. Watch out for pure white on dark backgrounds; it causes "halation" for some readers.
The fastest workflow is to drop two colors into a checker and read the badges. Our WCAG color contrast checker renders both normal-text and large-text samples on your chosen background and shows AA / AA Large / AAA / AAA Large badges simultaneously.
If anything fails, the "Suggest Fix" button nudges the lightness up or down until you cross the next compliance threshold. Faster than picking a new color from scratch.
Lighthouse (Chrome DevTools) — checks every text node on the page; flags failures with the actual ratio.
axe DevTools — deeper accessibility audit with the same contrast rules.
Stark (Figma / Sketch plugin) — checks contrast in the design file before code is written.
Manual checking — our contrast checker for spot-checking specific combinations.
WCAG 3 is still a draft (as of 2026) and uses APCA (Advanced Perceptual Contrast Algorithm), which is significantly better at modelling perceived contrast on modern high-DPI screens and in dark mode. The Polypane and Stark teams already offer APCA modes alongside WCAG 2.1.
For now, target WCAG 2.1 AA — it's what auditors check and what regulations require. Watch the APCA draft because the goalposts will move within the next few years.
Normal text, AA: 4.5:1 — minimum for body text on a commercial site
Large text, AA: 3:1 — OK for headings ≥ 24px or ≥ 18.66px bold
UI components & graphics, AA: 3:1 — icons, focus rings, button outlines
Normal text, AAA: 7:1 — for government / healthcare / banking
Large text, AAA: 4.5:1 — for high-stakes content with large type
Bookmark a contrast checker, run every text-background pair through it before handoff, and you'll never get the "your contrast doesn't pass" comment in code review again.
If you serve customers in the EU (EAA), the US (ADA), the UK (Equality Act), or accept US federal contracts (Section 508), yes — AA compliance is the legal floor. Even outside those jurisdictions, AA compliance is the industry standard and competitor-level expectation.
Test the design system / token palette once, then every text-background combination that appears in your component library. If new components use only approved tokens, you don't need to re-test every page.
WCAG strongly discourages images of text (use real text plus CSS instead) precisely because contrast can't be checked or adjusted by users. If you must use an image of text, treat it like normal text and pick colors that pass AA.
Drop the brand color and your background into a checker. If it fails, two fixes: (1) use the brand color only as a background with white text on top, or (2) darken the brand color until it passes — then update your design tokens accordingly.
WCAG 2.2 (2023) is a small update to 2.1 with nine new success criteria, mostly around mobile interaction and focus indicators. Contrast rules are unchanged. AA compliance against 2.1 satisfies almost all regulations; check 2.2 for new requirements.
Creating helpful tools and sharing productivity insights to make your work easier.
Convert dates between DD/MM/YYYY, MM/DD/YYYY, YYYY-MM-DD, and 20+ other date formats. Free online date format converter with custom format support and one-click copy.
Send a WhatsApp message to any number without saving it to your contacts. Free, instant, no signup — perfect for businesses and one-off chats.
Generate custom QR codes for URLs, vCards, Wi-Fi, text, and more — high-resolution PNG and SVG download, free.
Convert between gold karats, purity percentage, touch, tunch, and 916/750/585/375 hallmark markings. Free online gold karat calculator and purity converter.
Convert byte arrays to strings online. Decode space- or comma-separated bytes (decimal, hex, or binary) to UTF-8 text. Free browser-based byte-to-string converter.