Color, Accessibility, and Annotation

The Presentation Nobody Could Read

In the previous lesson, we explored dashboard design and layout. Now let’s build on that foundation. A data analyst presented quarterly results to the leadership team. Beautiful charts. Professional color palette. Polished animations.

The CFO squinted at the screen. “Which line is revenue and which is expenses? They look the same to me.”

The analyst had used red for expenses and green for revenue. The CFO was among the 8% of men with red-green color blindness. The entire presentation was meaningless to him.

Color isn’t decoration. It’s information. And when it fails, the visualization fails. This lesson teaches you to use color effectively, design for accessibility, and add annotations that complete the story.

Color Theory for Data

Sequential Palettes: One Color, Many Values

Use sequential palettes when showing magnitude—low to high, light to dark.

Light blue ░░░ → ███ Dark blue
Low value  ← — — → High value

Use for: Heatmaps, choropleth maps, intensity scales. The darker the color, the higher the value. Intuitive and accessible.

Best practice: Use a single hue with varying lightness. Blue works universally well (no cultural associations that interfere with data reading).

Diverging Palettes: Two Extremes Around a Center

Use diverging palettes when there’s a meaningful midpoint.

Red ███ ← — Neutral — → ███ Blue
Below target    On target    Above target

Use for: Performance vs. target, positive/negative change, sentiment scores. The center is neutral; extremes show direction and intensity.

Best practice: Choose hues that work for colorblind viewers. Blue-to-orange is safer than red-to-green.

Categorical Palettes: Different Categories

Use distinct colors when categories have no natural order.

Product A: Blue   ███
Product B: Orange ███
Product C: Teal   ███

Use for: Comparing unrelated categories (product lines, regions, channels).

Best practice: Maximum 5-7 colors. Use colors that are distinguishable even at small sizes. Avoid using both red and green as category colors.

The Color Rules

Rule 1: Meaning over beauty. Don’t choose colors because they look nice together. Choose them because they communicate data accurately.

Rule 2: Less is more. Start with gray for most data. Add one highlight color for emphasis. Add a second color only if you need to distinguish two things.

Rule 3: Consistent mapping. If “revenue” is blue on one chart, it’s blue on every chart in the report. Don’t reassign colors between visualizations.

Rule 4: No rainbow gradients. The rainbow (red-orange-yellow-green-blue-purple) has no perceptual ordering. Your brain doesn’t process “purple means more than green.” Use a sequential palette instead.

Rule 5: Test in grayscale. Print your chart in black and white. If you can still tell the categories apart, your color choices work. If everything blends together, you need a secondary encoding (patterns, labels, or line styles).

Accessibility: Designing for Everyone

Color Blindness

Approximately 8% of men and 0.5% of women have some form of color vision deficiency. The most common type confuses red and green.

What to do:

1. Never rely on color alone. Pair color with another visual cue: labels, patterns, shapes, or line styles (solid, dashed, dotted).

2. Use colorblind-safe palettes. AI can help:

Generate a 5-color palette for a categorical chart
that is accessible to people with:
- Deuteranopia (red-green, most common)
- Protanopia (red-green, less common)
- Tritanopia (blue-yellow, rare)

The colors should be distinguishable at chart-element
sizes (bars, lines, points) and in a legend.

3. Test with simulation tools. Use browser extensions or tools that simulate color blindness to verify your charts work.

Safe color combinations:

• Blue and orange (safe for all types)
• Blue and red (safe for most types)
• Purple and yellow (safe for most types)
• Avoid: red and green, green and brown, blue and purple

Screen Reader Accessibility

Charts are invisible to screen readers unless you provide alternatives:

Generate alt-text for this chart:

A line chart showing monthly website traffic from Jan-Dec
2025. Traffic grew steadily from 10,000 in January to
18,000 in August, then dropped sharply to 12,000 in
September before recovering to 15,000 by December.

The alt-text should:
1. Describe the chart type and topic
2. State the key trend or finding
3. Include the most important specific values
4. Be under 200 words

AI generates: “Line chart showing monthly website traffic for 2025. Traffic grew steadily from 10,000 visits in January to a peak of 18,000 in August, an 80% increase. A sharp decline to 12,000 in September (likely seasonal) was followed by partial recovery to 15,000 by December. Overall, traffic increased 50% for the year despite the Q3 dip.”

