Creating and Annotating a Forced Colors Design System

I presented along with Jesse Hausler at the 2024 CSUN Assistive Technology Conference.

Summary

In 2020 Microsoft partnered with the CSS Working Group and the Chromium project to align on web standards. allowing developers and designers to create better experiences for Windows High Contrast users.

We explored the technical relationship between Windows High Contrast and CSS Forced Colors, and proper techniques for designers to leverage them. Topics included the CSS4 System Colors, their primary uses, the importance of foreground and background pairs, designing for component states, and when to pass through the original colors.

This presentation provided a basis for developing a design system for common controls and components such as buttons, inputs, cards, and dropdowns while giving you the knowledge to create your own approach.

We concluded by sharing approaches for creating annotation templates in tools such as Figma, creating a default color scheme that enables easier design, clean implementation instruction, and higher quality work. Used together, these templates, allow designers, developers, and quality engineers to share a common language and understanding while leading to a consistent user experience.

Presentation