>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #2894237. --> Reported by: [andrewmacpherson](https://www.drupal.org/user/265648) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>Lots of visual design components in Seven, Bartik, and Umami themes break when Windows High-Contrast mode is used.<br> Many useful design affordances are lost:</p> <ul> <li>Missing borders</li> <li>Missing icons...</li> <li> ... hence some buttons have no visual labels at all. (e.g. Bartik search block button, Toolbar orientation button).</li> <li>... and some links have no visual labels at all. (e.g. Bartik RSS feed icon, front page of Standard installation profile.</li> <li>Missing primary/secondary emphasis for buttons.</li> </ul> <h4>Effects of Windows High Contrast mode</h4> <p>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 <strong>and Firefox</strong> 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.)</p> <p>The main effects of Windows High Contrast mode on browser content are as follows:</p> <ul> <li>Text colours are overridden. If the user chose the yellow-on-black HC theme, then browser content becomes yellow-on-black.</li> <li>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.</li> <li>CSS background images are removed. The assumption is that they will interfere with clarity of any text which is on top.</li> <li>Likewise, CSS gradients are removed.</li> <li>CSS <code>border-color</code> is overridden, and matches the plain text or link colour, however: <ul> <li><code>border-width</code>, <code>border-style</code>, and <code>border-radius</code> are unchanged.</li> <li>Note that<code> border-color: transparent;</code> is overridden too. These borders become visible.</li> </ul> </li> <li>CSS <code>outline-color</code> is overridden, and matches the plain text or link colour, however: <ul> <li><code>outline-width</code>, and <code>outline-style</code> are unchanged.</li> <li>Note that<code> outline-color: transparent;</code> is overridden too. These outlines become visible.</li> </ul> </li> <li>CSS box-shadows are removed.</li> <li><code>Text-decoration: none;</code> is respected. </li> <li>Most font properties are respected, with the obvious exception of colour.</li> <li>CSS <code>currentColor</code> is changed to match the text colour of the high-contrast Windows theme.</li> <li>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.) <a href="https://fuzzbomb.github.io/accessibility-demos/ms-high-contrast-media-query.html">MS High Contrast Media Query Test Page</a>.</li> </ul> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>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.<br> For the most part we expect to achieve this with CSS tweaks, using knowledge of the above HC effects to deliver something which works:</p> <ul> <li>Prefer to achieve design affordances which are a close equivalence to the full-colour space.</li> <li>Resort to alternative affordances using the HC media query, if we have to.</li> </ul> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <p>Screen-shot reconnaissance! Find as many differences as we can between full-colour designs and how they are rendered in windows high contrast mode.</p> <h3 id="summary-ui-changes">User interface changes</h3> <p>No Changes to current visual designs, in the full-colour space.<br> This is about the existing designs remaining intact when using MS Windows High-Contrast mode (an assistive tech).</p> <h3 id="summary-api-changes">API changes</h3> <p>None.</p> <h3 id="summary-data-model-changes">Data model changes</h3> <p>None.</p> > Related issue: [Issue #3080100](https://www.drupal.org/node/3080100)