Skip to content

Commit

Permalink
Refactoring of the forced-colors and prefers-contrast media feature
Browse files Browse the repository at this point in the history 
This editorial reorganization of the text is intended to make the
overlap between forced-colors:active and prefers-contrast:forced
more readily understandable: one being the syntax that the CSS Working
Group finds more desirable, the other being retained for compatibility
with content issued against an earlier draft.

Prior to this refactoring, the definition of this mode was also spread
between the two media features, causing confusion. This commits
consolidates the whole thing in one place.

Related to w3c#5433
  • Loading branch information
@frivoal
frivoal committed Aug 16, 2020
1 parent 2cad12a commit d519cac
Showing 1 changed file with 61 additions and 43 deletions.
104 changes: 61 additions & 43 deletions mediaqueries-5/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2624,7 +2624,7 @@ Detecting the desire for reduced transparency on the page: the 'prefers-reduced-
ISSUE: How does this interact with preferences around e.g. pattern fills and backgrounds?
They're not about transparency, but they also interfere with shape recognition.

<h3 id="prefers-contrast">
<h3 id="prefers-contrast" oldids="forced-colors">
Detecting the desire for increased or decreased color contrast from elements on the page: the 'prefers-contrast' feature</h3>

<pre class='descdef mq'>
Expand All @@ -2634,11 +2634,11 @@ Detecting the desire for increased or decreased color contrast from elements on
Type: discrete
</pre>

The 'prefers-contrast' media feature is used to detect if the user
has requested the system increase or decrease the amount of contrast
between adjacent colors. For example, many users have difficulty
reading text that has a small difference in contrast to the text
background and would prefer a larger contrast.
The 'prefers-contrast' media feature is used to detect
if the user has requested an increase or decrease the amount of contrast used in the page,
expecting an adjustment to the contrast ratio between adjacent colors,
and to how much elements stand out visually,
for example by adjusting their borders.

<dl dfn-type=value dfn-for="@media/prefers-contrast">
<dt><dfn>no-preference</dfn>
Expand All @@ -2659,10 +2659,12 @@ Detecting the desire for increased or decreased color contrast from elements on

<dt><dfn>forced</dfn>
<dd>
Indicates that <a>forced colors mode</a> is active,
identically to ''forced-colors: active''.
See [[#forced-colors]] and
[[css-color-adjust-1#forced]].
Indicates that <a>forced colors mode</a> is active:
the user agent enforces a user-chosen limited color palette on the page,
in effect also implying a strong preference for the associated contrast.
The UA will provide the color palette to authors
through the CSS system color keywords.
See [[css-color-adjust-1#forced]] for details.

<div class=advisement>
This does <em>not</em> necessarily indicates
Expand All @@ -2673,10 +2675,15 @@ Detecting the desire for increased or decreased color contrast from elements on
or some other arrangement that is neither particularly low or high contrast.
</div>

Note: When the User Agent can determine whether the particular forced color scheme
chosen by the user is high or low contrast,
one of ''prefers-contrast: more'' or ''prefers-contrast: less'' should match,
Additionally, when the user agent can determine
whether the forced color palette chosen by the user
has a high or low contrast,
one of ''prefers-contrast: more'' or ''prefers-contrast: less'' should match
in addition to ''prefers-contrast: forced''.
Similarly,
if the forced color palette chosen by the user
fits within one of the color schemes described by 'prefers-color-scheme',
the corresponding value should also match.
</dl>

<div class=note>
Expand All @@ -2702,6 +2709,47 @@ Detecting the desire for increased or decreased color contrast from elements on
result in a high or low contrast (or something else).
</div>

<div class=example>
<ul>
<li>
Many users have difficulty
reading text that has a small difference in contrast to the text
background and would prefer a larger contrast.

<li>
People suffering from migraine
may find strongly contrasting pages
to be visually painful
and would prefer a low contrast.

<li>
Some people with dyslexia find high contrast text hard to read,
as they feel that the letters shine / sparkle as if backlit by too bright a light,
and find low contrast to be more comfortable.

<li>
Environmental factors may also lead
a user to prefer more or less contrast.
See also [[#auto-pref]].
</ul>

Issue: This list should be refined and expanded.
</div>

For compatibility with legacy content,
the following syntax is also supported:

<pre class='descdef mq'>
Name: forced-colors
Value: none | active
For: @media
Type: discrete
</pre>

<dfn type=value dfn-for="@media/prefers-color-scheme" export>active</dfn> matches
when ''prefers-contrast: forced'' matches,
otherwise <dfn type=value dfn-for="@media/prefers-color-scheme" export>none</dfn> matches.

<h3 id="prefers-color-scheme">
Detecting the desire for light or dark color schemes: the 'prefers-color-scheme' feature</h3>

Expand Down Expand Up @@ -2763,36 +2811,6 @@ Detecting the desire for light or dark color schemes: the 'prefers-color-scheme'
please contact the CSSWG to discuss this.
</div>

<h3 id="forced-colors">
Detecting a forced color palette: the 'forced-colors' feature</h3>

<pre class='descdef mq'>
Name: forced-colors
Value: none | active
For: @media
Type: discrete
</pre>

The 'forced-colors' media feature is used to detect if
the user agent has enabled a <a>forced colors mode</a>
where it enforces a user-chosen limited color palette on the page.

<dl dfn-type=value dfn-for="@media/prefers-color-scheme">
<dt><dfn>none</dfn>
<dd>
<a>Forced colors mode</a> is not active;
the page's colors are not being forced into a limited palette.

<dt><dfn>active</dfn>
<dd>
Indicates that <a>forced colors mode</a> is active.
The UA will provide the color palette to authors
through the CSS system color keywords
and, if appropriate, trigger the appropriate value of 'prefers-color-scheme'
so that authors can adapt the page.
See [[css-color-adjust-1#forced]] for details.
</dl>

<h3 id="prefers-reduced-data">
Detecting the desire for reduced data usage when loading a page: the 'prefers-reduced-data' feature</h3>

Expand Down

0 comments on commit d519cac

Please sign in to comment.