Color Contrast Checker (WCAG)
WCAG contrast ratio and AA/AAA pass/fail for text and UI colors.
About this tool
Check the contrast ratio between a text color and a background color against the WCAG 2.x thresholds: 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 and 4.5:1 at level AAA.
Large text means at least 18pt, or 14pt bold. User interface components and graphical objects need 3:1. Semi-transparent text colors are blended over the background before measuring.
How to use it
- Enter the text color and the background color.
- Check them.
- Read the ratio and which WCAG levels it passes. Adjust a color and check again until it passes.
Example
Input:
Text #767676 on background #ffffffResult:
4.54:1, passes AA for normal and large text and for UI components; passes AAA only for large text