Accessibility·free · no signup

Contrast Checker

Check the WCAG contrast ratio between a text color and its background, and see exactly which AA / AAA levels it passes.

The quick brown fox

Large headings, body copy, and the small print all need to clear the bar. This paragraph is regular body text at 16px — the size most of your readers actually see.

Small caption text · 12px · the hardest case to pass.

Foreground (text)
#
Background
#
Contrast ratio
4.55:1
Good
Royal Violet on Near-black
Normal text
≥ 4.5 AA · ≥ 7 AAA
AA
✕AAA
Large text
≥ 3 AA · ≥ 4.5 AAA
AA
AAA
UI / graphics
≥ 3:1 non-text
AA
—

WCAG measures contrast as a ratio from 1:1 (identical) to 21:1 (black on white). Body text should hit 4.5:1 for AA and 7:1 for AAA. Large text (18px bold or 24px regular) and non-text UI elements only need 3:1.

How to use the Contrast Checker

WCAG contrast compares the relative luminance of two colors as a ratio from 1:1 (identical) to 21:1 (black on white). The tool computes that luminance for your foreground and background, divides the lighter by the darker, and checks the result against the WCAG thresholds for each conformance level and text size.

  1. 1
    Set foreground and background

    Enter your text color and its background color as HEX or with the pickers.

  2. 2
    Read the ratio and badges

    See the exact ratio plus pass/fail marks for AA and AAA at normal and large text.

  3. 3
    Adjust until it passes

    Darken the text or lighten the background (or vice versa) and watch the ratio climb past the threshold you need.

Frequently asked

What contrast ratio do I need for accessibility?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text that is at least 18pt (about 24px) regular, or 14pt (about 18.66px) bold. Large text is allowed a lower contrast threshold.
What is the highest possible contrast ratio?
Pure black on pure white is 21:1, the maximum. Identical colors are 1:1, the minimum.
Does contrast matter for icons and UI components?
Yes — WCAG asks for at least 3:1 for meaningful graphics, icons and UI element boundaries against their background.

More accessibility

Color Blindness Simulator
See how your colors look to colorblind users (deuteranopia, protanopia and more).
WCAG Validator
Validate a full color system against WCAG contrast requirements.