Color Contrast Checker
Enter a text color and a background color to see their contrast ratio, whether they pass each WCAG level, and the closest text color that would pass if they don't.
Overview
Low-contrast text is one of the most common accessibility failures on the web. It's hard to read for people with low vision or color vision deficiency, and for anyone reading a phone in sunlight. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios between text and its background: 4.5:1 for normal text at level AA, 3:1 for large text, and 7:1 for normal text at the stricter AAA level.
The ratio is calculated from the relative luminance of each color, exactly as WCAG 2.x defines it, ranging from 1:1 (identical colors) to 21:1 (black on white). WCAG doesn't allow rounding up, so 4.49:1 fails AA. This checker truncates the ratio rather than rounding it for that reason. A translucent text color is measured as it's actually seen, blended over the background.
When a pair fails, the checker suggests the nearest text color with the same hue and saturation that meets AA and AAA, so you can fix the contrast while keeping your brand color recognizable.
Examples & Sample Data
Grey text that just passes
Text: #767676 Background: #ffffff
4.54:1 — passes AA normal and large text, fails AAA normal text
An orange that fails, with a suggestion
Text: #ff6600 Background: #ffffff
2.93:1 — fails AA Suggested: #c95100 reaches 4.5:1 (AA), #973d00 reaches 7:1 (AAA)
How It Works
- Enter the text color and background color as hex, rgb(), hsl(), or a CSS color name, or pick them with the color swatches.
- Read the contrast ratio and the pass or fail result for AA and AAA, for normal text, large text, and UI components.
- Check the preview to see the pair as real text.
- If it fails, click a suggested color to apply the nearest text color that passes.
Common Use Cases
Checking brand colors
Confirm a brand palette works for body text and buttons before a design is built.
Fixing an accessibility audit finding
Find the smallest change to a failing text color that satisfies WCAG 1.4.3 without redesigning the page.
Dark mode palettes
Check light text on dark backgrounds, where mid-tone accent colors often fall short.
Tips & Best Practices
- Large text means at least 18pt (24px) regular or 14pt (about 18.66px) bold. Everything smaller needs the normal-text ratio.
- WCAG 1.4.11 also asks for 3:1 contrast for icons, input borders, and focus indicators against adjacent colors, not just text.
- Placeholder text is still text. The light grey many designs use for it often fails AA.
Frequently Asked Questions
No. The contrast calculation runs entirely in your browser.
For WCAG AA, which most accessibility laws and policies reference, normal text needs 4.5:1 and large text needs 3:1. AAA raises that to 7:1 and 4.5:1. User interface components and meaningful graphics need 3:1.
WCAG treats the thresholds as exact minimums with no rounding. That's why this checker truncates the displayed ratio instead of rounding it up.
No. It uses the WCAG 2.x formula, which is what current laws and conformance audits test against. APCA is being explored for a future WCAG 3 and gives different numbers.
Related Tools
Explore more high-performance utilities.