Skip hex conversion for contrast checks. Paste your hex values

Settings

Documentation

Settings

Don’t save recents New combinations won’t be saved on this device.

Documentation

How this tool scores

This tool calculates WCAG contrast using full-precision sRGB luminance math. We round the displayed score for readability, but pass/fail compliance checks use the full-precision value.

WCAG references

Contrast ratio is WCAG’s way of measuring how clearly two colors separate. Higher ratios often improve readability, especially for smaller text, thin weights, bright screens, and users with lower visual sensitivity.

If you want to go deeper. Jump into:

Contrast basics on WCAG AA requirements for text AAA requirements for text AA requirements for graphic elements

Settings

Don’t save recents New combinations won’t be saved on this device.

Documentation

How this tool scores

This tool calculates WCAG contrast using full-precision sRGB luminance math. We round the displayed score for readability, but pass/fail compliance checks use the full-precision value.

WCAG references

If you want to go deeper. Jump into:

Contrast basics on WCAG AA requirements for text AAA requirements for text AA requirements for graphic elements

Foreground

Background

Paste Hex, RGB, HSL, or OKLCH. We will convert it and run the contrast check.

Swap

Recents

Recent combinations

Recent combinations stay on this device for 30 days. You can clear them anytime or turn this off in Settings.

No recent combinations yet.

Recent combinations stay on this device for 30 days. You can clear them anytime or turn this off in Settings.

Warning message

Info message

Enter two colors to see the contrast

Contrast Ratio Score

1.0 3.0 4.5 7.0 21.0

1.0 - 3.0

3.0 - 4.5

4.5 - 7.0

7.0 - 21.0

Large Text

Text that is 24px or larger in regular weight, or 19px or larger in bold.

Regular Text

Text smaller than 24px in regular weight, or smaller than 19px in bold.

Graphic Elements

Non text UI parts like icons, borders, dividers, focus rings, strokes, and component outlines.

At a glance

Hard to read. This contrast is likely to strain or disappear in real UI. Increase contrast before using it for text.

Unfit message preview.

Marginal message preview.

Reliable message preview.

Exceptional message preview.

Foreground

No options can reach this target with the current pairing.

Background

No options can reach this target with the current pairing.

Skip hex conversion for contrast checks. Paste your hex valuesrgb values

Skip hex conversion for contrast checks. Paste your hex values