WCAG Contrast Ratios Explained

Ensure your text and UI components are readable by everyone — including users with visual impairments.

What Is a Contrast Ratio?

A contrast ratio measures the difference in luminance between two colors. It ranges from 1:1 (same color) to 21:1 (black on white). The WCAG (Web Content Accessibility Guidelines) defines minimum ratios for accessible text.

WCAG Levels

AA — Minimum Standard

Normal text (<18px): At least 4.5:1.
Large text (≥18px bold or ≥24px regular): At least 3:1.
AA is the legal minimum in most jurisdictions. Aim for this at minimum.

AAA — Enhanced

Normal text: At least 7:1.
Large text: At least 4.5:1.
AAA is a higher standard. It's recommended for body text but may be impractical for large decorative elements.

How the Color Workbench Helps

The accessibility panel shows the contrast ratio between your current color and white, black, or any custom background. It clearly marks AA and AAA pass/fail status for both normal and large text.

Testing with Text Previews

The accessibility panel includes a live text preview so you can see how your color combination looks at different sizes. You can also preview against UI components like buttons and inputs to verify real-world readability.

Choosing Accessible Colors

• Dark text on light backgrounds usually provides better contrast than the reverse
• Use the suggested foreground feature in the Color Workbench to find compliant colors
• Test against multiple background colors, not just white
• Remember that placeholder text needs the same 4.5:1 ratio as body text

Common Pitfalls

• Light gray text on white backgrounds — the most common accessibility failure
• Brand colors used for body text without checking contrast
• Assuming "light mode" colors will work in "dark mode"