ToolPronto

Check color contrast and build a palette

Test WCAG contrast, find passing alternatives, and copy ready-to-use CSS colors.

Color values are calculated locally in your browser.

Favorites are saved only in this browser.

Color Check

Text contrast checker

Test one foreground and background pair against WCAG 2.x text thresholds.

Text colorBackground color

Readable color starts with real context.Readable color starts with real context.

Contrast ratio: 16.68:1
Normal text AA: ✓ Pass
Large text AA: ✓ Pass

Color formats

#17201Brgb(23 32 27)hsl(147 16% 11%)

Color Check

Five-color palette

Generate, lock, audit, simulate, and export a reusable five-color palette.

Palette preview

This deterministic preview is an approximation, not a diagnosis or a conformance test. Exported colors stay unchanged.

Source palette contrast audit

Each row treats the first color as text and the second as its background.

Color 1 on color 2#096447 / #E2F3EC
6.24:1Normal text AA: PassNormal AAA: FailLarge text AA: PassLarge AAA: Pass
Color 1 on color 3#096447 / #17201B
2.32:1Normal text AA: FailNormal AAA: FailLarge text AA: FailLarge AAA: Fail
Color 1 on color 4#096447 / #F4F6F3
6.61:1Normal text AA: PassNormal AAA: FailLarge text AA: PassLarge AAA: Pass
Color 1 on color 5#096447 / #6D46D9
1.21:1Normal text AA: FailNormal AAA: FailLarge text AA: FailLarge AAA: Fail
Color 2 on color 1#E2F3EC / #096447
6.24:1Normal text AA: PassNormal AAA: FailLarge text AA: PassLarge AAA: Pass
Color 2 on color 3#E2F3EC / #17201B
14.51:1Normal text AA: PassNormal AAA: PassLarge text AA: PassLarge AAA: Pass
Color 2 on color 4#E2F3EC / #F4F6F3
1.06:1Normal text AA: FailNormal AAA: FailLarge text AA: FailLarge AAA: Fail
Color 2 on color 5#E2F3EC / #6D46D9
5.18:1Normal text AA: PassNormal AAA: FailLarge text AA: PassLarge AAA: Pass
Color 3 on color 1#17201B / #096447
2.32:1Normal text AA: FailNormal AAA: FailLarge text AA: FailLarge AAA: Fail
Color 3 on color 2#17201B / #E2F3EC
14.51:1Normal text AA: PassNormal AAA: PassLarge text AA: PassLarge AAA: Pass
Color 3 on color 4#17201B / #F4F6F3
15.35:1Normal text AA: PassNormal AAA: PassLarge text AA: PassLarge AAA: Pass
Color 3 on color 5#17201B / #6D46D9
2.80:1Normal text AA: FailNormal AAA: FailLarge text AA: FailLarge AAA: Fail
Color 4 on color 1#F4F6F3 / #096447
6.61:1Normal text AA: PassNormal AAA: FailLarge text AA: PassLarge AAA: Pass
Color 4 on color 2#F4F6F3 / #E2F3EC
1.06:1Normal text AA: FailNormal AAA: FailLarge text AA: FailLarge AAA: Fail
Color 4 on color 3#F4F6F3 / #17201B
15.35:1Normal text AA: PassNormal AAA: PassLarge text AA: PassLarge AAA: Pass
Color 4 on color 5#F4F6F3 / #6D46D9
5.48:1Normal text AA: PassNormal AAA: FailLarge text AA: PassLarge AAA: Pass
Color 5 on color 1#6D46D9 / #096447
1.21:1Normal text AA: FailNormal AAA: FailLarge text AA: FailLarge AAA: Fail
Color 5 on color 2#6D46D9 / #E2F3EC
5.18:1Normal text AA: PassNormal AAA: FailLarge text AA: PassLarge AAA: Pass
Color 5 on color 3#6D46D9 / #17201B
2.80:1Normal text AA: FailNormal AAA: FailLarge text AA: FailLarge AAA: Fail
Color 5 on color 4#6D46D9 / #F4F6F3
5.48:1Normal text AA: PassNormal AAA: FailLarge text AA: PassLarge AAA: Pass

Contrast checker and palette tools

The contrast checker measures one text and background pair against WCAG 2.x text thresholds. The separate palette builder generates lockable colors, audits every foreground/background pair, previews color-vision approximations, and exports CSS variables.

What each color tool is for

Contrast checker: verify normal and large text before using a color pair.
Palette builder: explore five colors while locking the ones you want to keep.
Palette audit: find combinations that pass text contrast and inspect simulation limits.

How to check contrast

Enter or choose foreground and background colors.
Review the contrast ratio and WCAG text-size results.
Adjust a color or copy a passing CSS value.