This alt-text gives a screen reader user the same understanding as a sighted viewer.

Text and Contrast

• Minimum font size: 12px for body text, 14px for labels on charts
• Contrast ratio: 4.5:1 minimum for text against background
• Don’t use color as the only way to convey information: Status indicators should have text labels or icons in addition to color

Quick Check: Accessibility Audit

A chart uses green for “above target” and red for “below target.” No labels indicate which is which—only the colors differentiate them. What needs to change?

Fixes: (1) Add text labels (“Above Target,” “Below Target”) next to or within the colored elements. (2) Change to a colorblind-safe palette (blue for above, orange for below). (3) Consider adding icons (checkmark for above, warning triangle for below). (4) Add patterns in addition to color if the elements are adjacent (hatched vs. solid fill).

Annotation: Adding Context Without Clutter

Annotations are the notes, labels, and callouts that explain what the data can’t explain on its own.

When to Annotate

Annotate when:

• Something unusual happened. “Spike on 3/15: Product Hunt launch”
• Context changes meaning. “COVID lockdowns began here”
• The viewer needs a reference point. A target line labeled “Q4 goal: $500K”
• A data point needs emphasis. “Record month: $358K”

Annotation Types

Direct labels: Numbers placed on or next to data points. Best when precise values matter.

Reference lines: Horizontal or vertical lines marking targets, averages, or important dates. “Target: 95% satisfaction” as a dashed line across a bar chart.

Callout annotations: A line connecting a data point to an explanatory note. “CFO resigned” pointing to a revenue dip.

Shaded regions: Background color indicating periods or ranges. A green band showing “target zone” on a line chart.

Annotation Best Practices

Be selective. Annotate 2-3 things, not everything. If every data point has an annotation, none of them stand out.

Be brief. “Product launch” not “On this date we launched our new product line which included three new SKUs targeting the enterprise segment.”

Be precise. Point directly to the relevant data point. Don’t make the viewer guess which element the annotation refers to.

My line chart shows monthly revenue with these notable events:
- March: Launched new pricing tier (+15% revenue jump)
- June: Major client churned (-8% revenue drop)
- October: Holiday marketing campaign began (gradual increase)

Create annotation text for each event. Keep each under
10 words. Specify placement (above/below the line, which side).

AI produces concise annotations like “New pricing tier launched → +15%” placed above the March data point with an arrow.

Creating Color Specifications with AI

For teams and recurring reports:

Create a complete color specification for our data
visualization style guide.

Context: Business intelligence dashboards for a SaaS company.
Background: White (#FFFFFF) with light gray panels (#F8F9FA).

Define colors for:
1. Primary data series (1 color)
2. Secondary data series (1 color)
3. Positive/good status
4. Negative/bad status
5. Neutral/informational
6. 5-color categorical palette
7. Sequential palette (5 steps)
8. Diverging palette (5 steps)

Requirements:
- WCAG AA contrast ratios against white background
- Colorblind-safe (all types)
- Professional, not garish
- Include hex codes and RGB values

AI generates a complete color specification with tested accessibility.

Practical Exercise

Take a visualization you’ve created recently:

1. Test it for colorblind accessibility (simulate deuteranopia)
2. Check: does color carry information that isn’t conveyed any other way?
3. Write alt-text for the chart
4. Add 1-2 annotations for context
5. Check contrast ratios for all text

If you find accessibility issues—and you likely will—fix them using the principles from this lesson.

Key Takeaways

• Color communicates data—choose palettes based on data type (sequential, diverging, categorical)
• Never rely on color alone: always pair with labels, patterns, or shapes
• 8% of men are red-green colorblind—use blue-orange instead of red-green
• Write alt-text for every chart so screen reader users get the same insights
• Annotate sparingly: explain anomalies, add reference points, emphasize key findings
• Test everything in grayscale—if it still works, your design is accessible

Next up: interactive visualizations and presentations. Learn to build visualizations that your audience can explore, and presentations that keep the room engaged.

Up next: In the next lesson, we’ll dive into Interactive Visualizations and Presentations.