What Is WCAG Color Contrast — and Why It Matters
The Web Content Accessibility Guidelines (WCAG) 2.2 define a contrast ratio standard that ensures text and interface elements are perceivable by the widest possible audience, including the estimated 300 million people worldwide living with color vision deficiency or low vision. Contrast ratio is computed from the relative luminance of two colors — a perceptually weighted measure of brightness derived from each color channel (R, G, B) linearized and then combined as L = 0.2126R + 0.7152G + 0.0722B. The final ratio is expressed as lighter ÷ darker + 0.05, ranging from 1:1 (no contrast) to 21:1 (black on white).
WCAG organizes its contrast requirements into three check categories. Normal text covers body copy, labels, and any text below the large-text threshold. Large text — defined as 18 pt (≈ 24 px) regular weight or 14 pt (≈ 18.66 px) bold — earns a more lenient threshold because its greater size makes it easier to read even at lower contrast. The third category, UI components and graphical objects, applies to buttons, form fields, focus indicators, and meaningful icons; these must clear 3:1 under WCAG 2.2 Success Criterion 1.4.11. Decorative images and disabled controls are exempt.
Failing contrast requirements has real-world consequences. The Americans with Disabilities Act (ADA) in the United States and the European standard EN 301 549 both reference WCAG as the technical benchmark for digital accessibility compliance. Beyond legal risk, poor contrast erodes user trust: research consistently shows that hard-to-read text increases bounce rates and lowers task-completion rates for all users — not just those with disabilities. Use this checker alongside Chroma Palette's HEX → RGB converter to inspect raw channel values, or the Color Palette Generator to build compliant color systems from the ground up.
| Conformance Level | Normal Text | Large Text (≥18pt / 14pt bold) | UI Components & Graphics |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | N/A (no AAA criterion) |
Frequently Asked Questions
What is a WCAG contrast ratio?
A WCAG contrast ratio is a single number — written as X:1 — that quantifies the difference in perceived brightness between a foreground and background color. It is derived from the relative luminance of each color using a formula standardized in WCAG 2.2. Values range from 1:1 (identical colors, no contrast) to 21:1 (pure black against pure white, maximum contrast). The higher the number, the more readable the text.
What is the difference between AA and AAA conformance?
Level AA is the widely adopted legal baseline — required by the ADA, EN 301 549, and many public-sector procurement policies. It demands 4.5:1 for normal text and 3:1 for large text. Level AAA is the enhanced tier, requiring 7:1 for normal text and 4.5:1 for large text. AAA is recommended for high-stakes content such as medical information or government services where low-vision users may have the greatest need.
What counts as "large text" in WCAG?
WCAG 2.2 defines large text as at least 18 pt (≈ 24 px) in normal weight, or at least 14 pt (≈ 18.66 px) bold. Only text meeting these thresholds may use the lower 3:1 (AA) or 4.5:1 (AAA) ratio. Decorative text, text in inactive UI elements, and text that is part of a logo or brand name are fully exempt from contrast requirements.
Does contrast ratio apply to icons and buttons?
Yes. WCAG 2.2 Success Criterion 1.4.11 (Non-text Contrast) requires meaningful icons, button borders, input field outlines, and focus indicators to achieve at least 3:1 contrast against adjacent colors. This rule targets the visual boundaries and identifying features of a component — the text inside a button is governed by the text contrast criteria (4.5:1 at AA). Purely decorative icons with no functional meaning are exempt.
Can I share my contrast result via a URL?
Yes — Chroma Palette's Color Contrast Checker stores the current foreground and background values as URL query parameters (for example ?fg=111827&bg=ffffff). Simply copy the address from your browser bar and share it with a colleague, paste it into a Figma comment, or save it as a design system reference. Anyone who opens the link will see the exact same color pair and pass/fail results without any manual entry.