WCAG Contrast Checker
Check the WCAG contrast ratio between any two colors. Get AA / AAA verdicts, auto-fix suggestions, and the best text color for any background.
Check the WCAG contrast ratio between any two colors. See AA, AAA, AA Large, and UI component verdicts, get automatic fix suggestions, and pick the best text color for any background. Free, offline, runs in your browser. Read more Show less
What is a WCAG contrast checker?
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background so that people with low vision or color blindness can read it. A contrast checker measures the ratio of two colors and tells you whether they pass the guidelines for normal text, large text, and user-interface components.
This tool computes the exact WCAG 2.1 contrast ratio using the standard formula, gives you a pass/fail verdict against every threshold, and suggests a nearby color that would pass when your current choice does not.
The thresholds
| Level | Normal text (below 24px) | Large text (24px+, or 18.66px+ bold) | UI components (WCAG 2.1, SC 1.4.11) |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | - |
AA is the legal baseline in most jurisdictions and is required by Section 508, the ADA in practice, and the European Accessibility Act. AAA is the enhanced level and is often required for public-sector content and large text.
How to use
Enter the text color and the background color - either by typing (hex, rgb, hsl, or a CSS color name) or by tapping the color swatch. The ratio and verdicts update instantly.
If your combination fails, the tool suggests the minimum change to the text color that would pass. Tap the suggestion to apply it.
How the ratio is computed
WCAG uses the relative luminance of each color, which is a weighted combination of linearized RGB values:
L = 0.2126 R + 0.7152 G + 0.0722 B
where R, G, and B are gamma-corrected sRGB values. The contrast ratio is then:
(L_lighter + 0.05) / (L_darker + 0.05)
The result ranges from 1:1 (identical colors) to 21:1 (black against white).
Best text color for any background
If you only have a background color and need to choose a text color, this tool tells you whether black or white gives the higher contrast on that background - and shows the ratio for both. This is exactly what design systems do when they generate an "on-primary" text color.
FAQ
Is black on white the highest possible contrast?
Yes. Pure black (#000000) on pure white (#ffffff) has a ratio of 21:1, the theoretical maximum. Nothing can beat it.
Does a passing ratio mean the text is legible?
The ratio is a proxy for legibility, not the whole picture. Font weight, letter spacing, size, and rendering quality all affect readability. WCAG deliberately sets a numeric threshold because it is testable, but good typography matters too.
What about non-text content like icons and borders?
WCAG 2.1 Success Criterion 1.4.11 requires a 3:1 ratio for user-interface components (the visual boundary of a button or input) and for graphical objects that convey meaning. The 3:1 threshold is shown separately in this tool.
What if I cannot reach AA without destroying the design?
Three options: (1) increase the font weight or size - larger or bolder text has a lower threshold (3:1 at 24px or 18.66px bold); (2) change the background to something with more contrast; (3) use a different color entirely. WCAG exists so that people can read your content - a design that ignores it excludes real users.
Does this tool work in dark mode?
Yes. The tool itself adapts to your site's theme. The colors being checked are independent of that - you can check light-mode and dark-mode combinations side by side.
Which WCAG version does this tool use?
WCAG 2.1 and 2.2. The contrast thresholds did not change between 2.0, 2.1, and 2.2. All three use the same formula and the same 4.5:1 / 3:1 / 7:1 thresholds.
Can I paste an rgba() or hsl() color?
Yes. Hex (#f00, #ff0000, #ff0000aa), rgb(), rgba(), hsl(), hsla(), and the 148 CSS named colors are all recognized. Alpha is ignored for the contrast computation - WCAG does not define how to handle transparency, so you should use opaque colors when evaluating accessibility.
Is there an eyedropper to pick colors from the screen?
Yes, in Chromium-based browsers (Chrome, Edge, Brave, Opera). The eyedropper button appears automatically when the browser supports the EyeDropper API. Firefox and Safari do not yet support it - use the color picker there instead.
Command line equivalent
# Node with color-contrast-checker
npm i color-contrast-checker
node -e '
const { ColorContrastChecker } = require("color-contrast-checker");
const checker = new ColorContrastChecker();
console.log(checker.isLevelAA("#ffffff", "#000000", 14));
'
# Python with wcag-contrast-ratio
pip install wcag-contrast-ratio
python3 -c 'from wcag_contrast_ratio import contrast_ratio, passes_AA; print(contrast_ratio((1,1,1), (0,0,0)))'
# Command line with Lighthouse
lighthouse https://example.com --only-categories=accessibility --view
# Browser axe DevTools extension
# chrome://extensions -> axe DevTools -> Run test -> look for "color-contrast"