Color Contrast Checker
Compare text and background colors, view their contrast ratio, and check the AA and AAA thresholds for normal and large text.
How to check text contrast
- Enter or select the foreground (text) color.
- Enter or select the background color.
- Read the contrast ratio displayed on the preview.
- Check the relevant normal-text or large-text result in the WCAG panel.
- Adjust the pair and check again.
Swapping the foreground and background preserves the mathematical ratio, although the visual design changes. You can keep several pairs in the list and compare them side by side.
WCAG text-contrast requirements
- AA normal text
- 4.5:1
- AA large text
- 3:1
- AAA normal text
- 7:1
- AAA large text
- 4.5:1
Large text means at least 18pt regular or 14pt bold, approximately 24 CSS pixels or 18.7 CSS pixels respectively. Smaller text needs the higher normal-text thresholds.
Thresholds are assessed using the unrounded ratio. The displayed value is rounded for readability, so a pair can show 4.50:1 and still report a fail when its true ratio is below 4.5. The checker evaluates the unrounded value, not the rounded display.
Contrast examples
Black on white — the maximum ratio.
Gray on white — just below the AA normal-text threshold.
These are reference examples, not results from an independent audit of the tool.
What this check does not establish
Contrast alone does not assess keyboard access, screen-reader support, meaningful structure, focus visibility, or whether information is conveyed by color alone. A page can pass every contrast pair and still be inaccessible.
Text placed on images, gradients, or transparent backgrounds needs the actual background behind it evaluated. One solid-color pair does not represent a varying background.