Contrast Checker

Check the contrast ratio between foreground and background colors for accessibility.

Foreground

Background

Foreground HEX

Background HEX

Preview

Sample Text

The quick brown fox jumps over the lazy dog.

Small text example

Contrast Ratio: 21.00:1

AA Normal

PASS

AA Large

PASS

AAA Normal

PASS

AAA Large

PASS

Contrast Report

(7 lines)

Click to collapse

Contrast Ratio: 21.00:1 Foreground: #000000 Background: #ffffff WCAG AA: PASS WCAG AA Large: PASS WCAG AAA: PASS WCAG AAA Large: PASS

How to use this Contrast Checker

The Contrast Checker helps ensure your color combinations meet accessibility standards (WCAG). Enter your foreground and background colors using the color pickers or by typing HEX values directly. The tool instantly calculates the contrast ratio between your two colors and displays the results. A preview section shows your colors together with sample text so you can see how readable the combination is in practice. The tool checks against four WCAG levels: AA Normal, AA Large, AAA Normal, and AAA Large. Each level shows whether it passes or fails, with green checkmarks for passing and red X marks for failing. Use the copy button to save a text report of your contrast results.

Related Tools

Color Picker HEX/RGB/HSL Converter