ALUSNA — Better design starts here.
WCAG Color Contrast Checker
Check color contrast ratios and WCAG AA or AAA status for text, buttons, and interfaces.
How to use WCAG Color Contrast Checker
Contrast Checker calculates foreground-to-background contrast and reports WCAG status for the actual text size and weight you plan to use.
How to use it
- Enter the exact text and background colors.
- Review normal-text, large-text, AA, and AAA results.
- Adjust one color's lightness if the pair fails.
Best used for
- Text and backgrounds
- Buttons
- Forms and focus states
Important notes
- Passing color contrast does not guarantee complete accessibility.
- Check hover, disabled, error, and dark-mode states too.