- From: Dael Jackson <daelcss@gmail.com>
- Date: Thu, 4 Apr 2019 19:07:37 -0400
- 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.
Explainer:
https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/HighContrast/explainer.md
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
===== FULL MINUTES BELOW ======
Agenda: https://wiki.csswg.org/planning/sf-2019
Scribe: myles
High Contrast
=============
<Rossen> [high contrast slides link]
https://lists.w3.org/Archives/Public/www-archive/2019Feb/0000.html
https://lists.w3.org/Archives/Public/www-archive/2019Feb/att-0000/CSSWG_F2F_High_Contrast.pdf
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
standards?
melanierichards: Let’s go over how it works on Windows!
melanierichards: Also let’s make a proposal for how it might be
standardized
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
background.
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
setting
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
black.
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
images.
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
unrecognizable.
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
contrast.
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
background.
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
Chrome
Windows
Contrast “promise”
Should meet min WCAG requirements
No promise
High for text but dependent on background
Intermediate
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
No
No
No (legacy modifiable)
No (outside of theme selection)
Yes, limited color theme
Forced to web content
No
Yes
No
No
Yes
Yes
Modifiable by authors
Yes*
No
No
Yes*
No
Yes
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,
high-contrast
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)
prefers-color-scheme
prefers-contrast
inverted-colors
high-contrast
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
None
None
None
Abstracted system colors based on user-set preferences
Implementations
Webkit; Gecko in progress; Blink i2i
None
Webkit
Trident, EdgeHTML
melanierichards: prefers-color-scheme: Here’s the color scheme this
user prefers, please author make something that
matches
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
preferences
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
colors
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
technology
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,
etc.
Rossen: What I implemented in Edge is what they said was pretty
optimal
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
everything
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
resolve.
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
this?
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
n
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
overrides.
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
solved.
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
editors.
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
this.
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:
https://lists.w3.org/Archives/Public/www-archive/2019Feb/att-0000/CSSWG_F2F_High_Contrast.pdf
<fantasai> high contrast explainer
https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/HighContrast/explainer.md
<fantasai> high contrast explainer archived:
https://lists.w3.org/Archives/Public/www-archive/2019Feb/0001.html
Received on Thursday, 4 April 2019 23:08:33 UTC