Color Contrast Checker
Check WCAG contrast ratio and AA/AAA pass status for HEX, RGB, and HSL text/background colors.
Loading tool...
Check WCAG contrast for text and background colors
Color Contrast Checker tests HEX, RGB, and HSL text/background colors for WCAG contrast ratio, AA/AAA pass levels, and real card readability. Use it to review design tokens, buttons, banners, and body text combinations quickly.
Useful For
- Check AA/AAA pass levels for body and button colors
- Review design system color token contrast
- Run accessibility QA for landing page color pairs
Good To Know
Custom color pairs are not included in shared links. After the automated score, still check real font size, weight, and surrounding UI context.
Developer Check
Generated code, regexes, meta tags, and config snippets should be treated as drafts and tested again in your runtime, security policy, and deployment environment.
How It Works
Inputs are calculated or converted in the browser whenever possible. Compare important results with the original source before using them. Reviewed on Jun 30, 2026.
Color contrast checks
Colors
- Enter actual text and background colors from the UI
- Check hover, disabled, and dark-mode colors separately
Standard
- Separate WCAG rules for body text, large text, and button labels
- Compare AA and AAA pass status based on the goal
Before use
- Review in the real screen size and font weight
- If brand color must stay, adjust background or font weight
Yes. Enter foreground and background colors to check WCAG contrast ratio and pass status.
Yes. Required contrast changes by text size and weight, so review both normal and large text results.
It helps with accessibility checks, but real UI should also review font weight, image backgrounds, and interaction states.