LOCAL FILES. REAL POSSIBILITIES.

Color contrast checker

Compare opaque hex colors against WCAG text thresholds and explore foreground suggestions.

YOUR WORKSPACEProcessed on your device

Check two opaque sRGB colors against WCAG text contrast thresholds. Enter #RGB or #RRGGBB. Transparency, images, gradients and font rendering are not modeled.

Foreground hex

Foreground picker

Background hex

Background picker

Suggestion target

Contrast ratio: 6.4207:1

#176B55 on #FFFFFF. Pass/fail uses the unrounded ratio. Large text means at least 18 pt regular or 14 pt bold (24 px or about 18.67 px).

The visual sample shows the selected colors; the table gives accessible text results.

WCAG contrast thresholds
Criterion	Required ratio	Result
AA normal text	4.5:1	Pass
AA large text	3:1	Pass
AAA normal text	7:1	Fail
AAA large text	4.5:1	Pass
Non-text color pair	3:1	Pass

Foreground suggestions

Candidates sample 255 steps toward black and white, keeping the background fixed. They are not a search for the perceptually closest color.

#176B55: 6.4207:1

The non-text row compares this pair only; actual controls, focus states and adjacent colors need their own review. These results do not certify a whole page’s accessibility.

Criteria: WCAG minimum contrast and enhanced contrast.

Nothing is saved automatically. JSON backups are readable, unencrypted files. Export before closing.

Import JSON backup

Processed on your device. Your files are never uploaded by Justility.

How privacy works

How it works

Enter foreground and background hex colors or use the color pickers. Review the ratio and five pass/fail rows, choose a suggestion target and optionally apply a sampled foreground candidate. Export a CSV report or JSON color-pair backup.

Supported formats

Opaque sRGB #RGB and #RRGGBB colors. Live previews, AA/AAA text thresholds, a non-text pair check, CSV report and versioned JSON backup. Alpha hex, named colors, gradients and images are not accepted.

Good to know

The checker evaluates two colors only and does not certify a page’s accessibility. Suggestion candidates sample 255 steps toward black and white, not perceptual distance. Pass/fail compares the full ratio without rounding.

Worked example

Before

Foreground #000000; background #FFFFFF

After

21:1, passing AA and AAA normal and large text thresholds

AA normal requires 4.5:1, AA large 3:1, AAA normal 7:1 and AAA large 4.5:1. Large is at least 18 pt regular or 14 pt bold.

Check every meaningful color pairing

Test actual text against the background it occupies. A passing pair does not establish readable typography, accessible focus states or correct semantics. The non-text row applies the 3:1 threshold only to this pair; real controls need their adjacent colors reviewed.

Color picker from image

Troubleshooting

Why does a rounded ratio near 4.5 still fail normal AA?

WCAG thresholds must be met without rounding up. The displayed value is shortened for reading; the pass/fail comparison uses the underlying unrounded number.

Common questions

Why are there no foreground suggestions at my chosen target?

For some backgrounds, neither black nor white can reach a high target. Change the background or lower the target; changing foreground alone cannot solve that pair.

Can I use this without an internet connection?

Yes, after you prepare this tool from Offline help and the browser retains its assets. Installation is optional. All processing dependencies are bundled locally.