Contrib.social

META: Provide better support for color and contrast media queries

Open on Drupal.org →
Created on 8 January 2024, 6 months ago
Updated 29 March 2024, 3 months ago

Problem/Motivation

There are CSS media queries which can provide better support for people with visual disabilities. We should be making better use of these to ensure that people who have defined preferences can be supported. This goes beyond WCAG compliance, as people with some disabilities will have preferences for low contrast, and others may prefer high contrast. The challenge is to give sites the flexibility that they need to make their sites work for them.

  • The prefers-contrast CSS media feature is used to detect whether the user has requested the web content to be presented with a lower or higher contrast.
  • The forced-colors CSS media feature is used to detect if the user agent has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page. An example of a forced colors mode is Windows High Contrast mode.
  • The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.

Proposed resolution

Let's brainstorm where our default themes could be improved to provide better support for user preferences.

Remaining tasks

  • Create a list of instances in the UI.
  • Create sub-issues to help improve
  • Update testing methodologies to support this

User interface changes

For users without preferences defined there would be none. With users who have defined preferences there would be visible changes.

Release notes snippet

Not sure.

References

📌 Task
Status

Active

Version

11.0 🔥

Component
CSS  →

Last updated 3 days ago

Created by

🇨🇦Canada mgifford Ottawa, Ontario

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

  • Issue created by @mgifford
  • Comment 6 months ago →
    🇨🇦Canada mgifford Ottawa, Ontario
  • Comment 6 months ago →
    🇺🇸United States andy-blum Ohio, USA

    inverted-colors is widely unsupported. I'd suggest removing it from your list.

  • Comment 6 months ago →
    🇨🇦Canada mgifford Ottawa, Ontario

    Crossing out inverted-colors because of lack of support https://caniuse.com/?search=inverted-colors

  • Comment 6 months ago →
    🇨🇦Canada mgifford Ottawa, Ontario

    Good call @andy-blum.

    As far as things we could possibly support.
    - Support for AAA colors
    - Support for a low contrast mode (we really haven't touched on this at all, but could be useful for some users).
    - Dark mode
    - Defined custom colors for: foreground-color, background-color, text-decoration-color, text-emphasis-color, border-color, outline-color, column-rule-color

    I don't have a lot of guidance on how to do this, which is which I've included a bunch of research links as well as opening this as a meta issue.

  • Comment 6 months ago →
    🇺🇸United States cwilcox808

    While it should be a lower priority, I wouldn't dismiss inverted-colors out of hand. All the browsers can detect when forced-colors is active but Apple operating systems don't have a feature equivalent to Windows's contrast themes to activate it but do have an invert colors feature (only Firefox has a user setting to activate forced-colors at the browser level). And Safari is the only browser on iPhones and iPads.

    But may not be a need for an inverted-colors media query, it would likely only be needed in cases where it's important for certain CSS colors to not be inverted.

    You might find you also don't need a forced-colors media query, that defensive CSS techniques can avoid the need for specific rules for when forced-colors is active. The Sarah Higley link above is a good resource.

    To be thorough, there's also prefers-reduced-transparency. "Reduce transparency" has broad support at the OS level but not yet at the browser level (not-Chrome browsers have concerns about fingerprinting). Day 103: the prefers-reduced-transparency media feature. If themes avoid using opacity or alpha channels in their colors, a media query for this is not needed.

  • Comment 6 months ago →
    🇨🇦Canada mgifford Ottawa, Ontario

    Think Windows High Contrast Mode (WHCM) is being used as "high contrast" more consistently.

  • Comment 3 months ago →
    🇺🇸United States ricksta

    "Let's brainstorm where our default themes could be improved..."

    Could we be specific and mention what themes we mean? Olivero, I see is marked obsolete. Back-end, front-end themes? Are any themes a priority to look at first?

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024