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.

WCAG contrast basics

Contrast is calculated from relative luminance. The ratio compares the lighter color and darker color after converting sRGB values to linear light.

Contrast ratio = (L1 + 0.05) / (L2 + 0.05)
WCAG AA normal text target: 4.5:1
WCAG AAA normal text target: 7:1

Common accessibility checks

#000000 text on #FFFFFF

21:1

Maximum black-on-white contrast, suitable for normal and large text.

#777777 text on #FFFFFF

About 4.48:1

Close to the AA normal-text threshold, so small rounding or color changes matter.

White text on a brand blue button

Check AA before shipping

Buttons, links, and disabled states often need separate contrast checks.

Design review notes

Check the actual foreground and background colors used in CSS, not only the design-token names.
Large text has a lower WCAG AA threshold, but body text, captions, placeholders, and helper text usually need the normal-text threshold.
Contrast is one accessibility signal; also review focus states, text size, hover states, and meaning conveyed only by color.

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.

Editorial and accuracy note

Color Contrast Checker combines a working converter with practical guidance on the same page. The page is designed to show the formula, examples, rounding notes, and related tools so visitors can judge whether the result fits a task such as shipping, recipes, logs, design, travel, or automotive planning.

Results are calculated in the browser with standard conversion factors for common units.
For official forms, engineering tolerances, medical decisions, or compliance work, verify the original measurement and the relevant source rule.
The surrounding notes focus on real use cases instead of repeating generic placeholder copy.

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