@@ -2633,12 +2633,12 @@ Detecting the desire for reduced transparency on the page: the 'prefers-reduced-
26332633 ISSUE: How does this interact with preferences around e.g. pattern fills and backgrounds?
26342634 They're not about transparency, but they also interfere with shape recognition.
26352635
2636- <h3 id="prefers-contrast" oldids="forced-colors" >
2636+ <h3 id="prefers-contrast">
26372637Detecting the desire for increased or decreased color contrast from elements on the page: the 'prefers-contrast' feature</h3>
26382638
26392639 <pre class='descdef mq'>
26402640 Name : prefers-contrast
2641- Value : no-preference | less | more | forced
2641+ Value : no-preference | less | more
26422642 For : @media
26432643 Type : discrete
26442644 </pre>
@@ -2666,37 +2666,6 @@ Detecting the desire for increased or decreased color contrast from elements on
26662666 <dd>
26672667 Indicates that user has notified the system that they
26682668 prefer an interface that has a higher level of contrast.
2669-
2670- <dt> <dfn>forced</dfn>
2671- <dd>
2672- Indicates that <a>forced colors mode</a> is active:
2673- the user agent enforces a user-chosen limited color palette on the page,
2674- in effect also implying a strong preference for the associated contrast.
2675- The UA will provide the color palette to authors
2676- through the CSS system color keywords.
2677- See [[css-color-adjust-1#forced]] for details.
2678-
2679- <div class=advisement>
2680- This does <em> not</em> necessarily indicate
2681- a preference for more contrast.
2682- The colors have been forcibly adjusted
2683- to match the preference of the user,
2684- but that preference can be for less or more contrast,
2685- or some other arrangement that is neither particularly low or high contrast.
2686- </div>
2687-
2688- Additionally, when the user agent can determine
2689- whether the forced color palette chosen by the user
2690- has a high or low contrast,
2691- one of ''prefers-contrast: more'' or ''prefers-contrast: less'' must match
2692- in addition to ''prefers-contrast: forced'' .
2693-
2694- Note:
2695- Similarly,
2696- if the forced color palette chosen by the user
2697- fits within one of the color schemes described by 'prefers-color-scheme' ,
2698- the corresponding value will also match.
2699- See [[css-color-adjust-1#forced]] for details.
27002669 </dl>
27012670
27022671 <div class=note>
@@ -2715,11 +2684,7 @@ Detecting the desire for increased or decreased color contrast from elements on
27152684 to do things like replacing background images with plain colors,
27162685 turning off decorative gradients,
27172686 or replacing border images or box shadows with simple solid borders.
2718- As ''prefers-contrast/forced'' , like ''prefers-contrast/more'' or ''prefers-contrast/less'' ,
2719- evaluates to true in a [=boolean context=] ,
2720- this syntax also benefits users of <a>forced colors mode</a> ,
2721- even when it isn't know whether their colors of choice
2722- result in a high or low contrast (or something else).
2687+ See also [[#forced-colors]] .
27232688 </div>
27242689
27252690 <div class=example>
@@ -2753,8 +2718,8 @@ Detecting the desire for increased or decreased color contrast from elements on
27532718 Issue: This list should be refined and expanded.
27542719 </div>
27552720
2756- For compatibility with legacy content,
2757- the following syntax is also supported:
2721+ <h3 id="forced-colors">
2722+ Detecting Forced Colors Mode: the 'forced-colors' feature</h3>
27582723
27592724 <pre class='descdef mq'>
27602725 Name : forced-colors
@@ -2763,9 +2728,60 @@ Detecting the desire for increased or decreased color contrast from elements on
27632728 Type : discrete
27642729 </pre>
27652730
2766- <dfn type=value dfn-for="@media/prefers-color-scheme" export>active</dfn> matches
2767- when ''prefers-contrast: forced'' matches,
2768- otherwise <dfn type=value dfn-for="@media/prefers-color-scheme" export>none</dfn> matches.
2731+ <dl dfn-type=value dfn-for="@media/forced-colors">
2732+ <dt> <dfn>active</dfn>
2733+ <dd>
2734+ Indicates that <a>forced colors mode</a> is active:
2735+ the user agent enforces a user-chosen limited color palette on the page,
2736+ The UA will provide the color palette to authors
2737+ through the CSS system color keywords.
2738+ See [[css-color-adjust-1#forced]] for details.
2739+
2740+ <div class=advisement>
2741+ This does <em> not</em> necessarily indicate
2742+ a preference for more contrast.
2743+ The colors have been forcibly adjusted
2744+ to match the preference of the user,
2745+ but that preference can be for less or more contrast,
2746+ or some other arrangement that is neither particularly low or high contrast.
2747+ </div>
2748+
2749+ Additionally, when the user agent can determine
2750+ whether the forced color palette chosen by the user
2751+ has a high or low contrast,
2752+ one of ''prefers-contrast: more'' or ''prefers-contrast: less'' must match
2753+ in addition to ''forced-colors: active'' .
2754+
2755+ Similarly,
2756+ if the forced color palette chosen by the user
2757+ fits within one of the color schemes described by 'prefers-color-scheme' ,
2758+ the corresponding value must also match.
2759+ See [[css-color-adjust-1#forced]] for details.
2760+
2761+ <dt> <dfn>none</dfn>
2762+ <dd>
2763+ [=Forced colors mode=] is not active.
2764+ </dl>
2765+
2766+ <div class=example>
2767+ When [=forced colors mode=] is active,
2768+ the only colors that are available to the author are [=system colors=] .
2769+ The user agent will enforce this limited palette automatically,
2770+ but the author may choose a different way of using these colors,
2771+ using the ''forced-colors'' media feature to detect when it is appropriate to do so.
2772+ </div>
2773+
2774+ <div class=example>
2775+ The reduced palette enforeced by [=forced colors mode=]
2776+ can call for some visual simplification of the page.
2777+ ''@media (forced-colors) or (prefers-contrast) { … }''
2778+ can thus be a useful query to conditionally apply styles that reduce visual clutter,
2779+ catching all users of forced colors and all users with contrast preferences.
2780+ ''@media (prefers-contrast) { … }'' would leave how forced-colors users
2781+ with a color scheme that is neither particularly hight nor low contrast.
2782+ while ''@media (forced-colors) { … }'' would instead leave out users with contrast preferences
2783+ that do not come from usage of [=forced colors mode=] .
2784+ </div>
27692785
27702786<h3 id="prefers-color-scheme">
27712787Detecting the desire for light or dark color schemes: the 'prefers-color-scheme' feature</h3>
0 commit comments