Creating and Annotating a Forced Colors Design System

Date & Time

Thursday, March 21, 2024 - 4:20 PM PDT  

Location

Platinum 8  

Description

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 will explore the technical relationship between Windows High Contrast and CSS Forced Colors, and proper techniques for designers to leverage them. Topics include 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 provides 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 conclude 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, will allow designers, developers, and quality engineers to share a common language and understanding while leading to a consistent user experience.

This Presentation Link is provided by the Presenter(s) and not hosted by the Center on Disabilities at CSUN. The Center on Disabilities has confirmed, as of April 18, 2024, content linked is relevant to the presentation, but has not been reviewed for accessibility nor will the Center on Disabilities attempt to remediate any accessibility issues in the linked content. Please contact the Presenter(s) with any accessibility concerns.

 

Audience

• Information & Communications Technology
• Government
• Healthcare & Rehabilitation
• Finance & Banking
• Research & Development

Audience Level

Intermediate  

Session Summary (Abstract)

Does your design system include guidelines for Forced Colors? It should! Learn the basics of Forced Colors, how to design great experiences for AT like Windows High Contrast, and how to create templates in Figma to properly annotate Forced Colors.  

Primary Topic

Design  

Secondary Topics

• Blind/Low Vision
• Captions & Transcription
• Digital Accessibility
• Web

 

Session Type

General Track  

Presenters

• Jesse Hausler
  ServiceNow
• Omar Bonilla
  ServiceNow

Add to Outlook/iCal (How it works)

Back to Session List