A SMALL TOOL BY SEAGOING

Contrast Check.

Find a little clarity in your colors. Check contrast, test a pairing,
and make your next interface easier to read.

Runs in your browser. No uploads. No accounts.

Your palette

COLORS

Text color

Background color

Use a 3- or 6-digit hex color, with or without #.

Try a preset

Your colors in use

LIVE

YOUR COLORS

Good design.
Clearly expressed.

Thoughtful details make a difference. A clear heading, a readable paragraph, a color pairing that makes every word easy to read.

View contrast results Body copy · Large heading

Your selected text and background colors, applied live.

The readability check

RESULTS

— : 1

CONTRAST RATIO

Calculating

Normal textAA ≥ 4.5:1 / AAA ≥ 7:1

AA —AAA —

Large textAA ≥ 3:1 / AAA ≥ 4.5:1

AA —AAA —

UI componentsAA ≥ 3:1 for essential visual details

AA —

Large text is at least 24px regular or about 18.67px bold. Results use the unrounded ratio; contrast alone does not establish full accessibility compliance.

Clearer colors. More people included.

Contrast is the difference in relative luminance between two colors. The greater the ratio, the easier text can be to distinguish. This tool uses the WCAG 2.2 sRGB formula, from 1:1 for identical colors to 21:1 for black and white.

Read the WCAG contrast guidelines