7.3 Color theory and accessibility in data vis

Color theory and accessibility are crucial in data visualization. They help create visually appealing, informative graphics that everyone can understand. By applying color harmony principles and following accessibility guidelines, we can design visualizations that effectively communicate insights to all viewers.

Choosing colors strategically enhances data storytelling and guides viewers' attention. Evaluating color choices ensures visualizations are accessible, aesthetically pleasing, and effectively convey information. Mastering these concepts is key to creating impactful data visualizations that resonate with diverse audiences.

Color Theory for Data Visualization

Color Wheel and Harmony

Top images from around the web for Color Wheel and Harmony

• 

  Visual Aids | Business Communication View original

  Is this image relevant?

• 

  Understanding the colour wheel – Behind The Scenes View original

  Is this image relevant?

• 

  Visual Aids | Business Communication View original

  Is this image relevant?

• 

  Understanding the colour wheel – Behind The Scenes View original

  Is this image relevant?

1 of 2

Top images from around the web for Color Wheel and Harmony

• 

  Visual Aids | Business Communication View original

  Is this image relevant?

• 

  Understanding the colour wheel – Behind The Scenes View original

  Is this image relevant?

• 

  Visual Aids | Business Communication View original

  Is this image relevant?

• 

  Understanding the colour wheel – Behind The Scenes View original

  Is this image relevant?

1 of 2

• The color wheel organizes colors on a circular diagram showing the relationships between primary colors (red, yellow, blue), secondary colors (colors created when primary colors are mixed), and tertiary colors (colors made from primary and secondary colors)
• Complementary colors are opposite each other on the color wheel (blue and orange) and create high contrast and visual interest
• Analogous colors are groups of three colors next to each other on the color wheel, sharing a common color, with one dominant color (usually a primary or secondary color), and a tertiary color
• Monochromatic colors are tints, tones and shades of a single base hue
• Color harmony combines colors in a way that is pleasing to the eye
  • Tools for achieving color harmony include the color wheel and the 60-30-10 rule
  • The 60-30-10 rule is a proportion meant to balance colors in any illustration
    • 60% is your dominant hue, 30% is secondary color, 10% is for accent color
    • This formula creates a sense of balance and allows the eye to move comfortably from one focal point to the next

Color Context and Perception

• Color context refers to how we perceive colors as they contrast with another color
  • Complementary colors (red and green) appear more vibrant when placed next to each other than on their own
  • Color perception is influenced by the surrounding colors and can change based on the context
• Color theory is the collection of rules and guidelines which designers use to communicate with users through appealing color schemes in visual interfaces
  • Understanding how colors are perceived and how they interact with each other is essential for creating effective color palettes in data visualizations
  • Applying color theory principles helps create visually appealing and harmonious designs that effectively communicate insights

Accessibility in Data Visualization

Color Contrast and Web Accessibility Guidelines

• Web Content Accessibility Guidelines (WCAG) 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text
  • Level AAA requires an even higher contrast ratio of at least 7:1 for normal text and 4.5:1 for large text
  • The contrast ratio measures the difference in perceived brightness between two colors, ranging from 1:1 (white on white) to 21:1 (black on white)
  • Sufficient color contrast ensures text is readable for users with low vision or color perception deficiencies
• Color should not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element (WCAG guideline 1.4.1 Use of Color)
  • Using color alone is problematic for people who cannot perceive color differences, including those with low vision who may have difficulty distinguishing colors
  • Whenever color cues are used, additional cues that do not rely on color perception must be included
    • For example, an instruction stating "press the green button to proceed" should also identify the button in a non-color-dependent way, such as "press the lower button to proceed"

Designing for Colorblindness

• Around 1 in 12 men and 1 in 200 women have some degree of color vision deficiency, commonly called "colorblindness"
  • The most common form is red-green color deficiency
  • Other types include blue-yellow color deficiency and complete color blindness (extremely rare)
• To ensure visualizations are colorblind-friendly:
  • Do not use color alone to make comparisons or convey information
  • Use colorblind-friendly color combinations
    • Avoid red/green, green/brown, blue/purple, and green/blue pairs
    • Use colors with different hues and levels of brightness to create contrast
  • Utilize texture and pattern to show contrast in addition to color
  • Test designs using colorblindness simulation tools (Coblis, Color Oracle) to check legibility

