CONTRAST CHECKER

Check text and background color contrast ratios with...

Accessibility ratio

Foreground

Background

Contrast PreviewSample text for accessibility checking and quick UI review.

17.41:1

WCAG AA Normal TextPass

WCAG AA Large TextPass

WCAG AAA Normal TextPass

Specific Tool Notes: Use this for accessibility reviews, design system checks, and refining text colors before shipping UI changes.

Practical guide

How to use the Contrast Checker

Check text and background color contrast ratios with quick WCAG-friendly pass and fail guidance.

Best for

Explore palettes, convert color formats, and check visual choices while designing interfaces, graphics, or brand assets.

Input tip

Compare foreground and background colors to measure readability. Use clean values and review the result label: accessibility ratio.

Accuracy note

Displayed colors depend on your screen and browser rendering. Accessibility checks should be paired with real content and contrast review.

Related tools

Open a nearby calculator or utility when the next step needs a different format, comparison, or check.