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.