Project Name
Product Visual Design Standards
Date
December 2018–Present
Roles
Research
Strategy
Visual Design
Project Context
At the start of this project, there weren’t any existing visual design standards for designers and developers to refer to when creating mocks or making in-product design decisions. Due to the lack of standards, teams were making their own choices or using framework defaults, resulting in inconsistent design for cross-product workflows and time being spent inefficiently.
Project Goal
The goal of this project was to create product visual design standards that would serve as a single-source of truth and meet accessibility requirements according to WCAG (Web Content Accessibility Guidelines) at Level AA. The first phase of the standards only included colors and considered components out-of-scope.
| Challenges | Opportunities |
| Many products that are managed by numerous different teams | All products will look more consistent and comply with WCAG accessibility guidelines |
| Finding ways to enforce and communicate standards | Centralized place for color standards |
| Organizing a team of people to continuously update the document | Easier to onboard new visual designers and work more efficiently |
| Creating a backlog and assigning prioritization for items | Faster implementation when there is only one color to choose from |
| Less time spent for visual design consultations and small requests |
Design Process
Audit
After defining the problem and considering the goals for creating the visual design standards, our team began auditing MathWorks major products. During our audit process, the team documented color values for text, selection, highlight, backgrounds, alerts, and data. The extracted values were organized in an excel spreadsheet and reviewed for accessibility compliance. For this case study, I’ll focus on how we created standard colors for text.
Audit of Simulink model
Audit of MATLAB Signal Analyzer app
After the audit, we had gathered 40+ text colors from a selection of products and applications. Our challenge now was to decide on one color for body text and one color for hyperlinks, making sure that each passed accessibility requirements. We narrowed down our findings and moved forward with the most used text and hyperlink colors found in product and used by visual designers.
Text color hex codes that were gathered during the audit
Analyze
Accessibility Requirements
The first of two WCAG requirements that our team was striving to meet was Success Criterion 1.4.3 Contrast (Minimum) Level AA for minimum text contrast ratios. As a company, our goal is to meet Level AA conformance. To meet minimum contrast for text color, the standard text color must have a ratio of at least 4.5:1 with the background color, and large text, at 18pt or 14pt bold, must have a ratio of at least 3:1.
The second WCAG requirement that we were striving to meet was Success Criterion 1.4.1 (Use of Color) G183 stating there must be a contrast ratio of 3:1 for the body text against the hyperlink text, when only color is being used to differentiate the two. So in addition to each text color needing to have the proper amount of contrast with the background, the colors also need to have enough contrast between each other.
Original Text, Link, + Main Background Colors Contrast Ratios
We reviewed the contrast ratio for the original product colors using WebAIM Contrast Checker. The contrast ratio was tested for the body text color and hyperlink color against the two background colors used in product, as well as contrast ratio for the body text and hyperlink text colors against each other.
Originally our body text color passed against each background color, while our hyperlink text only passed against the white background. There was also not enough contrast between the body text and link text colors, seen below:
Updated Hyperlink Color to Have Enough Contrast Against both Background Colors
As a first step, we updated our hyperlink color to be a different shade of blue. After the update, the hyperlink text now passed with enough contrast against both the white and light gray backgrounds. Although the change is subtle, this change allowed us to make minor changes to our products, while still making sure that we passed accessibility. Next, we needed to provide enough contrast between the body and link text color.
Updated Body Text Color to Meet Contrast Ratio with Link Color
We then updated our body text color to be slightly darker than the original color that we started with. The purpose of this is so the user can tell what is a hyperlink vs. what is body text content without using an underlining affordance. This change improved our contrast ratio with the link text and passed the requirement specification.
Analysis Results
Ultimately, we were able to take our 40+ text colors and narrow them down to one body text and one hyperlink text color. There is more work to be done in the future concerning text colors that have acquired other meanings, in code for example. Although the changes that we made are small, they can make a large difference to users. Below are the difficulties that we faced and thought through during the process, as well as the benefits that outweighed them.
| Difficulties | Benefits |
| Have all colors meet different minimum contrast ratios at the same time | Reduce amount of colors for text and ensure designers/developers only need to make one choice when designing |
| Maintain consistency with how the current product looks | Provide users with accessible colors and affordances to improve their product experience |
Define Standard, Document, + Publish
After choosing the body text and hyperlink text colors, we documented the colors and provided use cases along with specific examples of when the colors should be used. These were published on an internal site. We also documented a secondary text color to fit an unmet use case for showing text that is not as high in priority, but also should not be disabled, as we still intend for our users to see the content.
Maintaining Standards + Meeting New Requirements
During our work, a new requirement was introduced by WCAG 2.1, Success Criterion 1.4.11 Non-text Contrast Level AA. Our team will now have to focus on making sure that colors for user interface components, such as checkboxes and text input fields, and graphical objects, such as icons and charts/graphs, meet a minimum contrast ratio of at least 3:1. The product visual design standards are a living document that will always need to be assessed for accessibility, especially as new requirements are published. Meeting accessibility is a consistent process for our team, not just a one-time occurrence.
Prospective Standard Development
Icon Repository
Typography Standards
Spacing Standards
Environment Standards
Design System
Insights + Reflection
Accessibility
Working on this standards project helped me see how accessibility contributes to making design cleaner and simpler. Rather than fearing accessibility or viewing it as a an edge case, I’ve recognized how important making accessible products is for our users and that it should not be seen as an afterthought.
Benefits of Standards
The creation of the product visual design standards has allowed our team to reduce the amount of variation of color throughout our products, as well as now have one easy choice to make that is documented.