Color and accessibility guidelines in Tableau - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a color palette that is friendly for colorblind users in Tableau.

Tableau

SET COLOR PALETTE TO [1]

Drag options to blanks, or click blank then click option'

APastel

BRainbow

CNeon

DColorblind Safe

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'Rainbow' which is not colorblind friendly.

Using bright neon colors that reduce readability.

The 'Colorblind Safe' palette uses colors that are distinguishable by people with common types of color blindness.

2fill in blank

medium

Complete the code to add alternative text for a Tableau dashboard image for screen readers.

Tableau

ADD ALT TEXT '[1]' TO IMAGE

Drag options to blanks, or click blank then click option'

ADashboard overview

BColor palette

CChart colors

DNo description

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'No description' which leaves screen readers without info.

Describing colors instead of content.

Alternative text should describe the image meaningfully, like 'Dashboard overview'.

3fill in blank

hard

Fix the error in the code to ensure text contrast meets accessibility standards.

Tableau

SET TEXT COLOR TO [1] ON BACKGROUND COLOR #FFFFFF

Drag options to blanks, or click blank then click option'

A#000000

B#CCCCCC

C#FFFFFF

D#FFFF00

Attempts:

3 left

💡 Hint

Common Mistakes

Using white text on white background.

Using light gray text that is hard to read.

Black (#000000) text on white background (#FFFFFF) provides high contrast for readability.

4fill in blank

hard

Fill both blanks to create a color rule that highlights values greater than 100 in red and others in green.

Tableau

IF value [1] 100 THEN COLOR = '[2]' ELSE COLOR = 'green'

Drag options to blanks, or click blank then click option'

A>

Bred

C<

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' instead of '>' causing wrong color assignment.

Using blue instead of red for highlighting.

The rule uses '>' to check if value is greater than 100, then sets color to 'red'.

5fill in blank

hard

Fill both blanks to create a calculated field that returns 'High', 'Medium', or 'Low' based on score thresholds.

Tableau

IF score [1] 80 THEN 'High' ELSEIF score [2] 50 THEN 'Medium' ELSE 'Low'

Drag options to blanks, or click blank then click option'

A>=

B<

C<=

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using '>=' instead of '>' for the first condition.

Using '<' instead of '<=' for the second condition.

The first condition checks if score is greater than 80 for 'High'. The second checks if score is less than or equal to 50 for 'Medium'. Otherwise, it's 'Low'.

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