Color Contrast Checker
Check WCAG AA/AAA accessibility contrast between two colors
17.40:1
Normal Text
Large Text
Icons, borders and form controls
Reading results never uses a trial use. Copying, saving or printing uses 1 per visit.
About Color Contrast Checker
Checks the contrast ratio between a text color and background color against WCAG accessibility standards, telling you whether the combination is readable enough to meet AA or AAA compliance levels.
Enter or pick your text and background colors, and the contrast ratio and pass/fail status for each accessibility level is calculated instantly, with a live text preview.
Large text has a lower contrast requirement than normal body text under WCAG guidelines — if a color combination fails for body text but you only need it for a large heading, it may still be compliant.
Watch: Color Contrast Checker in Action
- What contrast ratio counts as accessible?
- WCAG accessibility guidelines generally require a 4.5:1 ratio for normal text and 3:1 for large text to be considered readable enough for accessibility compliance — this tool checks your specific color pair against those thresholds.
- What ratios do I need to pass WCAG AA?
- Normal text needs 4.5:1 and large text needs 3:1. AAA raises these to 7:1 and 4.5:1. Non-text parts like icons, input borders and focus rings need 3:1 under success criterion 1.4.11, which the tool lists on its own line.
- What counts as large text?
- WCAG defines it as at least 18 point regular, or 14 point bold, which is roughly 24 pixels or 18.66 pixels bold on screen. The tool does not measure your text, so you decide which row applies.
- What does the Use ... (passes AA) button do?
- When your pair falls short of 4.5:1, it tries darker versions of the text color on a light background, or lighter ones on a dark background, until the ratio reaches 4.5:1. Clicking it sets the text color to that value.
- Which color formats can I type?
- HEX (with or without the hash), rgb(), hsl() and CSS color names are accepted, along with simple number triples. If either box cannot be read, the ratio shows a dash and a red message appears.
- Does it handle semi-transparent colors?
- Not in a meaningful way. It compares the two color values as given and does not blend an alpha channel with the background underneath. Convert transparent colors to their solid blended result first, then test that pair.
How to use Color Contrast Checker
Set the Text Color and the Background Color. For each, either click the small color square or type a value such as #1a1a1a, rgb(), hsl() or a color name. The page starts with near-black text on white. A preview box shows the sentence The quick brown fox jumps over the lazy dog in your chosen pair, and a large figure such as 4.50:1 gives the ratio.
Below it, tick or cross marks show results for Normal Text at AA 4.5:1 and AAA 7:1, Large Text at AA 3:1 and AAA 4.5:1, and a separate line for icons, borders and form controls at 3:1. Swap colors exchanges the two. If a pair misses AA, a button offers an adjusted text color.
When to use it
Use it while choosing a palette for a website, app or slide deck, when a designer hands over a gray-on-white combination you suspect is too faint, or when preparing an accessibility audit. It is also handy for checking button borders and icon colors against their surroundings, using the 3:1 line for non-text elements.
When not to use it
A ratio alone does not prove something is readable. It ignores font weight, thin strokes, text over photos or gradients, and color vision differences. For images behind text, test several spots by hand or add a solid panel. For a full review of a live page, use a browser accessibility audit alongside this check.
Tips for best results
The ratio is shown rounded down, never up, so 4.499 will not appear as 4.50 beside a failing mark. Use the suggested color button as a starting point: it keeps your hue and nudges lightness, so you may still want to fine-tune. Remember that large text in WCAG means roughly 18 point, or 14 point bold, and above.
Limitations
Only two solid colors are compared. Transparency is not blended with whatever sits behind it, and the tool follows the WCAG 2.x luminance formula, not the newer APCA method. The pass marks cover contrast only, not the other accessibility requirements, such as text size choices, spacing or focus indicators.
Privacy
Both colors are read from the text boxes, and the luminance maths happens in your browser as you type. Nothing about the colors, the preview text or the results is transmitted for calculation, and there is no upload step.
More from Design & Color: