🎨 Color contrast

Common mistake

A common mistake is choosing text and background colors that look visually appealing in a design tool but fail minimum contrast requirements. Low contrast is especially problematic for users with low vision, color blindness, or those using a device in bright sunlight.

🎯 Relevant elements

This guideline applies to any element that presents text or meaningful visual information:

• Body text and headings
• Button labels and icon buttons
• Input field labels, hints, and error text
• Status indicators and badges that convey meaning
• Placeholder text

---

WCAG Guideline

This guideline is based on two related criteria:

• WCAG 2.2 — 1.4.3 Contrast (Minimum) (Level AA). Text and images of text must have a contrast ratio of at least 4.5:1 against the background. Large text (18pt / 14pt bold or larger) requires at least 3:1.
• WCAG 2.2 — 1.4.11 Non-text Contrast (Level AA). UI components and graphical objects (icons, focus indicators, input borders) must have a contrast ratio of at least 3:1 against adjacent colors.

---

Solution

Define colors in your theme with contrast in mind and verify them with a contrast checker before shipping. Never rely on color alone to convey meaning.

// ❌ Don't - light grey text on white background fails 4.5:1
Text(
  'Submit',
  style: TextStyle(color: Color(0xFFAAAAAA)), // ~2.3:1 on white
);

// ✅ Do - dark text on white meets 4.5:1
Text(
  'Submit',
  style: TextStyle(color: Color(0xFF555555)), // ~7.4:1 on white
);

---

Validation & Testing

See the Validation & Testing setup guide for tool configuration.

accessibility_tools

The accessibility_tools package flags contrast violations at runtime during development.