Quick answer: WCAG 2.x requires a contrast ratio of at least 4.5:1 between text and its background for Level AA (the standard most sites are held to), and 3:1 for large text (18pt+, or 14pt+ bold). Level AAA raises those thresholds to 7:1 for normal text and 4.5:1 for large text. To check a specific pair of colors, you plug the foreground and background hex codes into a contrast checker and read off the ratio — no eyeballing required.
What a “contrast ratio” actually measures
A contrast ratio is a number between 1:1 and 21:1 that describes the difference in relative luminance (perceived brightness) between two colors. Black text on a white background sits at the top of the scale — 21:1, the maximum possible. Light gray text on a white background might land around 1.5:1, which is why it’s so easy to skim past and so hard to actually read.
WCAG doesn’t ask you to guess whether a pairing “looks readable.” It defines specific numeric thresholds, tied to specific success criteria, that a color pair either meets or doesn’t. That’s what makes contrast checking different from most design decisions — it’s not a matter of taste, it’s a pass/fail test.
WCAG AA vs AAA contrast ratio requirements
The Web Content Accessibility Guidelines define two relevant success criteria: 1.4.3 (Contrast Minimum, Level AA) and 1.4.6 (Contrast Enhanced, Level AAA). Both apply to text, and both scale down for larger text sizes, since bigger characters remain legible at lower contrast than small body copy does.
| Content type | WCAG AA minimum | WCAG AAA minimum |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (18pt+/24px+, or 14pt+/19px+ bold) | 3:1 | 4.5:1 |
| UI components and graphical objects (icons, form borders, focus indicators) | 3:1 | No separate AAA requirement |
| Logos and incidental text | Exempt | Exempt |
Most legal and organizational compliance targets — including the standard usually referenced in ADA-related complaints — point to WCAG 2.1 Level AA. AAA is a stricter bar that WCAG itself notes isn’t achievable for every type of content, so it’s typically reserved for specific pages or sections rather than applied site-wide.
AA or AAA — which one do you actually need?
For nearly all commercial and organizational websites, AA is the target. It’s the level referenced by the most widely used accessibility standards and the one most audits, procurement checklists, and legal settlements are measured against.
AAA is worth pursuing for specific situations: government or public-sector sites with elevated accessibility mandates, content aimed at low-vision or older audiences, or any page where reading is the entire point (documentation, articles, forms collecting sensitive information). Applying AAA everywhere often means giving up color flexibility — many brand palettes simply can’t hit 7:1 without going to near-black text — so most teams treat it as an enhancement for critical content, not a blanket requirement.
How to check color contrast on your own site
- Identify the foreground and background colors as hex, RGB, or HSL values. If you only have a screenshot or a design file, a color picker lets you sample the exact pixel color instead of guessing.
- Enter both colors into a contrast checker. ToolPremier’s color contrast checker calculates the ratio instantly and tells you whether the pair passes AA and AAA, for both normal and large text.
- Check every meaningful text/background pair — body copy, headings, links, button labels, placeholder text, and disabled states. A homepage that passes for its main paragraph text can still fail on light gray captions or a low-contrast “Learn more” link.
- Adjust the color that failed and re-check. Usually this means darkening text, lightening a background, or both — small shifts in lightness move the ratio more than shifts in hue.
- Re-verify after any brand or theme update. A new accent color or a dark-mode variant can silently break contrast on elements that passed before.
If your color values are in different formats across a design system — some in hex, some in RGB from a CSS file — a HEX to RGB converter saves you from converting them by hand before you can compare or plug them into a checker.
Building accessible text color combinations
- Dark text on light backgrounds is easier to get right than the reverse. Near-black text (not pure black, which can feel harsh) on white or off-white generally clears AA and often AAA without extra work.
- Saturated colors deceive the eye. A bright blue or vivid orange can look bold and high-contrast while actually sitting well under 4.5:1 against a white background, because saturation isn’t the same as luminance difference. Always check the ratio — don’t judge by how “loud” a color looks.
- Brand colors often need a darker or lighter variant for text use. If your primary brand blue fails against white, keep it for buttons and accents, and create a darker shade specifically for text-on-background use.
- Test placeholder text and disabled states separately. These are usually styled in light gray by default and are among the most common contrast failures on real sites, since they’re easy to overlook during design review.
- Don’t forget dark mode. A palette that passes in light mode needs its own contrast check in dark mode — inverting colors doesn’t automatically preserve the ratio.
Common contrast mistakes on real sites
- Light gray body text. A popular design trend — soft gray paragraph text on white — frequently lands between 2:1 and 3.5:1, well under the 4.5:1 minimum. It reads fine to someone with strong vision on a bright screen and poorly for almost everyone else.
- White text over photo hero banners. Contrast depends on the pixels directly behind the text, and photos rarely have uniform luminance. A headline that’s readable over a dark corner of an image can disappear over a lighter patch a few inches away. A solid overlay or gradient behind the text is the usual fix.
- Low-contrast links that rely on color alone. A blue link on white can pass the ratio test and still be hard to distinguish from surrounding text for color-blind users if underline or weight isn’t also used as a signal.
- Hover and focus states that get skipped. Teams often check the default state of a button or link and never verify the hover, active, or focus-visible color variants, which can drift out of range independently.
- Placeholder text styled too light. Browsers often render placeholder text in a pale gray by default, and many teams never override it, leaving form fields with contrast well under 3:1.
ADA website compliance and color contrast
The Americans with Disabilities Act doesn’t contain its own technical color standard, but WCAG 2.1 Level AA has become the reference point most commonly cited in accessibility complaints, settlements, and organizational compliance policies for web content. Failing to meet contrast requirements is one of the more frequent issues flagged in accessibility audits, since it’s easy to introduce (a brand refresh, a new theme, a well-intentioned but under-contrasted color choice) and easy to overlook without deliberately checking for it.
If accessibility compliance is a business requirement for your organization — because of sector regulations, a vendor contract, or your own policy — treating contrast checking as a routine step in your design and QA process is far cheaper than fixing it after a complaint. Running your palette through a checker before launch, and again after any visual redesign, is the practical way to stay ahead of it.
Frequently asked questions
What counts as “large text” under WCAG?
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (about 19px) or larger for bold weight. Large text gets a lower contrast requirement — 3:1 for AA instead of 4.5:1 — because bigger, bolder characters stay legible at lower contrast than small body text does.
Does contrast apply to logos and icons?
Logos and brand marks are specifically exempt from WCAG contrast requirements, since altering a logo’s colors to hit a ratio isn’t reasonable. Functional icons and UI components are different — form field borders, button outlines, and focus indicators fall under a 3:1 requirement (Success Criterion 1.4.11) so users can tell where interactive elements are.
Does contrast apply to images with text baked in?
Yes, if the text is meant to convey information rather than serve as decoration. Text embedded in a hero banner or promotional graphic is generally held to the same contrast standard as live HTML text, unless it qualifies as “incidental” (text that appears in a photo by chance, not placed for communication).
What’s the difference between contrast ratio and color blindness?
They’re related but not the same check. Contrast ratio measures luminance difference and is calculated the same way regardless of hue. Color blindness accessibility is about not relying on color alone to convey information (like using only red vs. green to indicate error vs. success). A pairing can pass the contrast ratio test and still be a poor choice for color-blind users if color is the only signal being used — pairing color with an icon, label, or pattern solves that separately.
Can I just use pure black and white everywhere to be safe?
It would pass, but it’s rarely necessary and not always desirable — pure black (#000000) on pure white (#FFFFFF) can cause eye strain for some readers over long reading sessions. Near-black (like #1A1A1A or #0F172A) on off-white or white typically still clears AAA while feeling softer.
Do I need to check contrast ratio for every single color on my site?
Only pairs where text sits on a background — that’s what the success criteria cover. You don’t need to check decorative backgrounds behind images, borders with no text, or colors that never appear adjacent to text. Focus your checking on body copy, headings, links, buttons, form labels, and any UI component that needs to be visually distinguishable.
Check your colors before you ship
Guessing whether a color pairing “looks readable enough” is how contrast failures end up in production. The fix is a 10-second check: drop your foreground and background colors into ToolPremier’s Color Contrast Checker, get the exact ratio, and see immediately whether it clears AA or AAA for your text size. It runs entirely in your browser, so nothing about your palette or your site ever gets uploaded anywhere — check as many combinations as you need, for free.
