W3C home > Mailing lists > Public > www-style@w3.org > April 2019

[CSSWG] Minutes San Francisco F2F 2019-02-26 Part III: High Contrast

From: Dael Jackson <daelcss@gmail.com>
Date: Thu, 4 Apr 2019 19:07:37 -0400
Message-ID: <CADhPm3shYSbOdCx0uvv7MRx2ux9aH_3zaiNm+mgnBsitWfN42w@mail.gmail.com>
To: www-style@w3.org
  These are the official CSSWG minutes.
  Unless you're correcting the minutes,
 Please respond by starting a new thread
   with an appropriate subject line.

High Contrast

  - The team from Microsoft presented the work they had done in
      Windows Ease of Access with the goal of standardizing support
      across the web.
      Slides: https://lists.w3.org/Archives/Public/www-archive/2019Feb/att-0000/CSSWG_F2F_High_Contrast.pdf
      - Edge's high contrast mode has a predefined theme of system
          colors which it applies to the shell and any sites that pick
          it up.
      - There is a feature called "backplate" which guarantees that
          behind every piece of text rendered will be the system
          background color which was designed in consultation with a
          research team focused on the cognitive process of reading.
      - The four settings Microsoft supports are prefers-color-scheme,
          prefers-contrast, inverted-colors, high-contrast, with
          high-contrast used by 4% of users. The high-contrast-adjust
          property had high usage, but decreased significantly when
          the "backplate" was introduced
  - There was interest in not only adding this, but using it to solve
      other outstanding use cases. Dark mode in specific will be
      discussed later in the F2F.
  - Some concern over mixing up high contrast and low contrast and
      misleading Web authors, since the Windows feature is used for
      both purposes.
  - RESOLVED: Let’s look into specific contrast support on the Web


Agenda: https://wiki.csswg.org/planning/sf-2019

Scribe: myles

