Web / Developer
Color Contrast Checker
Check foreground and background colors for readability. The tool calculates the contrast ratio locally in the browser, shows a live preview and creates matching CSS code.
Enter colors
Choose the text color and background color or enter hex values directly.
Result
Live preview
This is sample text for a website. It shows whether body text, buttons and notices remain easy to read.
| Check | Threshold | Status |
|---|
Enter two colors and start the check.
Output
The report can be copied or downloaded as a file.
Why contrast matters
Sufficient contrast improves the readability of text, buttons, forms and notices. This helps people with visual impairments as well as users on mobile devices, in sunlight or on low-quality displays.
What is checked
The tool calculates relative luminance from both colors and derives the contrast ratio. It also shows common thresholds for normal text, large text and UI elements.