Color Contrast Checker
Make sure your website has accessible colors.
About Color Contrast Checker
Color Contrast Checker is a web-based tool that evaluates the contrast ratio between two user-specified colors entered as hex values, for a background and a foreground color. It calculates a WCAG 2.1 contrast score and reports whether the combination is acceptable for different text sizes, including small text.
The tool displays a live preview showing how the chosen colors render against both large and small sample text, letting users visually assess readability alongside the numeric score. Users can copy the selected hex values to the clipboard and save results.
It is built with React, Tailwind Labs' Headless UI, and the TinyColor library, and is aimed at developers and designers checking color combinations for accessibility compliance.
Key features
- Checks color contrast ratio between two chosen colors
- Calculates WCAG 2.1 contrast compliance score
- Copy background and foreground HEX codes to clipboard
- Save and view saved color checks
- Preview large and small text against chosen colors
Frequently asked questions
What accessibility standard does this tool check against?
It evaluates color contrast against WCAG 2.1 guidelines.
What input format does it use for colors?
Colors are entered and displayed as HEX values for background and foreground.
What technology is this built with?
It is built with React and Headless UI by Tailwind Labs, using TinyColor by Brian Grinstead for color handling.
Can I save my color checks for later?
Yes, the tool has a Save feature and a Show Saved option to view previously saved checks.
Show your product to thousands of developers
· 100k monthly pageviews
· 7k newsletter subscribers
You might also like
ally.js
Accessibility/LibraryJavaScript library to help modern web applications with accessibility concerns by making accessibility simpler.
Awesome a11y
AccessibilityA curate list about A11Y. Contribute to brunopulis/awesome-a11y development by creating an account on GitHub.
Checka11y.css
Accessibility/ProgrammingA CSS stylesheet to quickly highlight a11y concerns. - jackdomleo7/Checka11y.css.
Color.review
Accessibility/ColorA modern tool for exploring and finding accessible colors. Make sure that everyone can see your creations.
Contrast Ratio
Accessibility/ColorEasily calculate color contrast ratios.
HTML5 Accessibility
AccessibilityGet the current accessibility support status of HTML5 features across major browsers.
