What contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively.

How is the ratio calculated?

Using the official WCAG 2.1 formula based on the relative luminance of the two colors.

What counts as large text?

Roughly 18pt (24px) or 14pt (18.66px) bold and larger, which is allowed a lower contrast threshold.

Yes — free, no signup, and runs entirely in your browser.

All Tools›UI / CSS›

Color Contrast Checker

Free · No Server

Check text/background color contrast against WCAG AA and AAA with a live preview and ratio.

WCAG Color Contrast Checker

Text color

Background color

Large text sample

Normal body text sample — the quick brown fox jumps over the lazy dog.

Contrast ratio

14.68:1

Normal text

WCAG AA (4.5:1)✓ Pass

WCAG AAA (7:1)✓ Pass

Large text (18pt+/14pt bold)

WCAG AA Large (3:1)✓ Pass

WCAG AAA Large (4.5:1)✓ Pass

100% in-browser. Contrast ratio is computed with the official WCAG 2.1 relative-luminance formula. Aim for AA (4.5:1) on body text for accessible, readable interfaces.

What is Contrast Checker?

The Color Contrast Checker measures the contrast ratio between a text color and a background color and tells you whether it passes WCAG AA and AAA accessibility standards. It shows a live text preview and the exact ratio, computed with the official WCAG 2.1 relative-luminance formula — entirely in your browser.

How to Use

1
Pick your colors
Choose a text color and a background color using the pickers or hex inputs.
2
Read the ratio
See the exact contrast ratio and the live preview of text on the background.
3
Check pass/fail
Review AA and AAA results for normal and large text, then adjust colors as needed.

Common Use Cases

Designing accessible UI and web pages
Meeting WCAG accessibility requirements
Choosing readable text/background pairs
Auditing brand colors for contrast

Key Features

Exact WCAG 2.1 contrast ratio
AA and AAA pass/fail
Normal and large-text checks
Live text preview
Color pickers and hex input

🔒

100% Private — No Server Required

All processing happens directly in your browser. No data is uploaded, stored, or transmitted to any server.

Frequently Asked Questions

Related Free Tools

Color Format Converter Color Palette Generator Gradient Generator Box Shadow Generator Tailwind Class Translator

Explore more UI / CSS tools →

Last reviewed on June 19, 2026 by the AiTechWorlds Tools Team. All processing runs locally in your browser.

AiTechWorlds

What is Contrast Checker?