Color Contrast & Visual Accessibility

WCAG AA 4.5:1 ratio, AAA 7:1 ratio, and not relying on color alone

« Images, Text Alternatives & Decorative Graphics« Previous Keyboard Navigation & Focus Management »Next »

Sufficient color contrast ensures that text remains legible for users with low vision or color blindness, as well as for users viewing screens in bright sunlight.

Contrast Ratios & The Golden Rule of Color

WCAG Level AA Requirement: Normal text (< 18pt or < 14pt bold) requires a contrast ratio of at least 4.5:1 against its background. Large text requires at least 3:1.

WCAG Level AAA Requirement: Normal text requires at least 7:1; large text requires 4.5:1.

Do Not Rely on Color Alone: Never communicate critical status using color exclusively (e.g. red for error). Always pair color with an icon or clear text label so color-blind users can interpret the message.

Accessible Status Badges

Try It Yourself »

<!-- INACCESSIBLE: Relies on red color alone -->
<span style="color: red;">Failed</span>

<!-- ACCESSIBLE: High contrast (7:1) + distinct icon + explicit text -->
<span class="status-error" style="background: #fef2f2; color: #991b1b; padding: 4px 8px; border-radius: 4px;">
  <span aria-hidden="true">&#9888;</span> Error: Payment Declined
</span>

Combines WCAG AAA contrast ratio with an icon and explicit descriptive text.

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

What is the minimum WCAG Level AA color contrast ratio required for regular body text against its background?

« Previous: Images, Text Alternatives & Decorative Graphics Next: Keyboard Navigation & Focus Management »