WCAG Contrast Checker
Test foreground and background color pairs against WCAG contrast requirements and catch readability problems before they ship.
Best For
Use Contrast Checker when you need to make color decisions with clear previews, conversions, and accessibility checks. The page is designed around a focused workflow: bring in the color value, palette, or reference image, make the adjustment or check, then copy the final values into your stylesheet, design system, or production file.
Most work happens locally in your browser, which keeps files and text on your device and makes quick repeat checks practical. Review the output, then copy the final values into your stylesheet, design system, or production file.
Common workflows
- Contrast Checker for Website Text
- Contrast Checker for Presentation Slides
- Contrast Checker for Restaurant Menus
- Contrast Checker for Classroom Handouts
Features
WCAG Readability Checks
See whether a color pair passes normal-text and large-text accessibility thresholds.
Quick Comparison
Swap foreground and background colors to test alternate UI treatments faster.
Practical Accessibility Review
Catch contrast issues before they become bugs in production UI or published graphics.
How It Works
Paste or pick the foreground and background values you want to test.
The tool calculates the contrast ratio immediately and compares it against WCAG thresholds.
Use the result to refine colors until the text or UI element is readable.
Frequently Asked Questions
Related Tools
Convert a color between HEX, RGB, HSL, LAB, LCH, OKLAB, and OKLCH formats in one place.
Preview how colors and images appear under common forms of color-vision deficiency.
Create polished color palettes with locks, exports, and strategy-based generation.