Accessibility design tool

WCAG Color Contrast Checker

Compare foreground and background colors using the WCAG 2.2 luminance formula. See AA and AAA results, preview real text, account for transparency, and try accessible alternatives—all locally in your browser.

Choose your colors

Color pair

Picker

Foreground or text color

Picker

Background color

Use #RGB, #RGBA, #RRGGBB, #RRGGBBAA, or rgb()/rgba(). Alpha is composited before testing.

Transparency underlay

Picker

Opaque color behind the background

Used only when the background has transparency. Enter opaque #RGB or #RRGGBB.

Text preview and classification

Sample text

Font size (CSS px)

Font weight

Try a known pair

Contrast results

Contrast ratio 10.48:1

Text: #203F5E
Background: #FFFAF7

Use	Minimum	Result
Normal text · AA	4.5:1	✓ Pass
Normal text · AAA	7:1	✓ Pass
Large text · AA	3:1	✓ Pass
Large text · AAA	4.5:1	✓ Pass
UI and graphics · AA	3:1	✓ Pass

The displayed ratio is rounded to two decimals. Pass/fail uses the full-precision value, as WCAG requires.

At 16px and regular weight, your sample is normal text and needs 4.5:1 for AA.

Opaque foreground alternatives

Suggestions preserve the foreground hue and saturation while changing lightness. Applying one removes foreground transparency.

AA normal · Already passes

AAA normal · Already passes

Visual preview

Readable design works for more people.

Large bold text preview (24px)

UI component preview

How to use this checker

Enter the foreground and background actually used together. Paste hex, RGB, or RGBA values, or use the color pickers.
If the background is translucent, set the opaque underlay behind it. The checker composites background first, then foreground.
Use the AA or AAA row that matches your text size. Active control boundaries and meaningful graphical parts generally use the 3:1 non-text row.
Test every relevant state, including hover, focus, pressed, selected, disabled where applicable, and the least-contrasting part of gradients or images.

Interpret the result

WCAG 2.2 Level AA requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 and 4.5:1 respectively. Large text means at least 24 CSS px at any weight, or about 18.67 CSS px when bold (typically weight 700 or heavier).

A passing pair helps with one requirement; it does not make a page accessible by itself. Do not rely on color alone for errors, statuses, charts, or links. Use text, shapes, patterns, underlines, or other cues too.

Method and standards

The checker converts sRGB channels to linear light using the WCAG 2.2 relative-luminance definition, including its current 0.04045 breakpoint. It calculates (Lighter + 0.05) ÷ (Darker + 0.05), producing a range from 1:1 to 21:1.

Read the primary guidance for text contrast and non-text contrast. Threshold equality passes; a value below the threshold fails even if its rounded display looks equal.

Limits and privacy

This pair calculator does not inspect a page, sample screen pixels, or account for antialiasing, thin fonts, gradients, images, video, blend modes, filters, wide-gamut colors, display conditions, or surrounding context. Verify rendered designs and test with users and assistive technology.

Your colors and sample text are processed only in this browser tab. This tool sends no values to an API and uses no tool-specific cookies or local storage.