Assess accessibility of Claro in High Contrast AKA forced colors mode

Created on 9 September 2019, over 5 years ago
Updated 30 March 2025, 4 days ago

Starting this issue, as a placeholder for accessibility review. Leave this open until Claro is marked as stable in Drupal core.

Scope

Assess how well Claro performs when a Windows High Contrast theme is in place.

This is not intended as an implementation issue. Create child issues to fix any problems that are discovered.

Issues found

Must haves

Uncategorized

Should haves

Should haves that need to be fixed outside of Claro

These issues also occur in other themes (including Seven) and need to be fixed within their core components.

Testing approach, and useful implementation tips

  • Test with more than one high-contrast theme. Windows has 4 preset high-contrast colour schemes.
  • Be aware that users can specify their own high-contrast theme colours. Don't assume that are using one of the 4 preset high contrast themes. They might want deep purple on pale orange, say.
  • The -ms-high-contrast media query does not work in Firefox, even though the browser has some reasonable support for Windows High Contrast mode. Don't rely on this media query to convey any essential information.
  • Avoid using the black-on-white or white-on-black values for the -ms-high-contrast media query. These aren't matched by user-specified high-contrast colour schemes.
  • Avoid using the -ms-high-contrast-adjust property.
  • Avoid using CSS background image to convey essential information. These are stripped out in Internet Explorer and Firefox.

Background reading

Triage plan for high-contrast support

For Claro as an experimental theme in Drupal core:

  1. Alpha: Windows high contrast support is NOT a blocker to adding Claro to Drupal core as an experimental theme. Aim for a first-pass assessment, to get an idea of how well it performs, and a rough plan of what needs to be addressed.
  2. Beta: Complete a detailed assessment of Claro with Windows High Contrast. We don't have to fix all of the issues for beta. At this stage we aim to identify the issues in detail, along with an idea of how they will be addressed.
  3. Stable: Fix issues found here. The exact must/should/could triage will be decided for each child issue individually, as different theme components can fall under different WCAG success criteria. Aim to maximize support for Windows high contrast, across Edge, Internet Explorer, and Firefox.
  4. Enabled in Standard profile as the default admin theme: Aim to fix all of the outstanding should-haves discovered here.

Browser support

3 browsers currently respond to Windows High Contrast mode.

  • Edge - displays CSS background images.
  • Internet Explorer - strips out CSS background images.
  • Firefox - doesn't respond to the -ms-high-contrast media query. Strips out CSS background images.

We don't have to achieve exactly the same appearance in all of these, and aesthetics is low priority. Rather, we should make sure there isn't any functionality/information which which works in one browser, but not another. For example:

  • Edge shows CSS background images, but Internet Explorer and Firefox strip them out. So if any icon conveys important information, this would be a problem.
  • Firefox doesn't respond to the -ms-high-contrast media query. Relying on this to fix issues may result in a WCAG failure in Firefox.
📌 Task
Status

Needs work

Version

11.0 🔥

Component

Claro theme

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.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

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.

Production build 0.71.5 2024