Make core themes more robust in Windows High-Contrast mode

Created on 12 July 2017, over 7 years ago
Updated 1 April 2025, 1 day ago

Problem/Motivation

Lots of visual design components in Seven, Bartik, and Umami themes break when Windows High-Contrast mode is used.
Many useful design affordances are lost:

  • Missing borders
  • Missing icons...
  • ... hence some buttons have no visual labels at all. (e.g. Bartik search block button, Toolbar orientation button).
  • ... and some links have no visual labels at all. (e.g. Bartik RSS feed icon, front page of Standard installation profile.
  • Missing primary/secondary emphasis for buttons.

Effects of Windows High Contrast mode

It's a user setting at the platform level - a Windows user chooses a High Contrast theme, and it applies to all desktop applications. Internet Explorer, Edge and Firefox respect this platform setting, and force similar changes upon web browser content. (Conversely, Chrome and Opera browsers do not change web content in response to this platform setting.)

The main effects of Windows High Contrast mode on browser content are as follows:

  • Text colours are overridden. If the user chose the yellow-on-black HC theme, then browser content becomes yellow-on-black.
  • Link text colour is overridden. This is a different colour to the plain text, and differs between IE/Edge and Firefox. E.g. when the user chooses Yellow-on-black HC theme, link colour is magenta.
  • CSS background images are removed. The assumption is that they will interfere with clarity of any text which is on top.
  • Likewise, CSS gradients are removed.
  • CSS border-color is overridden, and matches the plain text or link colour, however:
    • border-width, border-style, and border-radius are unchanged.
    • Note that border-color: transparent; is overridden too. These borders become visible.
  • CSS outline-color is overridden, and matches the plain text or link colour, however:
    • outline-width, and outline-style are unchanged.
    • Note that outline-color: transparent; is overridden too. These outlines become visible.
  • CSS box-shadows are removed.
  • Text-decoration: none; is respected.
  • Most font properties are respected, with the obvious exception of colour.
  • CSS currentColor is changed to match the text colour of the high-contrast Windows theme.
  • A vendor-specific media query is available, which becomes active in Internet Explorer and Edge when a user has selected a Windows High Contrast theme. (Note, Firefox doesn't respond to this media query.) MS High Contrast Media Query Test Page.

Proposed resolution

Use individual issues to fix different components. Some will be easier than others. Commit small improvements one at a time, so Drupal gets gradually better in Windows high-contrast mode over time.
For the most part we expect to achieve this with CSS tweaks, using knowledge of the above HC effects to deliver something which works:

  • Prefer to achieve design affordances which are a close equivalence to the full-colour space.
  • Resort to alternative affordances using the HC media query, if we have to.

Remaining tasks

Screen-shot reconnaissance! Find as many differences as we can between full-colour designs and how they are rendered in windows high contrast mode.

User interface changes

No Changes to current visual designs, in the full-colour space.
This is about the existing designs remaining intact when using MS Windows High-Contrast mode (an assistive tech).

API changes

None.

Data model changes

None.

🌱 Plan
Status

Postponed: needs info

Component

Idea

Created by

🇬🇧United Kingdom andrewmacpherson

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇳🇿New Zealand quietone

    The ideas project is being deprecated.

    The issue summary refers to the problem in Seven, Bartik, and Umami themes. Since 2 of those are no longer in core and there has been several years of work on Umami, is this still relevant? Are there existing issues in core for remaining problems?

Production build 0.71.5 2024