What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable. The ratio ranges from 1:1 (no contrast) to 21:1 (maximum, black on white).

What are the WCAG AA and AAA requirements?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.

How is relative luminance calculated?

Each RGB channel is normalized to 0-1, then gamma-corrected: if the value is <= 0.03928, divide by 12.92; otherwise apply ((value + 0.055) / 1.055) ^ 2.4. Luminance = 0.2126*R + 0.7152*G + 0.0722*B.

Color Contrast Checker

Test text-background contrast ratios against WCAG 2.1 accessibility standards. Shows AA and AAA pass/fail status for normal and large text. Includes a live preview of text on the background. Everything runs client-side — no data leaves your device.

Foreground Color

Background Color

The quick brown fox jumps over the lazy dog.

This is how your text will look with these colors.

21.00:1

Contrast Ratio

WCAG AA

Normal textPass

Large textPass

WCAG AAA

Normal textPass

Large textPass

Your files are processed entirely in your browser. Nothing is uploaded to any server.

How to Use Color Contrast Checker

1
Paste or type your text
Enter your text in the input area. You can paste from clipboard or type directly.
2
See instant results
The tool processes your text automatically as you type. Adjust options if available.
3
Copy the output
Click the copy button to save the result to your clipboard. No data leaves your browser.

Frequently Asked Questions

Next Steps

Generate an accessible palette

Related Tools

Color Palette Generator

Generate harmonious palettes with lock, export to CSS/Tailwind/SCSS.

Hex to RGB Converter

Convert HEX color codes to RGB values.

RGB to Hex Converter

Turn RGB values into HEX codes for CSS.