WCAG 2.1 AA/AAA · Hex, RGB, HSL input · Live preview
| Level | Text Size | Min Ratio | Notes |
|---|---|---|---|
| AA | Normal text | 4.5:1 | Body text, UI labels, links |
| AA | Large text | 3:1 | ≥ 18pt (24px) regular or ≥ 14pt (18.67px) bold |
| AAA | Normal text | 7:1 | Enhanced — recommended for critical UI |
| AAA | Large text | 4.5:1 | Enhanced large text |
| AA | Non-text (UI components) | 3:1 | Icons, focus rings, form borders |
Color Contrast Checker calculates the contrast ratio between two colors and reports whether the combination passes WCAG 2.1 accessibility standards at the AA and AAA levels. Enter foreground and background colors as hex codes, RGB values, or HSL values, and the tool instantly displays the contrast ratio and pass/fail status for normal text, large text, and UI components.
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for people with low vision or color deficiency. WCAG 2.1 Level AA (the legal baseline in many jurisdictions) requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. The maximum possible contrast is 21:1 (black on white).
Contrast ratio is calculated from relative luminance — a measure of how much light a color reflects. The formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance. This is why blue text (#0000FF) on white (#FFFFFF) has a ratio of only 8.59:1, but blue on black (#000000) is just 2.44:1 — despite blue "looking dark", its luminance relative to black is not far enough.
White text (#FFFFFF) on blue (#0057B7)
Result: Contrast ratio: 4.58:1 — Passes WCAG AA for normal text, fails AAA
Dark gray (#333333) on white (#FFFFFF)
Result: Contrast ratio: 12.63:1 — Passes WCAG AA and AAA for all text sizes
Light gray (#CCCCCC) on white (#FFFFFF)
Result: Contrast ratio: 1.60:1 — Fails WCAG AA — a very common accessibility mistake
What is WCAG and why does it matter?
WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility. Level AA compliance is legally required in many countries (ADA in the US, EN 301 549 in the EU). Poor contrast is one of the most common accessibility failures and affects ~300 million people with color vision deficiency.
What counts as 'large text'?
WCAG defines large text as 18pt (24px) or larger at normal weight, or 14pt (approximately 18.67px) or larger at bold weight. Large text has a lower contrast requirement (3:1 for AA) because it is easier to read at lower contrast.
Does contrast ratio apply to icons and UI components?
Yes. WCAG 1.4.11 (Non-text Contrast, Level AA) requires 3:1 contrast ratio for the visual presentation of UI components (buttons, inputs, icons that convey meaning) and focus indicators against their adjacent colors.
My brand colors don't pass — what do I do?
Use your brand color for decorative elements, headlines, or large text where contrast requirements are lower. Switch to a darker or lighter shade that passes for body text. Tools like Leonardo Color or Accessible Palette generate entire color systems designed to meet contrast thresholds.
Does WCAG cover color-only distinctions?
Yes — WCAG 1.4.1 says color alone must not be the only way to convey information. Links must be distinguishable from surrounding text by more than color (e.g., with underlines), and form errors must not be indicated by color alone.