Color Tool

Color Contrast Checker

Check text and background color contrast against WCAG AA and AAA for accessibility reviews, UI design, and CSS updates.

Color selection

Foreground colorBackground color

Preset combinations

Contrast results

Sample text

This is how your text will look with the selected colors.

21.00:1

Contrast ratio

WCAG compliance

AA Normal Text (4.5:1)Pass

AA Large Text (3:1)Pass

AAA Normal Text (7:1)Pass

AAA Large Text (4.5:1)Pass

WCAG guidelines

WCAG AA

Normal text needs 4.5:1 contrast. Large text needs 3:1 contrast.

WCAG AAA

Normal text needs 7:1 contrast. Large text needs 4.5:1 contrast.

How to use the color contrast checker

Choose the text color and background color you want to test.

Review the live preview, contrast ratio, and whether the pair passes WCAG AA or AAA.

Adjust either color until the combination is readable enough for your target use case.

Helpful for accessibility checks before colors ship

Useful for UI review and handoff

Good when you need to confirm that a text and background pair is readable before it goes into a design spec or codebase.

Live pass and fail feedback

Change either color and see the ratio plus AA and AAA status update immediately.

Based on WCAG contrast math

Contrast is calculated from relative luminance using the standard WCAG contrast ratio formula.

Useful beside designs and CSS edits

Useful during design review, QA, CSS edits, or accessibility checks on the go.

More color tools

RGB to HEX Converter HEX to RGB Converter Color Picker Tool

Color contrast FAQ

What contrast ratio should I target?

WCAG AA targets 4.5:1 for normal text and 3:1 for large text. AAA targets 7:1 for normal text and 4.5:1 for large text.

Why is color contrast important?

Good contrast improves readability for users with low vision, color-vision differences, and anyone reading in bright or low-quality viewing conditions.

Can I use this contrast checker on mobile?

Yes. The checker works well on phones, tablets, and desktop screens.

Need more color tools?

Continue with the color picker plus RGB and HEX converters for CSS, design systems, and front-end work.

Browse more tools