High Contrast

  <Rossen> [high contrast slides link]

  melanierichards: We’ve been talking through OS and browser features
                   and how they relate to user preference media
                   queries in lvl 5 spec. We support high contrast in
                   Windows Ease of Access. How does it fit with
  melanierichards: Let’s go over how it works on Windows!
  melanierichards: Also let’s make a proposal for how it might be

  melanierichards: Dark Mode, or other color schemes that are set on
                   the OS level. The user can select a certain theme.
                   This is mostly art directed on the side of the OS
                   or the app that wants to support it. There’s not
                   granular control from the user over these colors
  melanierichards: We also have inverted colors on various platforms.
                   It’s a heavy-handed filter across the OS. Includes
                   app and web. Some apps may do some smart things.
                   This doesn’t change the contrast story
  melanierichards: We also have high contrast text, which is an
                   experimental feature on android. This sets all text
                   to white or black. This doesn’t change the
  melanierichards: There’s also “increase contrast” on macOS and iOS
                   for UI bits. It’s somewhere in-between medium
                   contrast and high contrast
  melanierichards: There’s a Chrome extension that does high contrast.
                   There are a few strategies. 1. Something similar to
                   Windows high contrast: Yellow on black, 2.
                   Greyscale 3. Something similar to macOS and iOS
  melanierichards: Then there’s Windows High Contrast feature.
  melanierichards: Here, the user can select a preset theme, or create
                   a new theme, and have that part of everything on
                   the OS. Apps support it within app content.
  <xfq> https://www.w3.org/TR/WCAG21/#contrast-minimum

  Rossen: [Demo of high contrast]
  Rossen: I’m just going to minimize this for a second and make sure
          we are connecting and I’m going to let this thing
  Rossen: High contrast on windows is a system-wide accessibility
  Rossen: Doing a live demo is always fun. Let’s keep it positive and
          make sure everything works.
  Rossen: High Contrast is a predefined theme of system colors that
          apply to the entire shell as well as any applications that
          care to implement it. All first-party applications in
          Microsoft implement it both in UI and in the content layer,
          and there’s a large number of 3rd party applications that
          opt in
  Rossen: Win32 apps will be forced into high contrast.
  Rossen: Let’s apply high contrast. Everything needs a refresh. The
          shell needs to repaint all the different applications, and
          the shell itself.
  Rossen: Twitter has no modifications at all, and Edge simply does
          the right thing on Twitter’s website. On the UI, all the
          colors are stripped down to the theme that is defined. All
          the text is white, all the hyperlinks are yellow, selected
          text is black on turquoise, buttons have .... etc. etc.
  Rossen: Limited palette of colors that apply everywhere. The promise
          of accessibility high contrast is that no matter what user
          preferences are set... some people want low contrast ....
          This is all driven on user preference. The default theme is
          black in Windows, but this is not dark mode.
  Rossen: This is not supposed to be dark mode.
  Rossen: Please hold questions to the end.
  Rossen: Links are yellow, text is white, black is reduced down to
  Rossen: YouTube!
  Rossen: The one thing we do in Edge is, besides mapping to all the
          proper system colors for high contrast, we also guarantee
          that behind every piece of text that we render, we have a
          background that uses the system background color. This is a
          feature we call “backplate”
  Rossen: Bing search!
  Rossen: The web authors take advantage of high contrast. Here’s an
          image that’s 2D canvas that renders a map using different
          color schemes using the fact that it’s in high contrast. The
          experience is richer.
  Rossen: Flickr is image rich.
  Rossen: If I mouse-over any images, there’s text that describes the
          image and the author, etc. Behind every piece of text we
          guarantee there is a background against the foreground with
          those same system colors

  Rossen: Switching to my remote machine in Redmond...
  Rossen: Let’s let it connect.
  Rossen: Let’s look at IE while it connects.
  Rossen: Our first implementation: I wasn’t involved. They didn’t
          know how to handle background images, for text on top of
  Rossen: So they just got rid of all background images, that will
          guarantee high contrast. Which was true for text... but as
          sites became more and more dependent on images, made sites
  Rossen: Bing won’t be happy if we do this.
  Rossen: Firefox takes good advantage of high contrast. They have a
          setting that says “in high contrast, use the system colors”
          and they will map everything but the link colors to high
  Rossen: Last but not least, I don’t have the Chrome extension, but I
          have a prototype on my dev box where I implemented the same
          level of support for high contrast as Chromium as a proof of
          concept to see what it would take.
  Rossen: The same thing can be achieved
  Rossen: E.g. for Bing, this site takes advantage of the high
          contrast theme, same thing for Flickr.
  Rossen: The highlights have text that is composed against an opaque
  Rossen: That’s everything I wanted to demo.
  Rossen: Let’s finish the deck before questions and answers.

  Rossen: PowerPoint is in high contrast because my machine is in
          High Contrast.
  Rossen: I just created a theme for fun which has low contrast. And
          here it is! (It’s blue)
  melanierichards: [Shows a table to show a feature comparison]
     p12 in https://lists.w3.org/Archives/Public/www-archive/2019Feb/att-0000/CSSWG_F2F_High_Contrast.pdf
     Table: Related OS/extension feature comparison
     Column headings: Dark Mode, Inverted Coors, Text Contrast, Inreas
         Contrast, High Contrast extension, High Contrast
     Row headings: supported Platform, contrast "promise", Applies to,
         Modifieable by users, Forced to Web content, ....
    Related OS/extension feature comparison (column headings)
        Dark Mode
        Inverted Colors
        Text Contrast
        Increase Contrast
        High Contrast extension
        High Contrast
    Supported Platform
        MacOS, WindowsiOS, Android, Windows
        Android (experimental)
        MacOS, iOS
    Contrast “promise”
        Should meet min WCAG requirements
        No promise
        High for text but dependent on background
        Varies by theme and web content
        Guaranteed based on user choice
    Applies to
        UI, app content
        UI, app content
        UI, app content
        UI, app content
        Web content
        UI, app/web content
    Modifiable by users
        No (legacy modifiable)
        No (outside of theme selection)
        Yes, limited color theme
    Forced to web content
    Modifiable by authors

  melanierichards: Inverted colors and high contrast are forced on user
  melanierichards: Everything else uses a user preference. Not too
                   much modification by users. For other features,
                   like selection of theme, manageability by the user
                   is in Windows High Contrast. We can apply a theme
                   that is along the entire spectrum of contrast
     Table: CSS Features Comparison
     Columns: prefers-color-scheme, prefers-contrast, inverted-colors,
     Rows: Related browser/OS features, granularity of detection in
         Web content, expectations on author, additional info
         available to author, implementations
     p13 in https://lists.w3.org/Archives/Public/www-archive/2019Feb/att-0000/CSSWG_F2F_High_Contrast.pdf
     Related CSS features comparison (column headings)
     Related browser/OS features
         MacOS and Windows light/dark mode
         MacOS/iOS increase contrast; Android text contrast?
         iOS, Android, Windows color inversion
         Windows high contrast
     Granularity of detection in web content
         No preference, light, dark
         No preference, low, high (increased keyword?)
         On/offOn/off; additionally, detection of preset themes
     Expectations on author
         Author styles theme; hints as to supported schemes
         Self-authored styles; authors need guidance on handling ratios
         Honors user preference first; author can adjust
         Honors user preference first; author can adjust
     Additional info available to author
         Abstracted system colors based on user-set preferences
         Webkit; Gecko in progress; Blink i2i
         Trident, EdgeHTML

  melanierichards: prefers-color-scheme: Here’s the color scheme this
                   user prefers, please author make something that
  melanierichards: prefers-contrast: just low and high. There’s an
                   issue from Apple to introduce an “increased”
                   keyword for an intermediary level
  melanierichards: We might want to provide guidance to authors for
                   which ratios to use, if they want to match the user
  melanierichards: inverted-colors is a feature where we’re targeting
                   activation for the feature rather than a couple
                   difference points
  melanierichards: based on the way we're targeting inverted colors
                   and high contrast, high contrast would be a good
                   for the feature itself. A few reasons. The user can
                   do many things with it. It’s not just a color
                   scheme or just high contrast
  melanierichards: It’s like everything together. We expect most of
                   the time it’s just going to work. Authors should
                   just tweak a few simple things. Similar to inverted
                   colors b/c a user preference is the highest
                   directive. It’s forced onto web content.
  melanierichards: High contrast as an Ease of Access feature, it’s on
                   4% of installations. This means it’s the most
                   popular assistive technology, by a large margin

  melanierichards: We want a consistent web dev story. Maintain
                   existing styles for IE, as well as new styles for
                   modern browsers
  melanierichards: Authors are familiar with these. Authors can alias
                   past styles and get the author styles for free
  melanierichards: We created an explainer. MS Edge Explainers Repo.
  <astearns> https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/HighContrast/explainer.md
  [ Archived at
https://lists.w3.org/Archives/Public/www-archive/2019Feb/0001.html ]
  melanierichards: We want to start the conversation about targeting
                   high contrast. It explains how it works in Edge
                   today, and what we can bring forward to allow all
                   users on Windows to get this goodness
  melanierichards: If anyone else wants to implement a similar
                   feature, they can do it as well
  melanierichards: high-contrast:active is a media query.
  melanierichards: You can also detect white on black or black on white
  melanierichards: Authors can also make adjustments on various places
                   by setting high-contrast-adjust:none on certain
                   elements and adding back styles based on system
  melanierichards: This makes it good for tweaking. Authors can
                   maintain this.
  melanierichards: Something we don’t have today is author control
                   over the text backplate that is drawn behind text.
                   We think authors might want to adjust: corner
                   radius, opacity, etc.

  Rossen: Two things that came up based on data from current usage:
          High contrast is by far the most-used ability-improving
          feature on Windows today, compared to any other assistive
  Rossen: We used to have fairly large percent of usage of
          high-contrast-adjust property.
  Rossen: It was for a particular element or selector, I don’t want
          you to adjust the styles of this sub tree, I can handle it
  Rossen: That was a pretty high percentage. But it went almost to 0
          after we added the backplate. Authors said that authors
          didn’t need to deal with getting the system colors, instead
          they just let the browser do it.
  Rossen: Facebook removed their use of it because the backplate was
          sufficient for them.
  Rossen: Twitter was the same
  Rossen: The explainer, as we wrote it, was meant to capture the
          status quo of what we have in Edge. All of our learnings
          and design of how we implemented everything. It goes through
          the way we apply styles in the cascade, how we override
          colors using the system colors, and how we ensure
          readability by calculating the bounds of any flow of text.
  Rossen: For this part I spend time, we have a research team that
          researches the cognitive process of reading, so I spent some
          time with them researching the backplate. How much padding,
          how much opacity, how much space to add between paragraphs,
  Rossen: What I implemented in Edge is what they said was pretty
  Rossen: But, high-contrast backplate as an addressable thing that’s
          stylable with opacity or corner-radius, or padding... the
          padding isn't random, it’s based on fonts... that became an
          interesting feature that we can try to improve upon.
  Rossen: This is the story of high contrast.
  Rossen: I wanted to raise the awareness of what it is in Windows,
          how we implemented it, why it works, what the guarantees
          are, how it works with color schemes, filters, or features
          that targeting contrast, how are they similar and different.
  Rossen: High contrast improves readability. Or guarantee. Also,
          decreasing cognitive overload from all the different
          borders, colors, and everything you can have. Strips the
          colors, provides increased readability overall.
  Rossen: Questions?

  Florian: I was worried about taking the problems one by one, and
           resulting in 5 different things. Thanks for looking at it
           from that angle.
  florian: For high contrast specifically, I understand how it works
           and why it’s useful, I’m more concerned about the media
           query itself because this feature can do anything and
  florian: Does it expose all of that?
  florian: I don’t know how we would expose more information... how
           that you said you’re doing it well enough, maybe we don’t
           need a media query at all.
  <tantek> As in, what's the summary of webdev use-cases?
  florian: How do we make sure we don’t increase the contrast when the
           user wanted the opposite?
  <xfq> Related CSSWG issue: https://github.com/w3c/csswg-drafts/issues/1286
  Rossen: I won’t defend the name. The original author thought it was
          for high contrast. If I wanted to rename it today, I would
          have picked something else... maybe not enforced-colors ....
          biggest benefit is about readability everywhere. Reducing
          cognitive load. I don’t know a good name.
  Rossen: The additional part where people can take advantage of it is
          with canvas example. People can query for high contrast and
          take completely different experiences with it. In this case
          it’s canvas.
  Rossen: We need to be able to give the signal and say “the user has
          chosen high contrast (or whatever we call it) and this is
          their preference and we’re going to honor it, because the
          user has the highest rank in the order of preferences)
  florian: Some users use this for dyslexia. Some users use it for
           other purposes. How do we make sure it turns out correctly?
  Rossen: Sites that use high-contrast should use system colors
  fremy: yes
  florian: We need 2 things: 1) The author has all the information
           they need to do the right thing, rather than just doing
           something which might not match what what the user wanted,
           and 2) we need to not trick users into thinking this is
           just for high contrast
  <fantasai> +1 to florian
  <dbaron> Should we make the system colors work for platforms other
           than Windows...?

  emilio: This is great.
  emilio: How does the adjust property work in Edge? Before applying
          any property, you need to know the adjust value, so you need
          to do a pre-pass to figure out what the adjust value is?
  Rossen: Yes. We have env() already, maybe we can use that
  Rossen: It should be as simple as: If I want to adjust, I will use
          system values, you give me the values, if they change, you
          go and re-apply them for me.
  Rossen: Currently, people fetch system colors and they ...
  emilio: When you’re doing the cascade, if you need to know the value
          of the adjust property in order to determine the value of
          all the other properties. This requires a 2-pass style
  Rossen: You need the computed value of adjust before you get the
          rest of the style.
  Rossen: Let’s take this offline.
  emilio: ok
  emilio: 👍

  AmeliaBR: System colors are deprecated. There’s also one missing. I
            like the idea of doing it with environment variables, and
            I assume there’s some way to listen for when environment
            variables change, which can then help you with canvas
            drawing with system colors
  Rossen: That is all true. In fact, in Chromium on Mac, I immediately
          ran into an issue that I couldn’t compile because I couldn’t
          find an API to get the highlight link color, I found one
          option but it turned out to be wrong
  Rossen: On Windows, we have “top light” which is the highlight color
          for links
  Rossen: In Edge, we support -ms-edge-top-light
  <heycam> In Gecko internally we have a keyword for default hyperlink
           colors, but maybe we need to add a new system color for
  Rossen: On Windows, this is available
  Rossen: We didn’t not investigate Linux. I would love for someone to
          expand our knowledge on Linux
  AmeliaBR: The other part of what Edge does that isn’t represented i
            standard CSS: The cascade order bit. I don’t know how they
            implementation works, but high-contrast can be implemented
            as user styles that override author styles, except when
            it’s in the @media rule. We don’t have any existing
            example of those. We’d need to specify how it works
  AmeliaBR: ... without using !important
  <Rossen> https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/HighContrast/explainer.md
  Rossen: I discuss this in the explainer.
  Rossen: It is currently not well-defined by the cascade. If there
          are bits that need to be implemented, we’ll have to look
          through those.
  AmeliaBR: This is something you want not just for high-contrast
            mode, but for many of the media rules that are testing ...
            well it depends because some of the accessibility features
            operate at a CSS cascade level and some operate at a
            filter level. But at a CSS cascade level, we’re going to
            want the same cascade order, but if you detect the feature
            and tweaking it, that needs to override the browser
  Rossen: I agree.
  AmeliaBR: css-cascade and css-media-queries are involved.
  <dbaron> This cascading thing sounds scary...
  <astearns> +1 to that

  smfr: When you start messing with page colors, one thing you often
        see is authors have baked colors into their images that are
        similar colors. Instead of alpha .pngs, images have white
        backgrounds. Have you thought about this problem?
  gregwhitworth: I wrote a blog post about this. Those 4% of users,
                 Google is a big site that added it. Fundamentally,
                 this allows people to use the content. If authors go
                 back and want to use SVG, that’s okay, but this is
                 about UX, not design. It’s a solution that can be
  melanierichards: One of the authoring practices that we see..
                   YouTube uses it for ..... There are other instances
                   where you might target the high contrast feature...
  melanierichards: One authoring practice that is great in YouTube in
                   icons is using currentColor in fills in SVG.
                   Doesn’t require anything to opt-into high contrast.
  fremy: There are a couple of ideas. If we use black on white, we can
         special case, but it’s a lot of special cases. We don’t
         bother. If you really care as an author, you can fix it.
         Impossible to get it right 100% of the time.

  Rossen: This is the first time we have officially introduced Windows
          High Contrast feature (even though it was mentioned in a
          bunch of places in media queries spec)
  Rossen: Do we need a resolution to add this to the CSSWG charter as
          something we want to work on?
  Rossen: We’ve already touched on a number of points where this isn’t
          just relevant to media queries, it’s also cascade and
          environment variables.
  Rossen: Perhaps the backplate is something else, too.
  Rossen: As we work on this, we’ll find the right spots and the right
  fantasai: I’m one of the editors...
  Rossen: Yes.

  <fantasai> Maybe s/high contrast/specific contrast/ since sometimes
             it's low contrast?

  RESOLVED: Let’s look into specific contrast support on the Web

  florian: There are some related topics that weren’t included. Night
           mode, and boosting contrast when you go outdoors. We have
           some things to address that, but it overlaps with some of
  florian: The UA can automatically opt-in in these situations
  Rossen: Sounds reasonable
  fremy: Are you willing to simplify cascade changes to ease
         implementation burden?
  Rossen: Yes. I tried to in Chromium and it worked great
  TabAtkins: The backplate looks just like captions. We can kill 2
             birds with 1 stone
  Rossen: Yes
  Rossen: The reason I used this example is .... this is unreadable
          (points at unreadable text on the screen)
  Rossen: but if you enable high contrast, now you know that it’s
          Snowy Eagles
  Rossen: I’m going to stop while I’m ahead.

  <bkardell> are we back after a breakout?
  <fantasai> We're continuing on UI topics here, on breakout topic in
             breakout, and then coming back to dark mode later.

  <fantasai> slides from the earlier high-contrast discussion:
  <fantasai> high contrast explainer
  <fantasai> high contrast explainer archived:
Received on Thursday, 4 April 2019 23:08:33 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:13 UTC