Forced Colours

Many Design Systems have a 'High Contrast' mode, with a more limited set of colours in a significantly higher contrast ratio, often implemented as a simple theme that can be swapped in to replace the standard theme.

Whilst a laudable effort, this cannot be guaranteed to satisfy all users. There are many reasons that end users will require a different set of colours for your UI, and the one you provide will not be able to handle all of those cases.

Happily, all operating systems come with a custom 'high contrast' mode, where users can specify a limited set of colours they wish to see across applications. This is communicated to the browser through the forced-colors media feature, with values provided through the <system-color> data type.

Respecting the users forced colour preferences greatly increases the chances of serving a usable UI.

Container Tokens

Name

Card

PrimaryControl

SentimentControl

Container

Standard

Active

Background

Layer/Background/Panel

Layer/Background/Primary

Layer/Background/Sentiment

Foreground

Layer/Foreground/Panel

Layer/Foreground/Primary

Layer/Foreground/Sentiment

Border

Layer/Border/Panel

Layer/Border/Primary

Layer/Border/Sentiment

Container

Standard

Disabled

Background

Transparent

Semantics/Disabled/Background

Semantics/Disabled/Background

Foreground

Semantics/Disabled/Foreground

Semantics/Disabled/Foreground

Semantics/Disabled/Foreground

Border

Semantics/Disabled/Border

Semantics/Disabled/Border

Semantics/Disabled/Border

Container

Forced Colours

Active

Background

System/Canvas

System/ButtonFace

System/ButtonFace

Foreground

System/CanvasText

System/ButtonText

System/ButtonText

Border

System/CanvasText

System/ButtonBorder

System/ButtonBorder

Container

Forced Colours

Disabled

Background

Transparent

Transparent

Transparent

Foreground

System/GrayText

System/GrayText

System/GrayText

Border

System/GrayText

System/GrayText

System/GrayText

We then have a set of variables to switch between standard and forced colours mode:

Forced Colours

Name

Standard

Forced Colours

Container

Active

Background

Container/Standard/Active/Background

Container/Forced Colours/Active/Background

Foreground

Container/Standard/Active/Foreground

Container/Forced Colours/Active/Foreground

Border

Container/Standard/Active/Border

Container/Forced Colours/Active/Border

Container

Disabled

Background

Container/Standard/Disabled/Background

Container/Forced Colours/Disabled/Background

Foreground

Container/Standard/Disabled/Foreground

Container/Forced Colours/Disabled/Foreground

Border

Container/Standard/Disabled/Border

Container/Forced Colours/Disabled/Border

Before our final layer that selects between Active/Disabled states:

Container State

Name

Active

Disabled

Container

Background

Container/Active/Background

Container/Disabled/Background

Foreground

Container/Active/Foreground

Container/Disabled/Foreground

Border

Container/Active/Border

Container/Disabled/Border