Introduction⌗

When designing applications for different modes in an operating system, it is important to ensure consistency and accessibility for all users. People with Disabilities (PWDs) often face challenges when using applications that don’t cater to their needs. For example, those with visual impairments require assistance when using computers. Operating systems are set up to work in various modes like High Contrast Mode for low vision users. In this article, I will explore System Colors in the web and how you can leverage them to make your web application more accessible.

What are System Colors⌗

System colors are a set of predefined colors that are used in the user interface of an operating system.

They are used to provide a consistent look and feel across different applications and components. When designing applications for different modes in an operating system, it is important to ensure consistency and accessibility for all users. People with Disabilities (PWDs) often face challenges when using applications that don’t cater to their needs. For example, those with visual impairments require assistance when using computers. Operating systems are set up to work in various modes like High Contrast Mode for low vision users.

In Microsoft Graph Toolkit I was assigned an issue that was affectiong low vision application users. The issue had the user experirence that:

Low vision application users who use High contrast themes are not be able to distinguish between the selected or not selected controls because both are looking similar which is an ‘UNCOMPREHENDED ELEMENT’ for the user.

In Windows, you can set various contrast modes: Aquatic, Desert, Dusk, Night Sky and None, to suit your visual needs. When you switch to these modes, the application is forced into default system colors that the modes support.

Using system colors⌗

For web applications, CSS is used to set colors and the CSS specification covers system colors. The spec defines a number of keywords that you can use to specify colors in forced color modes.

You can learn more about system colors in CSS from the CSS Color Module Level 4 specification. The specification defines a number of keywords that you can use to specify system colors in your web application. These keywords include ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption, InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, ThreeDLightShadow, and many more.

Using system colors in your web application can help improve accessibility for users with visual impairments. By using these predefined colors, you can ensure that your application provides a consistent look and feel across different platforms and devices.

My solution looked like this:

@media (forced-colors: active) {
  a[class*="sto-"][data-selected="true"] {
    background: SelectedItem;
    color: SelectedItemText;
  }
  a[class*="sto-"][data-selected="false"]:focus,
  a[class*="sto-"][data-selected="false"]:hover {
    background: Highlight;
  }
}

This will only trigger in high contrast modes. The SelectedItem, Highlight and theSelectedItemText keywords were used to set the background and text color when in high contrast mode.

Conclusion⌗

Accessibility is an essential element when developing for the web. People with Disabilities (PWDs) often face challenges when using applications that don’t cater to their needs. Accessibility is often overlooked when developing for the web, but with modern tooling and standards being improved, it can be added to your workflow so that you build inclusive web experiences. By designing applications for different modes in an operating system, it is important to ensure consistency and accessibility for all users.