To meet WCAG 2.1 AA, your normal text needs a contrast ratio of at least 4.5:1 against its background, and large text needs at least 3:1. To fix low contrast, you find the failing text and background colors, then darken the text or lighten the background (or vice versa) until a contrast checker shows the ratio passing. That is the whole job. The rest of this guide is the experience: how to find every failing spot efficiently, how to pick a passing color without wrecking your brand, and the traps we hit ourselves so you can skip them. Contrast is one item on the full ADA website compliance checklist.
This is a hands-on guide, not a theory piece. We fix contrast issues on real sites constantly, and low contrast is the single most common one we see, so we have turned the process into a repeatable routine you can follow start to finish.
Why fix color contrast first?
Because it is the highest-volume accessibility problem on the web, and one of the easiest to fix. According to the WebAIM Million report summarized in our accessibility statistics guide, low contrast text appears on around 83.9% of home pages, making it the most commonly detected WCAG failure, with an average of 34 distinct instances per affected page. If you fix one category of accessibility issue this week, contrast is the one that clears the most barriers for the least effort.
It also matters to real people, not just scanners. Low contrast is the barrier that affects the widest group: users with low vision, color blindness, aging eyes, cheap displays, and anyone reading on a phone in sunlight. Getting it right is a small change with a broad payoff.
What contrast ratio do I need? (the exact thresholds)
This is the question people search for most, so here it is precisely, with no ambiguity. The standard is WCAG 2.1, and Level AA is the level referenced by most laws and the level you should target.
For Level AA, normal text needs a contrast ratio of at least 4.5:1, and large text needs at least 3:1. Non-text elements such as icons, form input borders, and other UI components also need at least 3:1. For the stricter Level AAA, normal text needs 7:1 and large text needs 4.5:1, but AA is the practical target unless you have a specific reason to go higher.
The one detail that trips everyone up is the definition of "large." Large text means at least 18pt, which is typically 24px, at a normal weight, OR at least 14pt, typically about 18.66px, when bold. Below those sizes, text is "normal" and must clear the higher 4.5:1 bar. So a bold 15px heading is still normal text by WCAG's definition, and needs 4.5:1, which surprises a lot of teams.
Here are the reference thresholds to keep next to you while you work, stated plainly for each case.
Normal text, meaning anything under 24px or under 18.66px when bold, needs a ratio of at least 4.5:1 to pass AA, and 7:1 to reach the stricter AAA. Large text, meaning 24px and up, or 18.66px and up when bold, needs at least 3:1 for AA and 4.5:1 for AAA. Icons, input borders, and other non-text UI components need at least 3:1, and that threshold is the same whether you are targeting AA or AAA.
One warning from experience: you cannot round up. A contrast ratio of 4.47:1 does not pass the 4.5:1 requirement, even though it looks close. The common gray #777777 on white lands at about 4.47:1 and fails, while #767676 on white reaches roughly 4.54:1 and passes. Precision matters here, so always read the actual number rather than eyeballing it.
Step 1: Find every low-contrast spot on your page
Do not hunt for these by eye. You will miss half of them, because contrast failures hide in placeholder text, disabled states, footer links, text over images, and hover styles you rarely look at. Use a tool to enumerate them first.
The fastest approach is an automated scan that reports each failing text and background pair with its measured ratio, so you get a complete list instead of guessing. You can run a free Sitejar scan on your site, up to five pages, no signup, and it flags the contrast failures alongside the rest of the accessibility picture, each mapped to the WCAG criterion it fails. Seeing the exact color pairs and ratios is what turns "somewhere on this page" into a concrete to-do list. If you want to see what that kind of report looks like before scanning your own site, Sitejar publishes its own public compliance report that shows the format.
For spot-checking individual colors as you work, keep a contrast checker open. WebAIM's contrast checker is the reference tool: you paste a foreground and background hex value and it shows the ratio and whether it passes AA and AAA for normal and large text. You will use it constantly in the next step.
Step 2: Fix the color (without breaking your brand)
Once you have a failing pair, you have three levers, and the right choice depends on the design.
The first and usually best option is to darken the text. Most failures are light gray text on white, so nudging the text darker is the least disruptive fix. Take your current text color into the contrast checker and step it darker until the ratio crosses 4.5:1 for normal text. Often a small change is enough, for example moving from a failing light gray to #767676 or darker on a white background.
The second option is to lighten or change the background behind the text, which is useful when the text color is part of your brand and you would rather not touch it. A slightly deeper or lighter background panel behind a block of text can lift the ratio without altering the text color at all.
The third option, for brand colors specifically, is to reserve the exact brand color for large text or non-text uses where the 3:1 threshold applies, and use a compliant darker variant for body copy. This is how teams keep a recognizable brand while still passing. Your brand blue might fail as 14px body text but pass comfortably as a 28px heading, so use it there.
Two practical notes from doing this repeatedly. Fix it at the source, in your CSS variables or design tokens, not on individual elements. Contrast failures almost always come from a shared color token used in dozens of places, so correcting the token fixes every instance at once, the same way you would fix any repeated issue in one place rather than patching each occurrence. And do not forget the states: check placeholder text, disabled buttons, links on hover and focus, and text over background images, because these are the failures that survive a first pass.
Step 3: Verify the fix and prevent regressions
After changing a color, confirm the new pair actually passes by checking the ratio again, not by trusting that it looks better. "Looks better" is not 4.5:1. Then re-scan the page to confirm the count of contrast errors dropped to zero and that you did not introduce a new failure elsewhere with your change. A clean contrast count is not the whole picture, though: our post on what automated scores miss explains why a perfect score is not compliance.
The last step is the one teams skip and regret. Contrast regresses easily, because a future design tweak, a new component, or a marketing color added next quarter can quietly reintroduce a failing pair. Bake the check into your process: add contrast values to your design tokens with their tested ratios noted, and re-scan on a schedule so a new failure shows up in days, not after a complaint. Treating contrast as something you verify continuously, rather than fix once, is what keeps it fixed.
Does pure black on white cause problems too?
This is a question we get a lot, and it is worth answering because the instinct after reading about contrast is to crank everything to maximum. Pure black text on a pure white background is #000000 on #FFFFFF, which scores 21:1, the highest contrast possible, and it passes every WCAG level easily. So it is compliant. The nuance is that some readers, including people with certain forms of dyslexia or visual sensitivity, find maximum contrast harsh and report more eye strain and halation, where letters seem to shimmer. WCAG sets a floor, not a ceiling, so you are never required to reduce contrast, but a very dark gray like #1a1a1a on white still clears AAA comfortably while feeling softer. If your brand leans on pure black, keep it. Just know that "even higher contrast" is not automatically "better for everyone," only "safely above the minimum."
A quick before-and-after to anchor it
To make the fix concrete, picture the most common real example. A site uses light gray body text, #999999, on a white background. Run that pair and it scores about 2.85:1, a clear AA failure for normal text. Darken the text to #767676 and the same pair now scores about 4.54:1, which passes AA for normal text. Nothing else about the layout changed. The text is still gray, still on-brand in feel, and now readable by far more people. That is what almost every contrast fix looks like: a small, deliberate color shift, verified by the number rather than the eye.
The bottom line
Fixing low color contrast is the highest-leverage accessibility work you can do, because it is the most common failure and among the easiest to correct. Target WCAG 2.1 AA, which means 4.5:1 for normal text and 3:1 for large text, remembering that "large" means 24px or 18.66px bold. Find every failing pair with a scan rather than by eye, fix the color at the design-token level by darkening text or adjusting the background, keep brand colors for large or non-text uses where 3:1 applies, and verify with the actual ratio. Then re-scan on a schedule so it stays fixed. Do that, and you remove the single most widespread barrier on your site with changes most visitors will never even notice.
Sources
Sitejar, Web Accessibility Statistics 2026
WebAIM, Contrast and Color Accessibility
This guide is educational and reflects Sitejar's point of view. It is not legal advice. For your specific situation, consult a qualified professional.