Color Contrast Checker

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.

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.

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.