ToolVaults

WCAG Contrast Checker

Test any foreground/background color pair against WCAG 2.2 contrast rules. Shows the ratio, live preview, and pass/fail for normal text, large text, and UI components.

Runs 100% in your browser — nothing is uploaded.
The quick brown fox jumps over the lazy dog
Small text sample — 16px normal weight, the WCAG "normal text" baseline.
19.53:1contrast ratio
Normal text: AAALarge text (18pt+): AAAUI component: AA
WCAG 2.2 requires 4.5:1 for normal text (AA), 7:1 for AAA. Large text (18pt+ or 14pt bold) needs 3:1 (AA) or 4.5:1 (AAA).

How to use

  1. 1
    Enter foreground + background

    Any two colors as hex, rgb(), or hsl(). Live preview updates in real time.

  2. 2
    Read the contrast ratio

    From 1 (identical) to 21 (pure black on pure white).

  3. 3
    Check the pass/fail badges

    AA / AAA verdicts for normal text, large text, and non-text UI components.

  4. 4
    Adjust and re-check

    Tweak either color until you hit at least AA 4.5:1 for body text.

Examples

Body text on a light background
Input
FG #333333 · BG #ffffff
Output
Ratio 12.63:1 · AA ✓ · AAA ✓ · Large text ✓
Comfortably passes even AAA for both sizes. Dark grey on white is a safe default.
Trendy but failing
Input
FG #a0a0a0 · BG #ffffff
Output
Ratio 2.85:1 · AA ✗ · AAA ✗
A common designer-favorite grey that fails body-text contrast in every jurisdiction.
Accent color on white
Input
FG #6366f1 · BG #ffffff
Output
Ratio 4.86:1 · AA ✓ · Large text ✓ · AAA ✗
Passes AA for body text but not AAA. Fine for links and buttons; use a darker shade for AAA compliance.

Frequently asked

What contrast ratio do I need?

WCAG 2.2 AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA requires 7:1 and 4.5:1 respectively. UI components (icons, form borders) need at least 3:1.

Is WCAG the right standard?

WCAG 2.2 AA is the legal baseline in most jurisdictions (US, EU, UK). WCAG 3 will introduce APCA, which is more perceptually accurate but not yet the compliance target.

Why does my beautiful design fail contrast?

Perceptual contrast between light greys and white, or between blues and purples, is often much lower than it looks. Always test — trust the numbers, not the eye.

Related tools