How to Use the WCAG 2.1 Color Contrast Checker & Ratio Auditor
-
1
Enter or pick the Foreground Text color and Background surface color.
-
2
Inspect the exact relative luminance contrast ratio (e.g. 7.42:1).
-
3
Review pass/fail compliance badges across WCAG 2.1 Level AA and Level AAA for Normal Text, Large Text, and UI Components.
-
4
Use the 1-click swap button to test reversed contrast.
Practical Example & Use Case
Common Real-World Scenario
Auditing white text (#ffffff) on indigo background (#4f46e5): contrast ratio is 6.89:1, passing WCAG Level AA (min 4.5:1) and AAA for large text (min 4.5:1).
Technical Notes & Limitations
Browser Engine Architecture
Evaluates standard relative luminance using the official W3C WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05).
Frequently Asked Questions
What is the minimum WCAG contrast ratio for regular body text?
WCAG Level AA requires a minimum contrast ratio of 4.5:1 for normal body text (<18pt or <14pt bold). Level AAA requires a minimum ratio of 7:1.