WCAG Contrast Checker: How to Test and Fix Your Website Colors for Accessibility
Learn how to test WCAG color contrast, fix failing text and UI colors, and audit website accessibility with real HEX examples.
9 October 2026
Quick Answer
- For WCAG 2.2 Level AA, normal text should have a contrast ratio of at least 4.5:1 against its background.
- Large text can use a minimum contrast ratio of 3:1.
- Meaningful interface controls, boundaries and graphics generally need at least 3:1 contrast against adjacent colors.
- Do not judge contrast by eye. Two colors can look readable on your monitor and still fail mathematically.
- When a color pair fails, you usually only need to darken the text, lighten the background, or replace one shade—not redesign the entire palette.
- Use AutoColorPicker to capture the exact HEX, RGB or HSL values from your live webpage before checking the pair against WCAG requirements.
Light gray text on white can look elegant in a design mockup. On a laptop in bright daylight, it can become almost invisible.
The same thing happens with pale button labels, subtle form borders and text placed over photographs. The design may look polished, but the person using it has to work harder just to read or identify the interface.
A WCAG contrast check turns that visual guess into a measurable answer. You compare the foreground and background colors, check the ratio, and fix the pair if it falls below the required threshold.
Table of contents
What Contrast Ratio Does WCAG Require?
For most web projects targeting WCAG Level AA, these are the numbers worth remembering.
| Content | WCAG AA Minimum |
|---|---|
| Normal text | 4.5:1 |
| Large text | 3:1 |
| Meaningful UI components and graphics | 3:1 against adjacent colors where the visual information is required |
WCAG defines large text as at least 18pt regular or 14pt bold. For normal body copy, links, labels and most button text, use the stricter 4.5:1 threshold.
If you are aiming beyond Level AA, WCAG AAA raises the requirement for normal text to 7:1 and large text to 4.5:1.
What Should You Check on a Real Website?
Do not stop after checking body text. Contrast problems often hide in secondary interface elements.
☐ Body text against page backgrounds
☐ Headings over colored sections
☐ Button labels in default and hover states
☐ Navigation links and secondary links
☐ Form labels, placeholders and validation messages
☐ Input borders and controls that need to remain visible
☐ Icons that communicate meaning
☐ Focus indicators
☐ Text placed over images or gradients
☐ Disabled states separately from active controls
For a redesign, the website palette extraction workflow is a useful starting point because it groups the colors already present on the page before you begin testing them.
How to Run a Website Contrast Audit
1. Pick one page first
Start with the homepage, pricing page or main landing page rather than trying to audit the entire site at once.
2. Capture the foreground color
Pick the exact visible text, icon, border or control color rather than estimating it from a design file.
3. Capture the actual background
This matters especially with tinted sections, gradients and overlays. White is not automatically the background just because the page itself is white.
4. Check the contrast ratio
Run the two exact color values through a WCAG contrast checker and compare the result with the correct threshold for that content.
5. Fix failures without destroying the palette
Change the smallest thing necessary. Often a darker text shade or slightly deeper button color solves the problem while keeping the original design intact.
Real HEX Examples: Pass or Fail?
| Foreground | Background | Contrast | Normal Text AA |
|---|---|---|---|
| #9CA3AF | #FFFFFF | 2.54:1 | Fail |
| #64748B | #FFFFFF | 4.76:1 | Pass |
| #3B82F6 | #FFFFFF | 3.68:1 | Fail |
| #2563EB | #FFFFFF | 5.17:1 | Pass |
| #111827 | #FFFFFF | 17.74:1 | Pass |
The useful lesson is in the blue example. #3B82F6 and #2563EB are visually related, but changing to the slightly darker shade takes white text from a failing 3.68:1 to a passing 5.17:1. You can often fix accessibility without changing the overall character of the design.
Do Not Round Borderline Results
A result of 4.48:1 does not become a 4.5:1 pass because it looks close enough.
For example:
#777777 on #FFFFFF: approximately 4.48:1 — fails 4.5:1 normal-text AA.
#767676 on #FFFFFF: approximately 4.54:1 — passes.
In practice, do not deliberately design right on the threshold. A little extra contrast gives the interface more breathing room.
Common Contrast Failures and the Fastest Fix
Muted gray text on white
This is probably the most common problem in modern interfaces. The muted text looks elegant until it becomes too light for body copy.
Fix: keep the same gray family but move to a darker step.
White text on a bright button
Bright blues, oranges and greens often look strong as swatches but can be too light behind white text.
Fix: darken the button or switch to dark text if it fits the design.
Text over an image
The contrast ratio can change from one word to the next when the background contains light and dark areas.
Fix: add a controlled overlay, move the text, or use a solid text container.
Subtle form borders
If the border is what tells a user where the input exists, making it almost indistinguishable from the background creates an accessibility problem.
Fix: increase border contrast or use another clear visual indicator.
Where AutoColorPicker Fits Into the Contrast Workflow
A contrast checker needs two accurate inputs: the foreground color and the background color.
AutoColorPicker is useful at that first step because it lets you sample the actual visible color from a live webpage and copy its HEX, RGB or HSL value.
1. Open the page you want to audit.
2. Pick the text or UI color with AutoColorPicker.
3. Pick the background directly behind it.
4. Paste both values into a WCAG contrast checker.
5. Compare the result against 4.5:1 or 3:1 as appropriate.
6. Adjust one color, retest and document the final accessible pair.
The website color picker guide is useful when you want to inspect buttons, text, backgrounds and state colors individually.
If the site has dozens of inconsistent colors, start with the full website palette workflow before checking every pair. That makes it easier to see which text, background and CTA combinations repeat across the design.
Recommended real screenshot
Show AutoColorPicker selecting a text color and its background from the same webpage. Beside it, show those two HEX values inside a WCAG contrast checker with the AA pass/fail result clearly visible.
Visible Pixel vs CSS Color: Know Which One You Need
A browser color picker tells you the color you can actually see. That is useful when gradients, transparency, images or overlays affect the final appearance.
Chrome DevTools is more useful when you need to know which CSS declaration or variable produced the color.
The color picker vs DevTools guide explains the difference: use the picker for quick visible-color sampling and DevTools when you need the underlying CSS context or built-in contrast information.
Passing Contrast Is Not the Whole Accessibility Check
A passing ratio does not automatically make the interface accessible.
For example, if an error field is shown only by changing its border from green to red, someone who cannot distinguish those colors may still miss the state.
Better approach: combine color with another signal—text, an icon, underline, shape, label or visible state change—when the color communicates important information.
WCAG Color Audit Checklist
☐ Test normal text at 4.5:1 or higher.
☐ Test qualifying large text at 3:1 or higher.
☐ Check meaningful UI components and graphics.
☐ Audit buttons in default, hover and focus states.
☐ Check form labels and visible control boundaries.
☐ Test text over images and gradients separately.
☐ Do not round a failing ratio up to a pass.
☐ Do not rely on color alone for meaningful states.
☐ Retest after every color adjustment.
FAQs About WCAG Contrast
What is the WCAG AA contrast ratio?
WCAG 2.2 Level AA requires at least 4.5:1 contrast for normal text and 3:1 for qualifying large text.
What counts as large text in WCAG?
WCAG treats text as large when it is at least 18pt regular or 14pt bold. Large text can use the 3:1 Level AA threshold.
Do buttons need WCAG contrast?
Button text follows the relevant text-contrast requirement. Visual information required to identify interactive controls or their state can also fall under the 3:1 non-text contrast requirement.
How do I fix a color that fails WCAG contrast?
Usually, darken the foreground, lighten the background or choose a nearby accessible shade. Retest the new pair rather than judging the change by eye.
Can AutoColorPicker help with a WCAG contrast audit?
Yes, for collecting the exact visible foreground and background colors from a webpage. Copy those values into a WCAG contrast checker to calculate the ratio and confirm whether the combination passes.
Start with the exact colors your visitors actually see
Pick foreground and background colors directly from your website, copy the exact HEX, RGB or HSL values, and use them in your accessibility audit.
Download AutoColorPicker Free