博客 · 2026-08-03
What Is WCAG Contrast Ratio? AA vs AAA Explained
Understand WCAG contrast ratio, why it matters for readability, and how to check text and UI colors against AA and AAA thresholds.
WCAG (Web Content Accessibility Guidelines) defines how readable text and essential UI must be against their backgrounds. The contrast ratio compares relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white).
For normal body text, WCAG 2.x Level AA requires at least 4.5:1. Large text (roughly 18pt regular or 14pt bold and up) needs 3:1. Level AAA tightens normal text to 7:1 and large text to 4.5:1. Non-text UI components that convey meaning generally need 3:1 against adjacent colors.
Contrast is not the same as “looking bold.” Two vivid complementary colors can still fail if their luminance values are close. Always measure ratio instead of judging by eye, especially for pastels, neon-on-dark, and grey-on-grey dashboards.
Use the ColorPicker contrast checker to paste foreground and background HEX values, preview sample text, and see pass/fail for AA and AAA. HSL tweaks let you nudge lightness until you clear the threshold without abandoning the brand hue.
Practical workflow: lock brand primary, then derive text and surface colors that pass AA on those surfaces. Document approved pairs (e.g., primary-700 on white, primary-100 on primary-900) so product teams reuse known-good combinations.
Mobile and outdoor glare make weak contrast worse. Prefer AA as a minimum for product UI; aim AAA for long-form reading experiences when brand allows. Decorative graphics that are not required to understand content are exempt from the same text rules, but icons that convey state are not purely decorative.
Batch-check entire palettes with the accessibility audit tool when you ship a theme pack. Catching one failing muted caption color before release saves redesign cycles later.
Bottom line: WCAG contrast ratio is a luminance math check, not a style preference. Measure it, fix lightness, and keep a short list of verified text/background pairs.