Something wrong with this tool?
About WCAG Color Contrast Checker Online
This tool measures the contrast ratio between two colors (typically foreground text and background) and tells you whether the pair meets WCAG (Web Content Accessibility Guidelines) standards for readability. Pass/fail results are shown for AA and AAA levels at normal and large text sizes.
WCAG compliance is increasingly a legal requirement: government sites, educational platforms, public-sector tools, and many commercial sites in Europe and North America must meet WCAG 2.1 AA at minimum. Poor contrast is the most commonly flagged accessibility issue.
Use it when picking text colors during design, auditing an existing site for accessibility issues, or finding alternative shades that hit AAA without changing the overall design too much.
How to use this tool
How to check WCAG color contrast
Enter the foreground color
"Foreground" is your text or icon color, in hex form (#RGB or #RRGGBB). Leading `#` is optional and the field is case-insensitive.
Enter the background color
"Background" is the surface behind the foreground — page background, button fill, etc. Same hex formats accepted. Both fields appear side-by-side as a pair.
Press Run
Result returns contrastRatio (e.g. 4.56) plus wcagNormalText and wcagLargeText with the pass/fail bands. Normal text needs ≥ 4.5 (AA) / 7 (AAA); large text needs ≥ 3 (AA) / 4.5 (AAA).
Read the levels
AA is the most common legal/standards requirement; AAA is stricter and often unrealistic for body copy. Large text means 18pt+ regular or 14pt+ bold; below that, treat the result as normal-text contrast.