Free Accessibility tool
Color Contrast Checker
Compare a text color with a background color against WCAG 2.2 right here, or enter a page address to find every piece of text below the contrast minimum, with its measured colors and the nearest color that passes.
Contrast calculator
Enter a text color and a background color. Everything is calculated in your browser.
Normal text at 16 pixels looks like this.
Large text at 24 pixels
A button outlineContrast ratio4.54:1
| Normal text, AAWCAG 1.4.3, needs 4.5:1 | Pass |
|---|---|
| Large text, AAWCAG 1.4.3, needs 3:1 | Pass |
| Normal text, AAAWCAG 1.4.6, needs 7:1 | Fail |
| Large text, AAAWCAG 1.4.6, needs 4.5:1 | Pass |
| Icons, borders and form fieldsWCAG 1.4.11, needs 3:1 | Pass |
Nearest text colors that pass on this background
Large text means at least 24 pixels, or 18.66 pixels in bold. Ratios are rounded down, so 4.499:1 shows as 4.49:1 and fails, as WCAG intends.
Or scan a page for low-contrast text
Free. Checks the address you enter in about 20 seconds.
What this tool checks
The WCAG ratio of any two colors
The calculator uses the relative luminance formula from the WCAG 2.2 definitions and shows the result for normal text, large text and interface parts, at AA and AAA. It runs in your browser.
A passing color, calculated
When a pair fails, it finds the nearest text color of the same hue that reaches 4.5:1 or 7:1, so you change as little of your design as possible.
Every low-contrast text on a page
The page scan runs axe-core’s color-contrast rule in a real Chrome browser and lists each failing element with its text color, background color, font size and ratio.
Grouped by color pair
Failures are grouped by text and background color, because one change to a theme color usually fixes every element that uses it.
The right threshold for large text
Text of at least 24 pixels, or 18.66 pixels in bold, needs 3:1 instead of 4.5:1. The scan applies the right threshold to each element from its computed size and weight.
What it couldn’t measure, and why
Text over images, gradients or overlapping elements is listed separately with the reason, so you know exactly what to check by eye.
What it can’t check
- Measure text over photos, gradients or video. Software can’t know which part of an image sits behind each letter, so these are listed for you to check.
- Check hover, focus or other states. The scan sees the page as it loads; check those colors with the calculator.
- Scan icons, borders and form fields on the page for WCAG 1.4.11. The calculator shows the 3:1 result for any pair you enter.
- Read text that is part of an image, such as a banner with the words baked in.
- Test more than the page you enter. The full free scan tests up to five key pages.
Why it matters
Low contrast is the most common accessibility failure on the web. WebAIM’s 2026 analysis of the top one million home pages found low-contrast text on 83.9% of them, with an average of 34 instances per page.
Faint text is hard to read for people with low vision or a color vision deficiency, and for anyone on a phone in bright sunlight. WCAG 2.2 success criterion 1.4.3, at Level AA, sets the minimum at 4.5:1 for normal text and 3:1 for large text.
It is also one of the cheapest problems to fix: on most sites a handful of theme colors cause almost every failure, and changing them fixes every page at once.
How to read the results
- Contrast ratio
- From 1:1 (the same color twice) to 21:1 (black on white). Ratios are rounded down, so a pair that shows 4.49:1 fails the 4.5:1 minimum.
- Normal text, AA (4.5:1)
- The minimum for body text, links, labels and button text under WCAG 1.4.3.
- Large text, AA (3:1)
- For text of at least 24 pixels, or 18.66 pixels in bold. WCAG defines large text as 18 point, or 14 point bold.
- AAA (7:1 and 4.5:1)
- The enhanced level in WCAG 1.4.6. It isn’t needed for AA conformance, but it helps more readers.
- Icons, borders and form fields (3:1)
- WCAG 1.4.11 asks for 3:1 against adjacent colors for the parts of controls and graphics people need to see to use them.
- Failing text
- Each element the scan measured below its threshold, with its selector, colors, size and ratio. Open one to see its markup and, where available, a screenshot.
- To check by eye
- Text axe-core couldn’t measure, with the reason, for example an image or gradient behind it.
How to fix the most common problems
Grey text on white
#767676 is about the lightest grey that reaches 4.5:1 on white (4.54:1). Lighter greys such as #999999 (2.84:1) are a common cause of failures in footers, captions, placeholders and prices.
White text on a brand-colored button
If white text on your brand color fails, darken the button background a few steps or use dark text. Check the hover and focus colors as well, since they often get lighter.
Placeholder text in forms
Placeholder text is still text and needs 4.5:1. Better still, use a visible label above the field so the placeholder isn’t the only instruction.
Text over images and sliders
Put the text on a solid or semi-transparent backdrop, or add a dark overlay to the image, then check the lightest part of the image that sits behind the text.
Sale badges and small print
Text in disabled controls is exempt from 1.4.3, but sale badges, prices and legal small print aren’t. These are often the faintest text on a store’s pages.
Low color contrast: why it matters and how to fix it on Shopify, WooCommerce and any site
Questions about this tool
What contrast ratio does WCAG require?
For Level AA, 4.5:1 for normal text and 3:1 for large text (success criterion 1.4.3), and 3:1 for interface components and meaningful graphics (1.4.11). Level AAA asks for 7:1 and 4.5:1 (1.4.6).
What counts as large text?
WCAG defines large-scale text as at least 18 point, or 14 point bold. In CSS pixels that is about 24px, or 18.66px in bold.
Do logos have to meet the contrast minimum?
No. WCAG 1.4.3 exempts logotypes and text that is part of a logo or brand name, as well as purely decorative text and text in inactive controls.
Why does the scan list text over an image for review?
axe-core measures flat colors. When an image, gradient or another element sits behind the text, it can’t tell which colors meet, so it reports the element for a person to check instead of guessing.
Do I need AAA contrast?
AAA isn’t required for Level AA conformance, and W3C doesn’t recommend requiring AAA for whole sites. Reaching 7:1 for body text is still good practice where your design allows it.
Is APCA part of WCAG?
No. APCA is a different contrast method that has been discussed for WCAG 3, which is still a draft. Conformance today is measured with the WCAG 2 ratio this tool calculates.
Sources
- W3C: Understanding WCAG 2.2 success criterion 1.4.3 Contrast (Minimum)(opens in a new tab)
- W3C: Understanding success criterion 1.4.6 Contrast (Enhanced)(opens in a new tab)
- W3C: Understanding success criterion 1.4.11 Non-text Contrast(opens in a new tab)
- W3C: WCAG 2.2 definition of relative luminance(opens in a new tab)
- Deque: axe-core color-contrast rule(opens in a new tab)
- WebAIM: The WebAIM Million (2026)(opens in a new tab)
Related tools
- AccessibilityWebsite Accessibility CheckerTest your website against WCAG 2.2 A and AA in a real browser and see each barrier with the element, the page and why it matters.Open the tool
- AccessibilityImage Alt Text CheckerList every image on a page with its alt text and see which are missing, decorative, or present but unhelpful.Open the tool
- AccessibilityWCAG 2.2 CheckerSee every WCAG 2.2 Level A and AA success criterion for your site: failed, needs review, no automated failures, or a manual check.Open the tool
Need the fixes, not just the findings?
The Accessibility Fix Report ($174, one-time) starts from the full free scan and adds more pages, the change to make for every finding, a PDF and re-tests to verify your fixes.