WCAG Color Contrast Checker

Enter two hex codes to test a colour pair against WCAG 2.2 AA and AAA contrast ratios, with an experimental APCA estimate for additional design context.

2.2
APCA
Normal
Large

Contrast testing workspace

Color Picker

Adjust colors using hex values or RGB sliders.
Tip: Use the color pickers for precise selection

Live Preview

See how your text looks with the selected colors in different contexts.

Sample Heading

This is an example of how your text will look with the selected color combination. The text should be easily readable for all users, including those with visual impairments.

Small text example for testing readability at different sizes.

Sample Link
#000000
Foreground
#FFFFFF
Background

Contrast Results
WCAG 2.2

WCAG 2.2 contrast ratio compliance information
21:1
Contrast Ratio
AA Level (normal text)
Met
AAA Level (normal text)
Met

WCAG 2.2 Requirements

• AA Level: 4.5:1 minimum
• AAA Level: 7:1 minimum

Smart Color Recommendations

Explore different color schemes while maintaining accessibility.

About Contrast Standards

Understanding the normative WCAG 2.2 ratio and experimental APCA estimates.

WCAG 2.2
Traditional Contrast Ratio

WCAG 2.2 uses the traditional contrast ratio formula based on relative luminance. This method has been the standard for web accessibility compliance.

  • AA Level: 4.5:1 (normal), 3:1 (large text)
  • AAA Level: 7:1 (normal), 4.5:1 (large text)
  • Large Text: 18pt+ or 14pt+ bold

Experimental
APCA (Advanced)

APCA (Advanced Perceptual Contrast Algorithm) offers another way to explore perceived contrast. This tool provides an estimate for design comparison, not a WCAG conformance result.

  • Primary target: 60Lc (normal), 45Lc (large text)
  • Enhanced target: 75Lc (normal), 60Lc (large text)
  • Improved accuracy for different color combinations

Important: Use WCAG 2.2 for current conformance decisions. WCAG 3 remains an incomplete draft and its final requirements may differ.

Checked one pair. How many are failing on your site?

WebAIM's annual analysis of a million home pages finds low contrast text on more of them than any other failure, and it rarely shows up as a single bad pair. Paste a page and the scanner tests the text and background combinations on it, along with the other WCAG rules axe-core can check.

One free scan a day, no account. It runs axe-core on the live page and shows your score and the most severe findings.

Essential Accessibility Resources

Comprehensive tools, checklists, and guides to help you create inclusive digital experiences

Top Pick

AI Accessibility Audit Helper

Expert WCAG analysis and accessibility guidance with AI
accessibility
wcag
compliance
+1 more
View tool
Top Pick

Website Accessibility Compliance: ADA & WCAG Guide

Complete guide to website accessibility compliance including ADA requirements, WCAG standards, legal obligations, and practical implementation strategies.
accessibility
compliance:
wcag
+1 more
View article

Best Accessibility Testing Tools: Free & Paid Options

Comprehensive guide to accessibility testing tools including axe, WAVE, Lighthouse, and more. Compare features, pricing, and use cases for WCAG compliance testing.
accessibility
testing
View article

Inclusive Design Principles for Accessible Experiences

Learn inclusive design principles, universal design concepts, and practical strategies for creating digital experiences that work for users with diverse abilities and needs.
inclusive
design
View article

Mobile Accessibility Testing: iOS & Android Guide

Learn mobile accessibility testing with TalkBack, VoiceOver, and Switch Control. Essential guide for mobile app and responsive web accessibility.
accessibility
testing:
testing
View article

Screen Reader Testing Guide

Comprehensive guide to testing with NVDA, JAWS, VoiceOver, and TalkBack with command references and testing procedures
accessibility testing
View guide

Color Contrast FAQ

What is the minimum contrast ratio for WCAG compliance?

WCAG 2.2 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Our contrast checker tests both levels automatically.

Can I check contrast from hex codes?

Yes. Type or paste a hex code such as #1D4ED8 for the text colour and another for the background. This WCAG colour contrast checker converts both to relative luminance, reports the ratio to two decimal places, and marks AA and AAA as pass or fail for normal or large text. Three-digit shorthand like #FFF works too.

How do I use the color contrast checker?

Simply input your foreground and background colors using the color pickers or hex codes. The tool instantly calculates the contrast ratio and shows whether it meets WCAG AA or AAA standards. You can adjust colors in real-time to achieve compliance.

Why is color contrast important for accessibility?

Adequate color contrast ensures text and UI elements are readable for users with visual impairments, including those with low vision or color blindness. It also improves readability in different lighting conditions and on various devices, benefiting all users.