Contrast Checker

WCAG contrast ratio checker

Text color

Background color

Large heading text

Normal body copy looks like this at 14 pixels of size.

10.62: 1

AA Normal text✓ PASS ≥4.5

AA Large text✓ PASS ≥3

AAA Normal text✓ PASS ≥7

AAA Large text✓ PASS ≥4.5

AA UI components✓ PASS ≥3

Loading tool…

About the Contrast Checker

Check color contrast ratios against WCAG 2.1 accessibility standards. Enter text and background colors to get the exact ratio plus pass/fail results for AA and AAA at normal and large text sizes, with a live preview of how the combination actually reads.

How to use

1Pick your text color and background color.
2Read the contrast ratio and WCAG pass/fail grid.
3Adjust colors until AA (4.5:1) or AAA (7:1) passes.

FAQ

What 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.

Related Colors & Design tools

Color Picker & Converter Gradient Generator Box Shadow Generator Flexbox Builder Grid Builder Border Radius Generator

Contrast Checker is part of DevKit — 100 free, privacy-first tools for developers, students, and everyone, built by Minhazul Ashim. Everything runs in your browser; your data never leaves your machine.