What contrast ratio do I need to pass WCAG AA?

For normal body text you need a contrast ratio of at least 4.5:1 against the background. For large text — generally 18pt regular or 14pt bold and larger — the minimum drops to 3:1.Non-text user interface components such as button borders, form outlines, and meaningful icons need at least 3:1 against adjacent colors to meet WCAG 2.1 Success Criterion 1.4.11.

How is contrast ratio calculated?

Contrast ratio compares the relative luminance of two colors. Each color is converted from sRGB into a luminance value, and the ratio is (L1 + 0.05) divided by (L2 + 0.05), where L1 is the lighter color.The result ranges from 1:1 for identical colors to a maximum of 21:1 for pure black on pure white. The checker runs this calculation live every time you change either color.

What counts as large text for the 3:1 threshold?

WCAG defines large text as 18 point and larger, or 14 point and larger if the font is bold. In CSS pixels that translates roughly to 24px regular or 18.66px bold.Anything smaller is treated as normal text and needs the stricter 4.5:1 ratio for AA, or 7:1 for AAA.

Why does my color combination pass AA but fail AAA?

AAA is a stricter conformance level. It requires 7:1 for normal text and 4.5:1 for large text, compared with 4.5:1 and 3:1 at AA.Most production design systems target AA as the baseline and use AAA selectively for critical body copy. The checker shows both badges so you can see how much headroom you have above the minimum.

Do logos and disabled controls have to meet contrast requirements?

No. WCAG explicitly exempts logos and brand marks from contrast requirements, and disabled or inactive UI components are also exempt.Everything else that conveys information — body text, active buttons, focus indicators, form fields, chart elements, and informative icons — needs to meet the relevant 3:1 or 4.5:1 threshold.

Can I use this checker for dark mode?

Yes. The contrast formula is symmetric, so light-on-dark and dark-on-light pairs are evaluated the same way. Enter your dark-mode foreground and background to confirm the ratio still clears AA or AAA.Dark mode often shifts perceived contrast even when the math is identical, so rely on the live preview to sanity-check legibility on top of the numeric badge.

What should I do when a brand color fails contrast?

You have a few options. Reserve the brand color for large text or headings where only a 3:1 ratio is required, or pair it with a darker or lighter variant for body copy.You can also nudge the lightness in HSL by a few percent until the ratio crosses the threshold. The checker updates instantly, so you can find the smallest possible adjustment that keeps the brand recognizable while satisfying accessibility.

Contrast Ratio Checker — WCAG AA & AAA Live Preview

Heading Text

This is body text at 16px. Good contrast ensures readability for all users, including those with low vision. WCAG 2.1 requires a minimum ratio of 4.5:1 for normal text.

Small text (12px) requires the same 4.5:1 ratio. This is often where designs fail accessibility checks.

Badge Status Hyperlink text

A contrast ratio checker built for real design decisions

This contrast ratio checker measures the WCAG 2.1 contrast between any foreground and background color and shows you, in real time, whether the pair clears the thresholds for body copy, large text, and non-text UI components. You get the numeric ratio, AA and AAA badges, and a live preview of actual rendered text — no guessing, no copy-pasting hex codes between tabs.

Contrast ratio is a comparison of the relative luminance of two colors, producing a value from 1:1 (identical) up to 21:1 (pure black on pure white). The math is defined by the W3C in WCAG 2.1 Success Criterion 1.4.3, and the same formula powers every reputable checker on the web.

What the WCAG thresholds actually mean

The tool grades your pair against the four ratios designers hit most often:

4.5:1 — WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
3:1 — WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
7:1 / 4.5:1 — WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. The checker flags each tier independently so you can ship a heading at brand color while keeping body copy at the stricter ratio.

Fix failing pairs without abandoning your brand

When a combination fails, the live preview makes it obvious which way to push. Darken the foreground, lighten the background, or nudge lightness in HSL until the badges flip to pass. Once your hero pair clears AA, build out the rest of your system with the Color Safe Palette Builder or audit every combination in one shot with the Color Palette Contrast Grid.

For deeper diagnostics — including APCA Lc scores and rendered-text comparisons — pair this check with the Color Legibility Analyzer. If your color is locked but the ratio is short, generate a tuned variant with the Tint & Shade Scale Generator and re-test in seconds.

Where contrast matters beyond text

WCAG 1.4.11 extends the 3:1 rule to interactive components and meaningful graphics — button borders, focus rings, form outlines, icons that convey state, and data visualizations. The MDN guide to color contrast walks through these cases in detail, and the tool's UI-component mode mirrors that 3:1 threshold so you can validate chips, toggles, and chart elements alongside text.

Test, tune, ship — and keep accessibility a design constraint instead of a last-minute audit.

🎨 Creation

🔬 Analysis

🔄 Conversion

♿ Accessibility

🧪 Advanced

🧰 Utility

Contrast Ratio Checker

🎨 Colors

💡 Suggestions

📦 Presets

🖥️ Live UI Preview

Heading Text

📋 WCAG 2.1 Compliance Details

⚡ Quick actions

A contrast ratio checker built for real design decisions

What the WCAG thresholds actually mean

Fix failing pairs without abandoning your brand

Where contrast matters beyond text

Frequently Asked Questions