test foreground and background colors against WCAG 2.1 accessibility standards. see pass/fail for AA and AAA at a glance.
Presets
Large Text (24px Bold)
Large Text (18px Bold)
Normal body text at 16px. This is how your paragraph copy will look against this background color.
Small text at 12px — captions, footnotes, and fine print.
14.68:1
Excellent contrast — passes all WCAG levels
Pass
AA Normal
Requires 4.5:1
Pass
AA Large
Requires 3:1
Pass
AAA Normal
Requires 7:1
Pass
AAA Large
Requires 4.5:1
Normal Text
Body copy, paragraphs, and UI labels smaller than 18pt bold or 24pt regular.
Large Text
Headings and text at 18pt bold (24px) or 24pt regular (32px) and above.
Level AA
Minimum standard. Required by most accessibility laws and guidelines worldwide.
Level AAA
Enhanced standard. Recommended for maximum readability and inclusion.
Color Contrast Checker tests whether your text and background color combination meets WCAG 2.1 accessibility standards. It calculates the contrast ratio and shows pass or fail results for both Level AA and Level AAA compliance, for both normal and large text.
WCAG (Web Content Accessibility Guidelines) sets minimum contrast ratios to ensure text is readable by people with low vision or color deficiencies. Level AA requires a 4.5:1 ratio for normal text and 3:1 for large text. Level AAA raises these to 7:1 and 4.5:1 respectively.
This tool runs entirely in your browser. Enter hex colors, pick from a color palette, or use one of the built-in presets. The live preview shows exactly how your text will look against the chosen background at different sizes.
Enter your text color
Type a hex value or use the color picker to select your foreground (text) color.
Enter your background color
Type a hex value or use the color picker to select your background color.
Read the results
The contrast ratio is calculated instantly. Green means pass, red means fail for each WCAG level.
Preview your text
See how your text looks on the background at large, normal, and small sizes — exactly as it would appear on a real page.
Web design
Check that your website's text colors meet accessibility standards before deploying.
Brand guidelines
Verify that your brand's primary and secondary colors work together at accessible contrast levels.
UI development
Ensure buttons, labels, navigation, and form elements are readable for all users.
Accessibility audits
Quickly test color combinations flagged in WAVE, Lighthouse, or axe audits.
Presentation design
Check that slide text is readable against background colors, especially for projected presentations.
Color Contrast Checker tests whether your text and background color combination meets WCAG 2.1 accessibility standards. It calculates the contrast ratio and shows pass or fail results for both Level AA and Level AAA compliance, for both normal and large text.
WCAG (Web Content Accessibility Guidelines) sets minimum contrast ratios to ensure text is readable by people with low vision or color deficiencies. Level AA requires a 4.5:1 ratio for normal text and 3:1 for large text. Level AAA raises these to 7:1 and 4.5:1 respectively.
This tool runs entirely in your browser. Enter hex colors, pick from a color palette, or use one of the built-in presets. The live preview shows exactly how your text will look against the chosen background at different sizes.
Enter your text color
Type a hex value or use the color picker to select your foreground (text) color.
Enter your background color
Type a hex value or use the color picker to select your background color.
Read the results
The contrast ratio is calculated instantly. Green means pass, red means fail for each WCAG level.
Preview your text
See how your text looks on the background at large, normal, and small sizes — exactly as it would appear on a real page.
Web design
Check that your website's text colors meet accessibility standards before deploying.
Brand guidelines
Verify that your brand's primary and secondary colors work together at accessible contrast levels.
UI development
Ensure buttons, labels, navigation, and form elements are readable for all users.
Accessibility audits
Quickly test color combinations flagged in WAVE, Lighthouse, or axe audits.
Presentation design
Check that slide text is readable against background colors, especially for projected presentations.
PDF utilities, image tools, developer helpers — all free, no signup.
Add text or logo watermarks to photos with custom position, opacity, and tiling.
Live regex tester and debugger.
Convert text between UPPERCASE, lowercase, Title Case, camelCase, snake_case, kebab-case, and more.
Resize photos to exact dimensions with aspect ratio lock.
Compare two texts side by side with line-by-line diff highlighting.
Generate SEO meta tags, Open Graph, and Twitter Card HTML.