Color Contrast Checker
Check color contrast ratio for WCAG compliance. Ensure your colors meet accessibility standards.
Color Contrast Checker
Sample Text
This is how your text will look
Introduction
The Color Contrast Checker tool calculates contrast ratios between foreground and background colors and evaluates them against WCAG accessibility standards. It helps ensure your designs are readable for more users.
When to use this tool
Use this tool whenever you choose text and background colors for UI elements, especially for buttons, links, and body text.
How to use
Enter foreground and background colors
Provide colors in HEX, RGB, or other supported formats for text and its background.
Check contrast ratio
See the computed contrast ratio and whether it meets WCAG AA or AAA requirements for different text sizes.
Adjust colors if needed
Tweak either color until the ratio passes the desired accessibility level.
Examples
Validating a brand color palette
Ensure your chosen brand colors still provide enough contrast when used for body text on white or dark backgrounds.
FAQ
Related tools
Web Vitals Checker
Measure Core Web Vitals of your website. Check LCP, FID, CLS, and other performance metrics.
Favicon Generator
Generate favicon from emoji or text. Create PNG favicon files for your website.
OpenGraph Previewer
Preview how your website appears when shared on social media. Test Open Graph meta tags.