Color Contrast Checker WCAG
Check text-to-background color contrast against WCAG 2.1/2.2 standards AA/AAA levels. Visual simulation of color blindness variants.
Color Contrast Checker
Contrast Ratio
Live Preview
This is normal body text for previewing contrast. The quick brown fox jumps over the lazy dog. 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
This is smaller text (14px). Lorem ipsum dolor sit amet, consectetur adipiscing elit.
What is Color Contrast Checker WCAG?
Color Contrast Checker evaluates the luminance contrast ratio between foreground text color and background color against the Web Content Accessibility Guidelines WCAG 2.1 and 2.2 standards published by the W3C. Insufficient color contrast is the number one accessibility failure on the web an estimated eight percent of men and zero point five percent of women have some form of color vision deficiency color blindness and low-contrast text is unreadable for users with low vision on bright outdoor screens or when projected. WCAG defines two compliance levels AA requires four point five to one contrast ratio for normal text and three to one for large text eighteen pt plus or fourteen pt plus bold AAA requires seven to one and four point five to one respectively. This checker calculates the precise ratio using the WCAG luminance formula clearly displays PASS FAIL indicators for AA normal AA large AAA normal and AAA large thresholds provides real-time visual preview of sample text on the background and includes color blindness simulation filters Protanopia Deuteranopia Tritanopia Achromatopsia showing how users with each CVD type perceive the color combination. Use the auto-adjust feature to slightly shift hue saturation lightness of either color until it passes WCAG AA keeping your design intent intact while meeting accessibility requirements.
When to Use Color Contrast Checker WCAG
Use when selecting text/background color pairs for UI design, auditing existing websites for accessibility compliance, designing marketing banners with text overlays, or ensuring dark-mode theme pairs meet WCAG.
How to Use Color Contrast Checker WCAG
Enter foreground text color and background color via picker or HEX/RGB. View the calculated contrast ratio and WCAG 2.1 AA/AAA pass/fail status. Toggle color blindness previews. Use auto-adjust to achieve compliance.
Related Tools
Color Converter & Picker
Convert colors between HEX, RGB, RGBA, HSL, HSLA, HSV, and CMYK formats with interactive color picker.
Color Palette Generator
Generate beautiful color palettes from a base color. Monochromatic, complementary, triadic, analogous, tetradic, and custom harmony modes.
CSS Gradient Generator
Create beautiful CSS linear, radial, and conic gradients with multi-color stops, angle control, and opacity support. Copy ready-to-use CSS.