Most articles about color contrast ratio accessibility stop at one sentence: “use 4.5:1 for normal text and 3:1 for large text”. That is true, but it does not help when you are staring at a button, an icon set, a card border and a placeholder label, and you need to know which number applies to each one.
This guide breaks down exactly which WCAG ratio applies to every element on a page, and gives you real hex pairs with their measured ratios so you can audit your palette without guessing. Everything below is based on WCAG 2.2 Level AA, which is the version referenced by the European Accessibility Act and by most procurement requirements today. There is more on it in Use sufficient color contrast.
The two numbers that matter: 4.5:1 and 3:1
WCAG uses a contrast ratio scale that runs from 1:1 (two identical colors) to 21:1 (pure black on pure white). Two success criteria do almost all of the work:
- 1.4.3 Contrast (Minimum), Level AA: text and images of text need 4.5:1, or 3:1 if the text is large.
- 1.4.11 Non-text Contrast, Level AA: user interface components and meaningful graphics need 3:1 against adjacent colors.
So the mental model is simple: if a user reads it as text, the default is 4.5:1. If a user needs to see it but not read it, the default is 3:1.
What counts as “large text”?
This is where a lot of designers slip, because the threshold is defined in points, not pixels.
| Text style | Size threshold | Required ratio (AA) |
|---|---|---|
| Regular weight | 18pt and up (about 24px) | 3:1 |
| Bold weight (700+) | 14pt and up (about 18.66px) | 3:1 |
| Everything smaller | Under those sizes | 4.5:1 |
Practical warning: a 20px bold subheading is not large text at 18.66px… it is, actually, because bold at 18.66px qualifies. But a 20px regular subheading is not large text and still needs 4.5:1. Mixed weights inside the same heading scale are the single most common source of audit failures we see.
Quick reference: which ratio applies to which element
| Element | Measured against | Minimum (AA) |
|---|---|---|
| Body copy, lists, captions, footnotes | Background behind it | 4.5:1 |
| Large headings (24px+ regular / 18.66px+ bold) | Background behind it | 3:1 |
| Button label text | Button fill color | 4.5:1 (3:1 if large) |
| Button fill or outline (so the button is identifiable) | Page background | 3:1 |
| Input field border | Surrounding background | 3:1 |
| Placeholder text | Field background | 4.5:1 |
| Icons that carry meaning (search, menu, close, status) | Background behind them | 3:1 |
| Focus indicator ring | Adjacent colors | 3:1 |
| Chart lines, data points, map keys | Background and neighbouring segments | 3:1 |
| Decorative dividers, card shadows, purely aesthetic graphics | Not applicable | No requirement |
| Logos and brand marks | Not applicable | Exempt |
| Disabled buttons and inputs | Not applicable | Exempt |
Body copy: pass and fail hex pairs on white
Gray text on white is where most brand palettes quietly fail. The dividing line on a #FFFFFF background sits between #767676 and #777777, which is a one-step difference in hex that flips a page from compliant to non-compliant.
| Text color | Background | Ratio | Normal text (4.5:1) | Large text (3:1) |
|---|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | Pass | Pass |
| #595959 | #FFFFFF | 7.0:1 | Pass (also AAA) | Pass |
| #767676 | #FFFFFF | 4.54:1 | Pass (lightest safe gray) | Pass |
| #777777 | #FFFFFF | 4.48:1 | Fail | Pass |
| #E63946 | #FFFFFF | 4.17:1 | Fail | Pass |
| #949494 | #FFFFFF | 3.03:1 | Fail | Pass (barely) |
| #AAAAAA | #FFFFFF | 2.32:1 | Fail | Fail |
Rule of thumb for a white background: #767676 is the lightest gray that passes for text, and #949494 is the lightest gray that passes for icons and borders. Anything lighter is decorative only.
Error messages and helper text
Red error text at 13px is a classic fail. #E63946 on white measures 4.17:1, which is close but not compliant. Darkening to #C1121F or #B00020 pushes you past 4.5:1 while keeping the red reading as an error state. Never rely on the red color alone either, since users with color blindness need the icon or the text label to carry the meaning.
Buttons: three separate checks, not one
A button is where people most often misapply the rules. There are up to three measurements on a single component:
- Label against the fill: 4.5:1 for normal size labels, 3:1 if the label is 24px regular or 18.66px bold and up.
- Fill or outline against the page background: 3:1, so the user can tell a control exists. A white button on a #F7F7F7 card fails this.
- Focus and hover states: the focus indicator needs 3:1 against adjacent colors, and hover states still need to pass the label check.
| Label | Button fill | Ratio | Verdict |
|---|---|---|---|
| #FFFFFF | #2563EB | 5.17:1 | Pass at any size |
| #FFFFFF | #0D6EFD | 4.50:1 | Pass, but zero margin for error |
| #FFFFFF | #4A90E2 | 3.29:1 | Fail for normal labels, pass for large labels |
| #FFFFFF | #4CAF50 | 2.78:1 | Fail at every size |
| #000000 | #4CAF50 | 7.55:1 | Pass, the fix is dark text, not a new green |
| #FFFFFF | #FFA500 | 1.97:1 | Fail badly, the most common CTA mistake |
| #1A1A1A | #FFA500 | 8.81:1 | Pass |
Ghost and outline buttons
Outline buttons have no fill, so the border itself is the only visual boundary. That border must hit 3:1 against the page background. A #DDDDDD border on white sits at 1.36:1 and fails. Move it to #949494 or darker.
Text links inside paragraphs
Links need 4.5:1 against the background like any other text. If you remove the underline and rely on color alone to signal the link, the link color must also reach 3:1 against the surrounding body text color. In practice, keeping the underline is far easier than hitting both targets at once. There is more on it in WCAG Color Contrast Checker.
Icons and graphical objects
Success Criterion 1.4.11 covers any graphic a user needs to perceive in order to understand the content or operate the interface: a hamburger menu, a search magnifier, a close X, a required field asterisk, a status dot, a chart line. All of those need 3:1 against what sits behind them.
| Icon color on #FFFFFF | Ratio | Icon (3:1) | If paired with a text label (4.5:1) |
|---|---|---|---|
| #6C757D | 4.69:1 | Pass | Pass |
| #0D6EFD | 4.50:1 | Pass | Pass |
| #949494 | 3.03:1 | Pass | Fail |
| #4CAF50 | 2.78:1 | Fail | Fail |
| #CCCCCC | 1.61:1 | Fail | Fail |
How much of the icon has to pass?
You do not need every pixel of a multicolor icon to reach 3:1. You need the parts that are required to identify the icon. For a line icon, that means the stroke. For a filled icon, the silhouette. A soft inner highlight that could be removed without changing the meaning does not need to be measured.
Borders, inputs and focus rings
- Input borders: 3:1 against the surrounding background. The popular #DDDDDD or #E5E7EB field border on white is a guaranteed audit finding.
- Table and card borders: only required to pass if they are the thing that communicates structure. If headers, spacing and labels already do that job, a light divider is decorative.
- Focus indicators: 3:1 against adjacent colors, and under WCAG 2.2 the focused element must not be hidden behind sticky headers or cookie banners (SC 2.4.11). Never ship
outline: nonewithout a replacement. - Placeholder text: treated as text, so 4.5:1. If your placeholder has to be pale to look like a placeholder, use a visible label above the field instead and skip the placeholder entirely.
What is exempt from the contrast rules
- Logos and brand names as part of a logo. Your logo does not have to pass.
- Disabled controls and inactive components. They still should not look identical to active ones, but they have no ratio requirement.
- Purely decorative text or graphics that convey no information.
- Incidental text, such as text that happens to appear inside a photograph of a street scene.
Exempt does not mean invisible is fine. If a disabled button is the only thing stopping a user from completing a form, that is a usability problem even when it passes an automated scan.
Level AAA, and when it is worth it
Level AAA (SC 1.4.6) raises the bar to 7:1 for normal text and 4.5:1 for large text. AAA is not expected across an entire site, and WCAG itself says conformance at AAA for a full site is not achievable for some content. We recommend targeting AAA for:
- Long-form reading content, articles and documentation
- Healthcare, government, banking, utilities and education sites
- Any audience skewing over 60, where contrast sensitivity drops naturally
#595959 on #FFFFFF hits exactly 7.0:1, which makes it a convenient AAA body text color that is still softer than pure black.
Check your whole palette in five steps
- Write your palette down as hex values, including every background tint you use for cards, alerts and sections, not just your brand colors.
- Build a contrast grid. Test each foreground against each background you actually pair it with. A color is never “accessible” on its own, only in a pair.
- Tag each pair with its job: body text (4.5:1), large heading (3:1), icon or border (3:1), decorative (no limit).
- Fix by adjusting lightness, not hue. You can almost always keep the brand hue and darken or lighten it until it clears the threshold.
- Record the approved pairs in your design system as tokens, for example
text-muted= #767676 on white only. That stops the problem from coming back on the next landing page.
Tools we use
- WebAIM Contrast Checker for quick two-color checks
- TPGi Colour Contrast Analyser (desktop) for eyedropper testing on live screens, images and PDFs
- Chrome DevTools, which shows the ratio directly in the color picker and in the Elements pane
- axe DevTools or Lighthouse for page-wide scans
Automated scanners cannot evaluate text over gradients, video or photographic backgrounds, and they frequently skip SVG icons. Those always need a manual eyedropper check against the lightest and the darkest point behind the element.
Dark mode has its own traps
The same ratios apply in dark mode, but two issues show up repeatedly:
- Pure white on pure black (#FFFFFF on #000000) is 21:1 and technically perfect, but causes halation for many readers with astigmatism. #E0E0E0 on #121212 measures 14.2:1 and is far more comfortable.
- Saturated brand colors invert badly. A blue that passes on white will often fail on a dark surface. Dark mode needs its own tested token set, not a filter.
Five contrast failures we fix on almost every audit
- Light gray placeholder and helper text under 4.5:1
- White labels on orange, light green or light blue CTA buttons
- Input borders at #DDDDDD or lighter
- Icon-only buttons in headers and footers sitting under 3:1
- Hero text over a photo with no overlay, where contrast changes depending on the crop and the viewport
FAQ
What is a good contrast ratio for accessibility?
4.5:1 is the minimum for normal body text at Level AA, 3:1 for large text and for non-text elements like icons and borders. Aim for 7:1 on body copy if you want Level AAA and a comfortable reading experience.
Does the 3:1 rule apply to all headings?
No. It applies only to headings that meet the large text definition: at least 24px regular or 18.66px bold. A 20px regular h3 still needs 4.5:1.
Do icons really need to pass contrast rules?
Meaningful icons do, at 3:1 under SC 1.4.11. Purely decorative icons that duplicate an adjacent text label and add no information are not required to pass, though keeping them visible is still better design.
What colors provide the best contrast for accessibility?
Very dark neutrals on very light neutrals, and the reverse. Dark navy, charcoal and near-black on white or off-white give you headroom. The hardest combinations are mid-tone yellow, orange, light green and cyan paired with white, because those hues are inherently bright.
Is contrast measured against the element behind the text or the page background?
Against whatever is immediately behind it. Text on a tinted card is measured against the card color, not the page. If text sits on a gradient or image, measure the worst point behind the text.
Does opacity affect the ratio?
Yes. A color at 60% opacity blends with what is behind it, and the ratio must be calculated on the resulting blended color. Set explicit hex values instead of relying on opacity for muted text. For the wider picture, see Color contrast checker.
Will APCA replace the 4.5:1 and 3:1 ratios?
APCA is a perceptual contrast model being explored for WCAG 3.0, but WCAG 3.0 is still a working draft. As of today, conformance, audits and legal requirements are based on WCAG 2.1 and 2.2, so keep using 4.5:1 and 3:1.
How does color contrast affect accessibility overall?
Low contrast is one of the most frequently detected issues on home pages worldwide. It affects users with low vision, color vision deficiency and age-related contrast loss, and it affects every user reading on a phone in sunlight. Fixing it is usually a CSS change with no layout impact, which makes it the highest return accessibility work you can do.
Need a second set of eyes on your palette?
At Zach’s Web Designs we run full WCAG 2.2 AA contrast audits, deliver a corrected token set with documented hex pairs, and implement the changes so your brand still looks like your brand. Get in touch and we will review your current color system and send back a pass/fail grid for every pairing on your site.