Skip to end of metadata
Go to start of metadata

The extensions we build don't have to by default adhere to the accessibility standards for visual colour contrast as we have offloaded that responsibility to theming support. If users need higher contrast colours, they can simply download additional themes from the Marketplace. Therefore, we should check how do our apps look under High Contrast theme, just to be sure that everything works correctly.

This test is rather subjective, there are no real hard rules. We should check if elements which are logically separate have visually present borders. For example, these steps in Guided Development should have hard borders around them to visually separate them much more.

VS Code offers two additional colour variables: contrastActiveBorder and contrastBorder which are visible only when a high contrast theme is active. When we add these variables to the tiles from the example above, they look as designed on regular themes, but these variables kick in under high contrast themes making them stand out more.

These are the same tiles, only the active one has been given an outline of contrastActiveBorder, and others have contrastBorder. Those are then visible when high contrast theme is loaded.

Three step wizard in Light+ theme:

That same block in High Contrast theme with borders kicking in:

When designing pages we should just be cognisant which elements we need to emphasise either continually as they sit on the page, and/or when they get active.

VS Code variable nameHex colourSample
--vscode-contrastBorder #6fc3df;

--vscode-contrastActiveBorder #f38518;

  • No labels