The Vue Playbook

Appearance

Color and contrast ​

Mastering Color & Contrast for Accessible Web Design ​

Creating accessible color palettes isn't just a design preference—it ensures that users with visual impairments, including low vision and color blindness, can perceive and interact with your content. Good contrast also improves readability and prevents eye strain for everyone.

Why Color & Contrast Matter ​

  • Low-vision users need sufficient light-dark differentiation to read text easily.
  • Color-blind users rely on brightness contrast because hue differences alone may be indistinguishable.
  • Minimizes eye fatigue, as overly light text on light backgrounds strains the eyes.
  • WCAG compliance is often a legal requirement under standards like the EAA or ADA.

Key WCAG* Contrast Guidelines ​

1. Text Contrast – Level AA ​

  • Normal text must have at least 4.5:1 contrast ratio against its background.
  • Large text (≥18pt or ≥14pt bold) needs minimum 3:1.

2. Enhanced Contrast – Level AAA ​

  • Regular text: 7:1
  • Large text: 4.5:1

3. Non-text UI Elements ​

  • UI components (buttons, form borders, icons) need at least 3:1 contrast against adjacent colors.

*Web Content Accessibility Guidelines

Best Practices for Designers ​

As front-end developers, we're not the only ones responsible for ensuring proper color contrast—designers should have already applied most of the accessibility guidelines. However, we should still be able to review and provide feedback on color and contrast choices.

Light vs Dark Text ​

Stick to dark text on light backgrounds or light text on dark backgrounds—neutral tones often work best.

Avoid Low-Contrast Pairs ​

  • Skip combinations like bright blue on yellow or muted colors together—they often fail contrast tests.
  • Designers often choose softer gray text for aesthetics, but WCAG warns against going too light—use 4.5:1 as a rule.

Include Multiple Visual Cues ​

Don’t rely on color alone—add visual patterns, shapes, or text labels to help color-blind users.

Tips to test your design ​

  • Convert designs to grayscale to check brightness contrast.
  • Use tools or simulators to see how they appear to users with common color vision deficiencies.

Tools You Should Use ​

Testing Strategies ​

  1. Color Contrast Test Cases
    • Confirm body text meets 4.5:1.
    • Check link text against both background and surrounding text.
    • Ensure hover, focus, and active states remain compliant.
  2. UI Component Checks
    • Verify input borders, buttons, and icons meet 3:1.
  3. Color-blindness Simulation
    • Preview your design under deutan, protan, and tritan conditions.

Why It Still Matters ​

Despite modern screens and design tool sophistication, light-on-light text is trending—and it's a real problem:

“Designers tend to treat it as a starting point... but guidelines exist for a reason”

Turning up contrast isn’t just about compliance—it restores the web’s universality and readability for all.

🎯 Quick Reference ​

ElementRequired Contrast Ratio
Body Text (normal)≥ 4.5 : 1
Body Text (large/bold)≥ 3 : 1
UI Components & Graphics≥ 3 : 1
AAA-level Body Text≥ 7 : 1
AAA-level Large Text≥ 4.5 : 1