Helping Discord become WCAG AA compliant, and establishing guidance on future branding.

We brought together a small and mighty team to help reinterpret the existing visual styles into a modernized, contrast-compliant color system. Getting early buy-in from leadership and a public initiative with the American Council for the Blind helped expedite much of the conversation.

The Challenges.

5. Interpret and, when necessary, reinterpret the Web Content Accessibility Guidelines as best we can.

For example: the message bar in Discord is technically always active (you can press any alphanumeric key and it will type in the input). Is it meant to be in a disabled state or active state? Should the typing indicator be active? Increase the text contrast or increase the background color contrast to a certain ratio?

The final solution was to increase text contrast, and not include a typing indicator (to keep the original intent of the feature).

6. Get buy-in from the product design team.

I gave mini presentations, updates in our chats, and shared context with feedback. Everyone was generally on-board with updating the design system color contrasts, and we had healthy debates on how to redesign certain components in order to fit these colors without diminishing the visual bar.

I shared a Figma file with the before and after component changes which helped visualize the changes. The design team would then leave feedback if something didn’t feel right and I would be able to respond or reassess my decision-making.

I worked with multiple departments, one most notably the Revenue product design and marketing teams. These conversations were accelerated with our collaboration with Discord Art Director Amo Zhou. The changes were minimal but required changes across multiple marketing surfaces in order to accomplish our goals. I helped our graphics teams understand the WCAG requirements and how to measure contrast with gradients, a basis for Discord’s premium branding.

7. Gather feedback directly from accessibility users.

The team had a separate chat where we could speak to users directly and it was extremely helpful. This feedback was leveraged in most of our decision-making when building for these features. The team continued to collaborate with this group for future a11y features.

My only regret is that I didn’t get to save any of the feedback—the group was extremely helpful in guidance and setting a direction.

Other accomplishments.

9. We tried to capture as many rogue components as possible.

Naturally, there was a lot of “legacy” to capture and redesign into a more visually accessible version. Working on this project enabled engineering to update those old components as they burned down the task list.

10. Working on accessibility initiatives lead to creating an Accessibility settings page.

While creating a new settings page is not that remarkable in itself, this addition enabled scalable solutions that could be housed in this page and easier to find.

• I contributed by adding in example UI that would appear at the top. For any visual changes in the accessibility page, the user would be able to see what those changes looked like for common UI elements.
• Color saturation settings were developed by our engineers so that users with high contrast sensitivities could feel more comfortable.
• Role colors are user-generated—I proposed the option to separate the color from the text, which helped maintain legibility of text regardless of which theme was in use.
• Reduced Motion was included, making the app more subtle for users with animation sensitivities. From then on, for every project that had major animations and interactions, Reduced Motion must be considered.

Retrospective