Skip to main content
PushDraft
Ad Space — Leaderboard (728x90)
Client-side only

WCAG Color Contrast Checker

Check color contrast ratios for WCAG AA and AAA accessibility compliance.

Large Text Preview

Normal text preview — this is body copy at the standard 16px size for readability testing.

Small text — 12px for fine print and captions.

Contrast Ratio

17.06:1

Overall Grade

AAA

WCAG LevelRequiredStatus
AA Normal Text4.5:1✓ Pass
AA Large Text3:1✓ Pass
AAA Normal Text7:1✓ Pass
AAA Large Text4.5:1✓ Pass

WCAG 2.1 contrast requirements: AA needs 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA needs 7:1 normal and 4.5:1 large.
Report an error

Free: Indian Salary Tax Cheatsheet 2026-27

New regime slabs, old regime deductions, PT by state — one page, print-ready.

Download Free

How to Use Color Contrast Checker

  1. Pick foreground

    Choose the text color.

  2. Pick background

    Choose the background color.

  3. See compliance

    AA, AAA pass/fail for normal and large text.

Ad Space — In-content (336x280)

Related Tools

Color Converter

Convert colors between Hex, RGB, HSL, and CMYK formats with live preview.

CSS Gradient Generator

Build linear and radial CSS gradients visually with live preview and copy-ready code.

Frequently Asked Questions

What is the WCAG AA standard?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA is stricter: 7:1 normal, 4.5:1 large.

Ad Space — Bottom (728x90)

PushDraft Weekly

Get weekly developer tips and new tools. Free, no spam, unsubscribe anytime.