Color Contrast Checker
Free online color contrast checker, no installation required. Verify WCAG accessibility compliance
What is Color Contrast and WCAG?
Color contrast ratio measures the difference in brightness between foreground (text) and background colors. The Web Content Accessibility Guidelines (WCAG) 2.1 sets minimum contrast requirements for readability. WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). WCAG AAA has stricter requirements: 7:1 for normal text and 4.5:1 for large text. Higher contrast ratios make text easier to read, especially for users with visual impairments.
How to Use This Color Contrast Checker
Enter or pick your foreground color (text color) and background color. The tool calculates the contrast ratio and shows whether it meets WCAG AA and AAA standards for both normal and large text. Use the Swap button to quickly exchange colors. The Visual Preview shows sample text with your color combination, helping you assess readability. Enable Color Blindness Simulation to see how your colors appear to users with different types of color vision deficiencies.
Understanding Color Blindness Simulation
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Protanopia affects red perception (red appears dark). Deuteranopia affects green perception (green and red look similar). Tritanopia affects blue perception (blue appears green). Achromatopsia is complete color blindness (only shades of gray). Testing your designs with these simulations helps ensure accessibility for all users.
▶What contrast ratio do I need for my project?
▶Why does my design fail contrast requirements?
▶Does this tool check contrast for UI elements?
▶Can I use this for dark mode designs?
If this tool helped you, consider buying the author a coffee.
Buy Me a Coffee