Color for Insight and Attention

Strategic Use of Color

• Color is a powerful tool for capturing attention, providing emphasis, creating atmosphere, organizing elements, and conveying meaning in visualizations
• Bright, saturated colors (red, orange, yellow) tend to be more eye-catching and attention-grabbing compared to cool, muted colors (blue, green)
  • Warm, saturated colors advance into the foreground, while cool, desaturated colors recede into the background
  • Hues with high saturation will attract more attention than muted ones
• Color can create visual hierarchy and organization in a visualization
  • The most important information should use bright, bold colors, while less important elements should use muted colors
  • Color coding is a common method to organize information
    • In a line chart with multiple data series, each line would have a different color to distinguish it from the others
• Color is often used to represent different categories of data, especially when showing comparisons between groups
  • Assigning a unique color to each category helps viewers quickly identify and compare different segments of the data
• Highlighting important information with a strong color will help guide the viewer's eye to key insights and takeaways

Using Color Intentionally

• The use of color in visualizations should be intentional and serve a clear purpose
  • Avoid using color for purely decorative purposes, as this can distract from the data and insights
  • Each color should have a specific meaning or role in the visualization
• Color palettes should be carefully chosen to align with the context, audience, and communication goals
  • The colors should evoke the appropriate tone and atmosphere for the topic and data story
  • Consider cultural associations and emotional responses to different colors when making palette choices
• Be mindful of the number of colors used in a single visualization
  • Too many colors can overwhelm the viewer and make it difficult to interpret the data
  • Aim for a balanced, harmonious palette that effectively conveys the necessary information without excess complexity
• Ensure the color mappings are intuitive and easy to understand
  • The meaning of each color should be clear to the audience based on common conventions, legends, or labels
  • Avoid using colors in ways that contradict expectations (e.g., using red for positive values, green for negative)

Evaluating Color Choices

Assessing Color Accessibility

• When evaluating color choices in existing visualizations, consider accessibility factors such as:
  • Color contrast: Is there sufficient contrast between text/elements and the background color? Use tools to check contrast ratios against WCAG guidelines.
  • Colorblindness: Are the color combinations distinguishable for individuals with color vision deficiencies? Simulate colorblind vision to identify potential issues.
  • Use of color alone: Is color used as the only means of conveying information? Ensure there are redundant visual cues that do not rely solely on color.
• Suggest improvements to color choices to enhance accessibility
  • Adjust colors to achieve higher contrast ratios
  • Choose colorblind-friendly palettes that work well for different types of color vision
  • Add textures, patterns, or labels to provide additional visual distinctions beyond color

Evaluating Effectiveness and Aesthetics

• Identify areas where color is used effectively to:
  • Organize and categorize information
  • Create visual hierarchy and guide attention
  • Highlight key insights and takeaways
  • Provide context and meaning to the data
• Note successful color techniques that could be applied to other visualizations
• Assess color harmony and the overall palette
  • Do the colors work well together, or are there clashing or jarring combinations?
  • Is the color scheme visually appealing and engaging?
  • Does the palette create the desired atmosphere and tone for the topic?
• Recommend adjustments to improve color harmony, balance, and effectiveness
  • Suggest alternative color combinations that better align with color theory principles
  • Propose changes to the palette to better suit the context and communication goals
• Critique whether color is used intentionally and strategically
  • Are color choices arbitrary or inconsistent?
  • Is color used for clear communication purposes, or primarily for decoration?
  • Suggest ways to make color usage more purposeful and tied to the data insights
• Determine if color is the most appropriate visual encoding for the specific data type
  • Color is best suited for categorical data, while other visual properties (size, position, shape) may be more effective for quantitative data
  • Recommend alternative visual mappings if color is not the optimal choice for the given data
• Analyze the number of colors used in relation to the visualization type and data complexity
  • Is the number of colors appropriate, or is the palette too limited or overwhelming?
  • Suggest ways to simplify or expand the color palette to better match the data and visualization purpose