Skip to content

Commit 099783c

Browse files
committed
[mediaqueries-5] Add "prefers-contrast:forced"
Closes w3c#3856
1 parent a69f29f commit 099783c

File tree

1 file changed

+45
-2
lines changed

1 file changed

+45
-2
lines changed

mediaqueries-5/Overview.bs

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2714,7 +2714,7 @@ Detecting the desire for increased or decreased color contrast from elements on
27142714

27152715
<pre class='descdef mq'>
27162716
Name: prefers-contrast
2717-
Value: no-preference | high | low
2717+
Value: no-preference | high | low | forced
27182718
For: @media
27192719
Type: discrete
27202720
</pre>
@@ -2742,8 +2742,51 @@ Detecting the desire for increased or decreased color contrast from elements on
27422742
Indicates that user has notified the system that they
27432743
prefer an interface that has a lower level of contrast.
27442744

2745+
<dt><dfn>forced</dfn>
2746+
<dd>
2747+
Indicates that <a>forced colors mode</a> is active,
2748+
identically to ''forced-colors: active''.
2749+
See [[#forced-colors]] and
2750+
[[css-color-adjust-1#forced]].
2751+
2752+
<div class=advisement>
2753+
This does <em>not</em> necessarily indicates
2754+
a preference for a high contrast.
2755+
The colors have been forcibly adjusted
2756+
to match the preference of the user,
2757+
but that preference can be for a low contrast or a high one,
2758+
or some other arrangement that is neither particularly low or high contrast.
2759+
</div>
2760+
2761+
Note: When the User Agent can determine whether the particular forced color scheme
2762+
chosen by the user is high or low contrast,
2763+
one of ''prefers-contrast: high'' or ''prefers-contrast: low'' should match,
2764+
in addition to ''prefers-contrast: forced''.
27452765
</dl>
27462766

2767+
<div class=note>
2768+
Note: Authors can respond to specific user preferences for a higher or lower
2769+
contrast using ''prefers-contrast: high'' or ''prefers-contrast: low'',
2770+
as appropriate.
2771+
2772+
Using an unqualified <code class=lang-css>@media (prefers-contrast) { … }</code>
2773+
to apply high contrast styles is incorrect and user-hostile,
2774+
as it would also impose high contrast styles to people who have requested the exact opposite.
2775+
2776+
However, it is also common to reduce visual clutter
2777+
in response to both high and low contrast preferences.
2778+
In that case, it is appropriate to use <code class=lang-css>@media (prefers-contrast) { … }</code>
2779+
without specifying ''prefers-contrast/high'' or ''prefers-contrast/low'',
2780+
to do things like replacing background images with plain colors,
2781+
turning off decorative gradients,
2782+
or replacing border images or box shadows with simple solid borders.
2783+
As ''prefers-contrast/forced'', like ''prefers-contrast/high'' or ''prefers-contrast/low'',
2784+
evaluates to true in a [=boolean context=],
2785+
this syntax also benefits users of <a>forced colors mode</a>,
2786+
even when it isn't know whether their colors of choice
2787+
result in a high or low contrast (or something else).
2788+
</div>
2789+
27472790
ISSUE(2943): Split ''prefers-contrast/high'' into two levels,
27482791
“extremely high” (as used in MSFT's black-on-white high contrast theme)
27492792
and “increased (as implemented in Apple's Increased Contrast settings)?
@@ -2836,7 +2879,7 @@ Detecting a forced color palette: the 'forced-colors' feature</h3>
28362879
through the CSS system color keywords
28372880
and, if appropriate, trigger the appropriate value of 'prefers-color-scheme'
28382881
so that authors can adapt the page.
2839-
See [[!css-color-adjust-1#forced]] for details.
2882+
See [[css-color-adjust-1#forced]] for details.
28402883
</dl>
28412884

28422885
<h3 id="prefers-reduced-data">

0 commit comments

Comments
 (0)