How to Use the WCAG Color Contrast Checker
-
1
Pick or enter Foreground (Text) HEX/RGB color.
-
2
Pick or enter Background HEX/RGB color.
-
3
Review the calculated contrast ratio (e.g., 7.2:1).
-
4
Check compliance status for Normal Text (AA requires 4.5:1, AAA requires 7:1) and Large Text (AA requires 3:1, AAA requires 4.5:1).
-
5
Use the one-click "Suggest Compliant Color" button if your contrast fails.
Practical Example & Use Case
Common Real-World Scenario
Auditing brand colors to ensure readability for users with low vision and color blindness before product launch.
Technical Notes & Limitations
Browser Engine Architecture
Calculates standard relative luminance using the official W3C WCAG 2.1 formula.
Frequently Asked Questions
What is WCAG AA standard?
Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).