What is the minimum contrast ratio for WCAG AA compliance?

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal body text and at least 3.0:1 for large text (18pt+ or 14pt bold) and user interface components.

What is Level AAA compliance?

Level AAA represents the highest accessibility tier, requiring a 7.0:1 ratio for normal text and 4.5:1 for large text.

How does the tool calculate luminance?

The tool calculates relative luminance using the standard sRGB gamma expansion formula according to W3C specifications entirely in your local browser.

Developer Utilities

WCAG 2.1 Color Contrast Checker & Accessibility

Evaluate foreground and background color combinations against official WCAG 2.1 accessibility guidelines. Instantly test Normal Text (4.5:1 / 7:1), Large Text (3:1 / 4.5:1), and UI graphical components with live interactive preview, one-click color swapping, and curated accessible palettes. 100% private in-browser.

100% In-Browser Privacy

Loading contrast engine...

Advertisement SpaceZero CLS Reserved Container

How to Check WCAG Color Contrast in 3 Steps

Pick Text & Background Colors

Select foreground text and background colors via color picker or type HEX codes.

Inspect Compliance Matrix

Review real-time contrast ratio and pass/fail badges for WCAG AA and AAA standards.

Copy Contrast Report

Copy the accessibility compliance summary report directly to your clipboard.

Frequently Asked Questions

Related Tools You May Need

developer

CSS Box Shadow & Glassmorphism Generator

Create multi-layer CSS box shadows and frosted glass effects with instant Tailwind CSS code. 100% in-browser.

Open Tool

developer

SVG to CSS Data URI & Background Generator

Convert SVG icons directly to CSS background-image and Tailwind CSS classes. 100% in-browser.

Open Tool

developer

Universal Color Converter & Contrast Checker

Convert HEX, RGB, RGBA, HSL, HSV, and CMYK colors with live WCAG 2.1 contrast accessibility score. 100% in-browser.

Open Tool