What thresholds are checked?
The tool checks 4.5:1 and 7:1 for normal text, 3:1 and 4.5:1 for large text, and 3:1 for UI components.
Color Contrast Checker
Check WCAG contrast ratios for foreground and background colors, preview real text, see AA and AAA pass results, and copy an accessibility report.
Check WCAG contrast before you ship a color pair
Use the Color Contrast Checker to test foreground and background colors against common WCAG contrast thresholds. Enter or pick colors, preview your own text, set the font size and weight, and copy a clear report for design review or issue tracking.
The result includes the exact contrast ratio, AA and AAA pass or fail states for normal text, large text, and UI components, plus practical foreground suggestions.
Use it when
- Choosing text and background colors for buttons, cards, dashboards, forms, or documentation.
- Auditing brand colors before using them in readable UI text.
- Checking whether a font size qualifies as large text under WCAG thresholds.
- Copying an accessibility note into a ticket, pull request, or design handoff.
Loading tool...
Color contrast checker FAQ
Does bold text change the large text result?
Yes. Bold text qualifies as large at a lower pixel size than regular text.
Can I find a nearby accessible color?
Yes. The checker suggests a closest AA foreground direction while preserving the original hue as much as practical.
