Contrast Checker

Check WCAG contrast ratios between two colors in LocalKit. Validate accessibility locally in your browser—values stay on-device with nothing uploaded.

Interactive controls load with JavaScript. Processing stays in your browser—nothing is uploaded.

Loading tool…

How to use

  1. Open Contrast Checker — Open the tool page.
  2. Enter colors — Provide foreground and background colors.
  3. Read the ratio — Compare against WCAG AA/AAA guidance for normal or large text.
  4. Adjust and recheck — Tweak colors until the pair meets your target.

Limits

Checks a single color pair. Gradients, images, and opacity need separate review. A pass is not full accessibility certification.

When to use

Before shipping UI text colors, verify contrast without uploading designs.

When not to use

When you need a full WCAG audit, screen-reader testing, or automated site crawls.

Privacy note

Color values never leave the browser.

References

FAQ（5）

What standard is used?

Contrast ratio guidance follows WCAG (see https://www.w3.org/TR/WCAG22/). AA and AAA have different thresholds; large text often has a lower required ratio.

Does a pass mean my whole site is accessible?

No. Contrast is one check. Keyboard access, semantics, and other criteria still matter.

Are colors uploaded?

No. Ratios are computed locally from the colors you enter.

Foreground on background only?

This tool checks the color pair you provide. Real UI may involve gradients, images, or opacity that need separate review.

Where do the AA/AAA numbers come from?

From WCAG success criteria for contrast. Prefer the W3C text as the authoritative source.