๐ Color Contrast Checker
Check how readable this text is
Contrast ratio11.64:1
AA (normal text)Pass
AA (large text)Pass
AAA (normal text)Pass
AAA (large text)Pass
Enter a text color (foreground) and a background color to calculate the WCAG (Web Content Accessibility Guidelines) contrast ratio and check whether it meets the AA and AAA success criteria. Useful for checking the readability and accessibility of a website or app color scheme.
How to use
- Set the foreground (text) color and background color using the color picker or a hex code.
- The contrast ratio and pass/fail results for each WCAG AA/AAA criterion (normal and large text) are shown automatically.
FAQ
What's the difference between AA and AAA?
AA is the standard accessibility level (4.5:1 or higher for normal text), while AAA is a stricter level (7:1 or higher for normal text). Most sites aim for AA compliance.
What counts as "large text"?
Per the WCAG definition, text is considered "large" at 14pt (about 18.66px) bold or larger, or 18pt (about 24px) regular weight or larger โ and gets a slightly relaxed threshold.
Does this support 3-digit hex codes like #fff?
Yes โ shorthand 3-digit hex codes are automatically expanded to 6 digits before calculating.