Color and accessibility guidelines in Tableau - Real Business Scenario

Scenario Mode

👤 Your Role: You are a data analyst at a retail company.

📋 Request: Your manager wants you to create a sales dashboard that is easy to understand for everyone, including people with color vision deficiencies.

📊 Data: You have monthly sales data by product category and region for the past year.

🎯 Deliverable: Create a Tableau dashboard that uses color palettes accessible to colorblind users and follows best practices for color use in data visualization.

Sample Data

Month	Region	Product Category	Sales
Jan	North	Electronics	12000
Jan	South	Furniture	8500
Feb	North	Electronics	15000
Feb	South	Furniture	9000
Mar	North	Electronics	13000
Mar	South	Furniture	8700
Apr	North	Electronics	16000
Apr	South	Furniture	9200

1

Step 1: Connect your sales data to Tableau and create a new worksheet.

Load the data source with columns: Month, Region, Product Category, Sales.

Expected Result

Data is loaded and visible in Tableau's data pane.

2

Step 2: Create a bar chart showing total sales by Product Category.

Rows: SUM(Sales), Columns: Product Category.

Expected Result

Bar chart displays total sales for Electronics and Furniture.

3

Step 3: Apply a color palette that is friendly for colorblind users.

In the Marks card, drag Product Category to Color. Then select 'Color' and choose 'Color Blind 10' palette from Tableau's built-in palettes.

Expected Result

Bars are colored with distinct, colorblind-safe colors.

4

Step 4: Add labels to the bars for clarity.

Drag SUM(Sales) to Label on the Marks card.

Expected Result

Each bar shows the sales number on top.

5

Step 5: Create a dashboard and add the bar chart.

New dashboard > drag the worksheet onto the dashboard canvas.

Expected Result

Dashboard shows the bar chart clearly.

6

Step 6: Add a text box with a note about color accessibility.

Use the dashboard text object to add: 'Colors used are accessible for colorblind users.'

Expected Result

Dashboard includes an accessibility note.

7

Step 7: Test the dashboard using Tableau's colorblind simulation feature.

Use 'View' > 'Color Blindness Simulation' and select types like Deuteranopia.

Expected Result

Colors remain distinguishable under colorblind simulations.

Final Result

Dashboard: Sales by Product Category

+-----------------------------+
| Electronics  ██████████ 16000 |
| Furniture    ██████     9200  |
+-----------------------------+

Note: Colors are colorblind accessible.

✓Electronics sales are higher than Furniture sales in the sample months.

✓Using colorblind-safe palettes ensures all users can distinguish categories.

✓Adding labels improves clarity beyond color alone.

Bonus Challenge

Add a filter to the dashboard to select sales by Region and ensure the color accessibility is maintained.

Show Hint

Use a Region filter on the dashboard and verify colors remain distinct for all filtered views.

Practice

1. Why is it important to use colorblind-friendly colors in Tableau visualizations?

easy

A. So everyone, including people with color blindness, can understand the data clearly.

B. Because bright colors look nicer on the screen.

C. To make the dashboard load faster.

D. To reduce the file size of the Tableau workbook.

Solution

1. Step 1: Understand colorblind accessibility

   Colorblind-friendly colors ensure that people with color vision differences can distinguish data elements.

2. Step 2: Recognize the goal of clear communication

   The main goal is to make data understandable to all users, not just to improve aesthetics or performance.

3. Final Answer:

   So everyone, including people with color blindness, can understand the data clearly. -> Option A

4. Quick Check:

   Colorblind-friendly colors = clear understanding for all [OK]

Hint: Think about who might have trouble seeing colors [OK]

Common Mistakes:

• Choosing colors just because they look bright
• Ignoring users with color blindness
• Focusing on file size instead of clarity

2. Which of the following is the correct way to add a color legend with accessible labels in Tableau?

easy

A. Add color legend with clear text labels describing each color's meaning.

B. Hide the color legend to save space.

C. Use only colors without any text labels.

D. Use random colors without explanation.

Solution

1. Step 1: Identify the role of color legends

   Color legends explain what each color represents, helping users understand the visualization.

2. Step 2: Recognize accessibility best practice

   Adding clear text labels ensures that users who cannot distinguish colors can still understand the data.

3. Final Answer:

   Add color legend with clear text labels describing each color's meaning. -> Option A

4. Quick Check:

   Accessible color legend = clear labels [OK]

Hint: Always label colors clearly for all users [OK]

Common Mistakes:

• Using colors without labels
• Hiding legends to save space
• Using unexplained random colors

3. In Tableau, if you use red and green colors to show 'Loss' and 'Profit' but do not add shapes or labels, what problem might users face?

medium

A. Users will see the data more clearly without extra labels.

B. The dashboard will load slower.

C. The colors will automatically adjust for accessibility.

D. Users with color blindness may not distinguish 'Loss' and 'Profit' clearly.

Solution

1. Step 1: Understand colorblindness impact

   Red-green color blindness is common, so users may not tell these colors apart.

2. Step 2: Recognize missing accessibility features

   Without shapes or labels, color alone is not enough for all users to understand the data.

3. Final Answer:

   Users with color blindness may not distinguish 'Loss' and 'Profit' clearly. -> Option D

4. Quick Check:

   Red-green colors without labels = confusion for colorblind users [OK]

Hint: Red-green alone can confuse colorblind users [OK]

Common Mistakes:

• Assuming colors alone are enough
• Thinking Tableau auto-fixes accessibility
• Ignoring the need for shapes or labels

4. You created a Tableau chart with low contrast colors for text and background. What is the best way to fix this accessibility issue?

medium

A. Keep the colors as they are because it looks modern.

B. Increase the contrast by choosing darker text and lighter background colors.

C. Remove all text to reduce clutter.

D. Use more colors to make it colorful.

Solution

1. Step 1: Identify the problem of low contrast

   Low contrast makes text hard to read, especially for users with vision difficulties.

2. Step 2: Apply accessibility guidelines

   Increasing contrast by using darker text on lighter backgrounds improves readability for everyone.

3. Final Answer:

   Increase the contrast by choosing darker text and lighter background colors. -> Option B

4. Quick Check:

   High contrast = better readability [OK]

Hint: Make text stand out from background with contrast [OK]

Common Mistakes:

• Adding more colors instead of fixing contrast
• Removing text which reduces clarity
• Ignoring readability for style

5. You want to create a Tableau dashboard that is accessible to all users. Which combination best follows color and accessibility guidelines?

hard

A. Use many colors without explanation to show variety.

B. Use bright colors only and no labels to keep it simple.

C. Use colorblind-friendly palettes, add text labels, and include shapes to differentiate data points.

D. Use only grayscale colors without any labels or shapes.

Solution

1. Step 1: Combine colorblind-friendly palettes

   Choosing palettes that colorblind users can distinguish ensures inclusivity.

2. Step 2: Add text labels and shapes

   Labels and shapes help users who cannot rely on color alone to understand the data.

3. Step 3: Avoid confusing or incomplete designs

   Using only bright colors or grayscale without labels reduces clarity and accessibility.

4. Final Answer:

   Use colorblind-friendly palettes, add text labels, and include shapes to differentiate data points. -> Option C

5. Quick Check:

   Color + labels + shapes = best accessibility [OK]

Hint: Combine colors with labels and shapes for clarity [OK]

Common Mistakes:

• Using colors without labels or shapes
• Relying on grayscale only
• Ignoring colorblind-friendly palettes