Chatbot Accessibility Playbook

Recommendation 4.3.6:
Select a color palette that is easily legible and not overstimulating

Benefits Users

Icon for VisualIcon for CognitiveVisual | Cognitive

Icon for StandardRelevant W3C Guidance

Phase 1: Gather & Organize

Icon for Read MoreRead More

Icon for User ResearchUser Research

  • It’s difficult to select one color contrast that works well for all users. Users with low vision may benefit from high contrast, while users with cognitive or attention disabilities may prefer interfaces with less stimulating contrast. Offering multiple color palettes may require additional development. Work with a diverse set of target users to determine an appropriate color palette for your chatbot. Pay close attention to the non-neutral colors in the website’s color palette - black, white, and grey are well-researched, but a specific purple may not be. View the colors on a range of user devices, as colors are rendered differently on different screens.


Phase 2: Design & Implement

Icon for Design QuestionDesign Question

  • How will you let the user change the color palette?

    • Customizable color palettes serve the widest range of users. You could allow users to adjust the colors of various interface elements independently, but a small carefully chosen set of palettes can serve a wide range of users while conforming to your organization’s design standards.

Icon for TipTip

  • The color palette should include sufficient contrast between elements and their borders or the background.

  • Use an automated checker to identify color contrast that does not meet WCAG success criteria

  • Use a palette checker to assess contrast within your chosen color palette.

  • Whether or not the content is relevant to the purpose of the chatbot, the color palette must make the same content visible to all users.

Icon for AntipatternAntipattern

  • Color should not be the only method of differentiating objects on the screen. Use additional methods like position and labels to distinguish objects.


Phase 3: Test & Evaluate

Icon for Self CheckSelf Check

  • The colors of my chatbot interface adhere to WCAG color contrast guidelines.

  • The chatbot color palette is adjustable

Icon for Ask the UserAsk the User

  • Does the color palette offer enough contrast to see the content easily?

    • This question is subjective; use a Likert scale. This question should be asked post-study.

  • Is the color palette jarring or over-stimulating?

    • This question is subjective; use a Likert scale. This question should be asked post-study.


References

9, 13, 23, 28