WCAG 2.2 color contrast checker

Good color.
Readable color.

Build a foreground and background pair, see the accessibility thresholds at once, convert the values, or sample colors from an image right in the browser.

Local color work. Color calculations and image sampling happen on your device. Uploaded images never leave this browser tab.

01

Choose text and background colors

The selected colors are remembered on this device. Image files are not.

Contrast ratio
HEX
RGB
HSL

Readable wins.

This is ordinary-size sample text. A good ratio helps people read it in bright rooms, on tired screens, and with a wider range of vision.

Sample from an image

Nothing uploads

Click the image for a precise pixel, or choose one of the locally extracted color swatches.

The thresholds, in plain English

Contrast is one accessibility check.

01

AA normal text: 4.5:1

WCAG Level AA requires at least 4.5:1 for normal-size text. This is the everyday target for body copy.

02

AA large text: 3:1

Large text may use 3:1. WCAG defines large as at least 18 pt, or 14 pt when bold—not simply whatever looks big on one screen.

03

UI boundaries: 3:1

Meaningful interface components and graphical objects often need 3:1 against adjacent colors. Decorative details can be exempt.

The important caveat

Color contrast questions.

Does a passing ratio make my whole site accessible?

No. It checks one color pair. Accessibility also includes keyboard use, focus, labels, structure, zoom, motion, alternatives, and real user testing. This tool is not a full accessibility audit.

Which standard does this use?

The calculations use the relative-luminance and contrast-ratio method in W3C's Web Content Accessibility Guidelines 2.2.

Why can two bright colors still fail?

Contrast depends on relative luminance, not how colorful or different the hues feel. Two vivid colors can have nearly the same luminance and remain hard to distinguish.