Skip to content

Commit a8e06b8

Browse files
authored
Refactoring of the forced-colors and prefers-contrast media feature (w3c#5434)
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 (see w3c#3856). 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
1 parent ddeef01 commit a8e06b8

1 file changed

Lines changed: 69 additions & 44 deletions

File tree

mediaqueries-5/Overview.bs

Lines changed: 69 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2624,7 +2624,7 @@ Detecting the desire for reduced transparency on the page: the 'prefers-reduced-
26242624
ISSUE: How does this interact with preferences around e.g. pattern fills and backgrounds?
26252625
They're not about transparency, but they also interfere with shape recognition.
26262626

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

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

2637-
The 'prefers-contrast' media feature is used to detect if the user
2638-
has requested the system increase or decrease the amount of contrast
2639-
between adjacent colors. For example, many users have difficulty
2640-
reading text that has a small difference in contrast to the text
2641-
background and would prefer a larger contrast.
2637+
The 'prefers-contrast' media feature is used to detect
2638+
if the user has requested more or less contrast in the page.
2639+
This could be responded to, for example,
2640+
by adjusting the contrast ratio between adjacent colors,
2641+
or by changing how much elements stand out visually,
2642+
such as by adjusting their borders.
26422643

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

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

26672670
<div class=advisement>
26682671
This does <em>not</em> necessarily indicates
@@ -2673,10 +2676,18 @@ Detecting the desire for increased or decreased color contrast from elements on
26732676
or some other arrangement that is neither particularly low or high contrast.
26742677
</div>
26752678

2676-
Note: When the User Agent can determine whether the particular forced color scheme
2677-
chosen by the user is high or low contrast,
2678-
one of ''prefers-contrast: more'' or ''prefers-contrast: less'' should match,
2679+
Additionally, when the user agent can determine
2680+
whether the forced color palette chosen by the user
2681+
has a high or low contrast,
2682+
one of ''prefers-contrast: more'' or ''prefers-contrast: less'' must match
26792683
in addition to ''prefers-contrast: forced''.
2684+
2685+
Note:
2686+
Similarly,
2687+
if the forced color palette chosen by the user
2688+
fits within one of the color schemes described by 'prefers-color-scheme',
2689+
the corresponding value will also match.
2690+
See [[css-color-adjust-1#forced]] for details.
26802691
</dl>
26812692

26822693
<div class=note>
@@ -2702,6 +2713,51 @@ Detecting the desire for increased or decreased color contrast from elements on
27022713
result in a high or low contrast (or something else).
27032714
</div>
27042715

2716+
<div class=example>
2717+
Preference for more or less contrast may arise
2718+
from a variety of different situations.
2719+
Here are some examples:
2720+
2721+
<ul>
2722+
<li>
2723+
Many users have difficulty
2724+
reading text that has a small difference in contrast to the text
2725+
background and would prefer a larger contrast.
2726+
2727+
<li>
2728+
People suffering from migraine
2729+
may find strongly contrasting pages
2730+
to be visually painful
2731+
and would prefer a low contrast.
2732+
2733+
<li>
2734+
Some people with dyslexia find high contrast text hard to read,
2735+
as they feel that the letters shine / sparkle as if backlit by too bright a light,
2736+
and find low contrast to be more comfortable.
2737+
2738+
<li>
2739+
Environmental factors may also lead
2740+
a user to prefer more or less contrast.
2741+
See also [[#auto-pref]].
2742+
</ul>
2743+
2744+
Issue: This list should be refined and expanded.
2745+
</div>
2746+
2747+
For compatibility with legacy content,
2748+
the following syntax is also supported:
2749+
2750+
<pre class='descdef mq'>
2751+
Name: forced-colors
2752+
Value: none | active
2753+
For: @media
2754+
Type: discrete
2755+
</pre>
2756+
2757+
<dfn type=value dfn-for="@media/prefers-color-scheme" export>active</dfn> matches
2758+
when ''prefers-contrast: forced'' matches,
2759+
otherwise <dfn type=value dfn-for="@media/prefers-color-scheme" export>none</dfn> matches.
2760+
27052761
<h3 id="prefers-color-scheme">
27062762
Detecting the desire for light or dark color schemes: the 'prefers-color-scheme' feature</h3>
27072763

@@ -2763,36 +2819,6 @@ Detecting the desire for light or dark color schemes: the 'prefers-color-scheme'
27632819
please contact the CSSWG to discuss this.
27642820
</div>
27652821

2766-
<h3 id="forced-colors">
2767-
Detecting a forced color palette: the 'forced-colors' feature</h3>
2768-
2769-
<pre class='descdef mq'>
2770-
Name: forced-colors
2771-
Value: none | active
2772-
For: @media
2773-
Type: discrete
2774-
</pre>
2775-
2776-
The 'forced-colors' media feature is used to detect if
2777-
the user agent has enabled a <a>forced colors mode</a>
2778-
where it enforces a user-chosen limited color palette on the page.
2779-
2780-
<dl dfn-type=value dfn-for="@media/prefers-color-scheme">
2781-
<dt><dfn>none</dfn>
2782-
<dd>
2783-
<a>Forced colors mode</a> is not active;
2784-
the page's colors are not being forced into a limited palette.
2785-
2786-
<dt><dfn>active</dfn>
2787-
<dd>
2788-
Indicates that <a>forced colors mode</a> is active.
2789-
The UA will provide the color palette to authors
2790-
through the CSS system color keywords
2791-
and, if appropriate, trigger the appropriate value of 'prefers-color-scheme'
2792-
so that authors can adapt the page.
2793-
See [[css-color-adjust-1#forced]] for details.
2794-
</dl>
2795-
27962822
<h3 id="prefers-reduced-data">
27972823
Detecting the desire for reduced data usage when loading a page: the 'prefers-reduced-data' feature</h3>
27982824

@@ -3212,4 +3238,3 @@ Comments from
32123238
akklesed,
32133239
and 張俊芝
32143240
improved this specification.
3215-

0 commit comments

Comments
 (0)