Do You Know How to Design with Color Contrast? Quiz Yourself to Find Out
Before you start
If you aren’t familiar with color contrast, check out these resources:
- Creating Color Contrast Guidelines to Meet WCAG 2.1 and Beyond which was the result of an accessibility and product partnership to align on WCAG interpretations.
- Creating the Salesforce color system.
Note: This quiz is based on Salesforce UI and point of view. Some practices fulfill minimum requirements; others go beyond WCAG guidance.
Section 1: Get to know a few basics
1. Decorative UI conveys information or function. True or False
Answer: False. Decorative UI, such as an illustration, in most cases, does not convey information or function that would disrupt someone making progress in an experience.
2. If an element is decorative, color contrast rules do not apply. True or False
Answer: True. The example of Astro propped next to a bowl of popcorn is being used for brand expression. It doesn’t include information or functionality that would disrupt a user from making progress. Thus, this decorative image isn’t required to pass color contrast.
3. Functional UI is a visual that’s required for interaction, is informational, or helps prevent errors. True or False
Answer: True.
4. If an element is functional, color contrast rules do apply. True or False
Answer: True. In this button example, the text and background color need to comply with color contrast rules, because it’s something required for interaction.
Section 2: Apply a few basics
5. Is this badge functional?
A. Yes, it provides necessary information for the user to understand in order to make progress within an experience.
B. No, it’s decorative, not functional.
Answer: A.
6. Which UI elements in a badge are functional and which are decorative?
A. The shape is functional. Text and icon are decorative.
B. The text and icon are functional. The shape is decorative.
Answer: B.
7. What makes the UI elements of this badge functional, decorative, or both?
A. Text and icon are functional because they provide necessary information for the user to understand.
B. The shape is decorative because it’s a tertiary UI element.
C. A and B
Answer: C.
8. Is the shape of the badge necessary for understanding what it is?
Answer: No. This doesn’t mean that the shape isn’t important. UI elements can always be more accessible, and a case can be made for the shape being functional to support scanning and distinguishability. Context is key in evaluating pattern scenarios like this.
If the shape, a non-text object, were to be considered functional then the background and or border color would be required to meet a 3:1 contrast ratio or greater. Which the example being shared happens to be.
9. Does the color in the badges solely rely on color to convey meaning? Yes or No
Answer: No. There’s text that informs the user what the status of the badge is. And there is a secondary indicator, an icon, that is used to help inform the user what the status of the badge is too.
10. Does the badge need meaningful color? Yes or No
Answer: Yes, but because we are using text and an icon to indicate the status of the badge, that reduces the need for color to do the heavy lifting to convey meaning. We highly recommend using secondary indicators as much as possible.
Thank you Hsiao-Ching Chou and Alan Weibel for your support!
Salesforce Design is dedicated to elevating design and advocating for its power to create trusted relationships with users, customers, partners, and the community. We share knowledge and best practices that build social and business value. Join our Design Trailblazers community or become a certified UX designer or certified strategy designer.
