Color and Contrast Guide with Consideration for Color Vision Diversity: Design Secrets That Make Everyone Feel Comfortable

Overview Summary

• Why understanding and accommodating color vision diversity is essential
• Contrast guidelines based on WCAG 2.1 AA/AAA
• How to use color vision simulation tools
• Practical color palettes and contrast calculation examples
• Concrete improvement steps and sample code

1. Why Accommodate Color Vision Diversity?

In web design and graphic production, prioritizing only color aesthetics or brand image risks making information unreadable for people with diverse color vision. It is estimated that over 5 million people in Japan and 300 million worldwide have color vision deficiencies (more common in men)¹.

• Reduce eye strain and misrecognition: Enhance readability with proper contrast and reduce fatigue during long viewing sessions.
• Eliminate information gaps: Ensure critical information (error messages, links, etc.) is conveyed reliably, improving user experience.
• Boost brand trust: By providing designs that are usable by everyone, fulfill corporate social responsibility (CSR).

Target Audience: UI/UX designers, web directors, marketing professionals, content creators
Accessibility Level: From WCAG 2.1 AA (mandatory) up to AAA (higher consideration)

2. Basics of Color Vision Diversity and Simulation

2.1 What Is Color Vision Diversity?

Color vision diversity (color vision deficiency) arises from differences in the types or functions of photoreceptor cells.

• Protanomalous / Deutanomalous / Tritanomalous: Classification based on having 1–3 types of photoreceptors.
• Protanopia (red weakness), Deuteranopia (green weakness), Tritanopia (blue weakness): Reduced or missing sensitivity to specific wavelengths.

2.2 Using Color Vision Simulation Tools

1. Coblis (Color Blindness Simulator)
2. Chromatic Vision Simulator (Olli)
3. Plugins for Photoshop or Figma
   Use these to preview your color schemes in simulation and check readability.

3. Contrast Guidelines and Calculation Methods

3.1 WCAG 2.1 Contrast Ratios

• AA Level
  • Normal text (under 14 pt): minimum 4.5:1
  • Large text (18 pt+ or bold 14 pt+): minimum 3:1
• AAA Level
  • Normal text: minimum 7:1
  • Large text: minimum 4.5:1

3.2 Sample Contrast Calculation

• Background color: #FFFFFF (white)
• Text color: #1A1A1A (dark gray)
• Contrast ratio = 21:1 (far exceeds AAA, a very safe combination)

body {
  background-color: #FFFFFF;
  color: #1A1A1A; /* Contrast ratio 21:1 */
}

4. Tips for Color Vision–Friendly Palettes

4.1 Combining Hue, Lightness, and Saturation

• Hue differences: Ensure distinguishable hue contrasts (e.g., reds vs. greens, blues vs. yellows).
• Lightness contrast: Even within the same hue family, big lightness differences improve distinguishability.
• Saturation control: Use high saturation for accents; maintain medium to low saturation overall for comfort.

4.2 Balancing Accent and Base Colors

• Use accent colors for links, buttons, and interactive elements.
• Use warning colors for alerts and icons with clear contrast.

5. Practical Workflow Example for Building a Palette

1. Initial palette draft
   • Choose three colors: base background, accent, and warning based on brand or theme.
2. Contrast checking
   • Verify AA/AAA compliance with a dedicated tool (e.g., Contrast Checker).
3. Color vision simulation
   • Test in simulators for protanopia, deuteranopia, etc.
4. Refinement and re-check
   • Adjust lightness/saturation and re-verify contrast and simulations.
5. Documentation
   • Compile the final palette and usage rules into your style guide.

6. Concrete Case Studies

6.1 Button Color Comparison

• Before Improvement
  • Background #FF0000 / Text #FFFFFF → Contrast 4.0:1 (fails AA)
• After Improvement
  • Background #CC0000 / Text #FFFFFF → Contrast 5.2:1 (meets AA)

/* After Improvement */
.button {
  background-color: #CC0000; /* Contrast 5.2:1 */
  color: #FFFFFF;
}

6.2 Optimizing Chart Colors

• Avoid gradients of the same hue; prepare six colors with consideration for color vision simulation.
• Ensure each legend color has at least 3:1 contrast against legend background.

7. Who Benefits and What Are the Effects?

• UI/UX Designers: Establish user-friendly palette rules to enhance design quality.
• Front-End Engineers: Streamline color handling in implementation, reducing bugs.
• Marketing Professionals: Increase CTR and brand perception with high-visibility banners and ads.
• Content Creators: Improve learning outcomes with accessible visual materials.

8. Conclusion: “Thoughtful” Design Delivered Through Color

Considering color vision diversity in your color and contrast choices is not just a technical requirement—it’s “thoughtfulness for all.”

1. Understand color vision diversity and verify via simulation
2. Ensure contrast ratios meet WCAG standards
3. Balance hue, lightness, and saturation
4. Define a practical workflow and document it in your style guide

We hope this guide fuels your design passion and helps you create a kinder web that reaches diverse users.