Color and accessibility guidelines in Tableau - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why is color contrast important for accessibility?

Which of the following best explains why maintaining good color contrast is essential in web design for accessibility?

A It helps users with color blindness or low vision distinguish text and important elements easily.

B It makes the website load faster by reducing image sizes.

C It allows designers to use more colors without restrictions.

D It ensures the website looks the same on all browsers.

💡 Hint

Think about users who have difficulty seeing colors clearly.

Good color contrast ensures that text and important elements stand out clearly for users with visual impairments, including color blindness and low vision.

🔧 Formula Fix

intermediate

Which CSS snippet correctly sets accessible color contrast?

Given the following CSS options, which one sets text color and background color with sufficient contrast for accessibility?

A color: #999999; background-color: #aaaaaa;

B color: #000000; background-color: #ffffff;

C color: #cccccc; background-color: #dddddd;

D color: #777777; background-color: #eeeeee;

💡 Hint

Look for the highest difference between text and background colors.

Black text (#000000) on white background (#ffffff) provides the highest contrast, making it easiest to read for all users.

❓ rendering

advanced

What will users with red-green color blindness see?

If a chart uses red and green colors to show two categories, what issue might users with red-green color blindness face?

A They will see the chart in grayscale automatically.

B They will see both colors clearly without any problem.

C They will see the colors as blue and yellow instead.

D They might not distinguish between the red and green colors, causing confusion.

💡 Hint

Consider how red-green color blindness affects color perception.

Red-green color blindness makes it hard to tell red and green apart, so charts using these colors alone can confuse users.

❓ selector

advanced

Which CSS selector targets elements with poor color contrast?

Which CSS selector can be used to style elements that have low contrast colors for better accessibility?

A :is(.low-contrast, .poor-contrast) { outline: 2px solid red; }

B .container .text { background-color: #fff; }

C div > p { color: #000; }

D a:hover { text-decoration: underline; }

💡 Hint

Look for a selector that groups classes related to contrast issues.

The :is() selector groups multiple classes, allowing styling of elements marked as low or poor contrast for accessibility fixes.

❓ layout

expert

How to design a color-blind friendly dashboard layout?

You are designing a dashboard with multiple charts. Which approach best ensures color accessibility for users with color blindness?

A Use only red and green colors for all charts to keep it simple.

B Use very light pastel colors for all charts to reduce eye strain.

C Use patterns or textures along with colors to differentiate data.

D Use flashing colors to attract attention to important data.

💡 Hint

Think about how to help users who cannot rely on color alone.

Using patterns or textures along with colors helps users with color blindness distinguish data without relying solely on color differences.