Skip to content

Commit

Permalink
Update documentation for forced colors mode (#2819)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dlibby-
dlibby- authored Mar 16, 2021
1 parent b85b55d commit 13edc76
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 28 deletions.
69 changes: 47 additions & 22 deletions files/en-us/web/css/@media/forced-colors/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,7 @@
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary">The <strong><code>forced-colors</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">media feature</a> is used to detect if the {{Glossary("user agent")}} has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page.</span></p>

<div class="notecard note">
<p><strong>Note:</strong> This feature is not supported by any user agent and its specifics are subject to change.</p>
</div>
<p><span class="seoSummary">The <strong><code>forced-colors</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">media feature</a> is used to detect if the {{Glossary("user agent")}} has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page. An example of a forced colors mode is Windows High Contrast mode.</span></p>

<h2 id="Syntax">Syntax</h2>

Expand All @@ -26,60 +22,89 @@ <h3 id="Values">Values</h3>
<dt><code><dfn>none</dfn></code></dt>
<dd>Forced colors mode is not active; the page’s colors are not being forced into a limited palette.</dd>
<dt><code>active</code></dt>
<dd>Indicates that forced colors mode is active. The browser provides the color palette to authors through the <a href="/en-US/docs/Web/CSS/color_value#System_Colors">CSS system color</a> keywords and, if appropriate, it triggers the appropriate value of <code><a href="/en-US/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a></code> so that authors can adapt the page.</dd>
<dd>Indicates that forced colors mode is active. The browser provides the color palette to authors through the <a href="/en-US/docs/Web/CSS/color_value#System_Colors">CSS system color</a> keywords and, if appropriate, triggers the appropriate value of <code><a href="/en-US/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a></code> so that authors can adapt the page. The browser selects the value for <code>prefers-color-scheme</code> based on the lightness of the <code>Canvas</code> system color (see the <a href="https://www.w3.org/TR/css-color-adjust-1/#forced">color adjust spec</a> for more details).</dd>
</dl>

<h2 id="Usage_notes">Usage notes</h2>

<h3 id="Properties_affected_by_forced-color_mode">Properties affected by forced-color mode</h3>

<p>In forced colors mode, the values of the following properties are treated as if they have no author-level values specified. That is, user-specified values (if any) or browser-specified values are used instead.</p>
<p>In forced colors mode, the values of the following properties are treated as if they have no author-level values specified. That is, browser-specified values are used instead. The browser-specified values do not affect the style cascade; the values are instead forced by the browser at paint time.</p>

<p>These browser-specified values are selected from the set of system colors &emdash; this ensures a consistent contrast for common UI elements for users that have forced colors enabled.</p>

<ul>
<li>{{cssxref("color")}}</li>
<li>{{cssxref("background-color")}}</li>
<li>{{cssxref("text-decoration-color")}}</li>
<li>{{cssxref("text-emphasis-color")}}</li>
<li>{{cssxref("border-color")}}</li>
<li>{{cssxref("outline-color")}}</li>
<li>{{cssxref("column-rule-color")}}</li>
<li>{{cssxref("scrollbar-color")}}</li>
<li>{{cssxref("-webkit-tap-highlight-color")}}</li>
<li>{{cssxref("box-shadow")}}</li>
<li>{{cssxref("text-shadow")}}</li>
<li><a href="/en-US/docs/Web/SVG/Attribute/fill">SVG fill attribute</a></li>
<li><a href="/en-US/docs/Web/SVG/Attribute/stroke">SVG stroke attribute</a></li>
</ul>

<p>You can use <a href="/en-US/docs/Web/CSS/color_value#System_Colors">system color keywords</a> with any property <em>other</em> than those listed above, to ensure that the rest of the page integrates with the restricted color palette available in forced colors mode.</p>
<p>Additionally the following properties have special behavior in forced colors mode:</p>
<ul>
<li>{{cssxref("box-shadow")}} is forced to 'none'</li>
<li>{{cssxref("text-shadow")}} is forced to 'none'</li>
<li>{{cssxref("background-image")}} is forced to 'none' for values that are not url-based</li>
<li>{{cssxref("color-scheme")}} is forced to 'light dark'</li>
<li>{{cssxref("scrollbar-color")}} is forced to 'auto'</li>
</ul>

<p>The system colors that are forced for the above properties depend on the context of the element. For example the {{cssxref("color")}} property on button element will be forced to <code>ButtonText</code>. On normal text it will be forced to <code>CanvasText</code>. See the <a href="/en-US/docs/Web/CSS/color_value#system_colors">list of system colors</a> for additional details of when each might be appropriate in various UI contexts.</p>

<p><strong>Note:</strong> user agents choose system colors based on native element semantics, <em>not</em> on added ARIA roles. As an example, adding <code>role="button"</code> to a div will <strong>not</strong> cause an element's color to be forced to <code>ButtonText</code></p>

<p>In addition to these adjustments, browsers will help ensure text legibility by drawing “backplates” behind text. This is particularly important for preserving contrast when text is placed on top of images.
</p>

<p>There are two cases where the user agent does not force the values for the above properties &emdash; when a {{cssxref("forced-color-adjust")}} value of <code>none</code> is applied to an element, or when a system color is specified by the author.</p>

<p>When forced-color-adjust is set to <code>none</code> on an element, none of the forced color values will apply, and author styles will be applied as normal. Additionally, the backplate for text will be disabled.</p>

<p>When a system color is specified, it will be used instead of the value that would otherwise have been forced.</p>

<p>You can also use system colors with any property <em>other</em> than those listed above, to ensure that the rest of the page integrates with the restricted color palette available in forced colors mode.</p>

<h3 id="Usage_notes">Accessibility concerns</h3>

<p>In general, web authors should <strong>not</strong> be using the <code>forced-colors</code> media feature to create a separate design for users with this feature enabled. Instead, its intended usage is to make small tweaks to improve usability or legibility when the default application of forced colors does not work well for a given portion of a page.</p>

<p>The high contrast provided by forced colors mode's reduced palette and text backplates is often essential for some users to be able to read or use a given website, so adjustments that affect content should be chosen carefully and targeted to content that is otherwise not legible.</p>

<h3 id="User_preferences">User preferences</h3>

<p>This media feature is active only if the user has enabled color scheme preferences in their operating system. For example High Contrast mode on Windows.</p>
<p>This media feature is active only if the user has enabled color scheme preferences in their operating system. One example of such a feature is High Contrast mode on Windows.</p>

<h2 id="Examples">Examples</h2>

<div class="notecard note">
<p><strong>Note:</strong> The below example will only work when using a browser that supports this media feature, and with a preference such as High Contrast mode enabled in your OS.</p>
</div>

<p>This example has an annoying color palette by default. This example does not take advantage of the colors provided by the user agent.</p>
<p>This example is a button that normally gets its contrast via {{cssxref("box-shadow")}}. Under forced colors mode, box-shadow is forced to none, so the example uses the forced-colors media feature to ensure there is a border of the appropriate color (ButtonText in this case)</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="colors"&gt;weird color box&lt;/div&gt;
<pre class="brush: html">&lt;button class="button"&gt;Press me!&lt;/button&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">.colors {
background-color: red;
color: grey;
<pre class="brush: css">
.button {
border: 0;
padding: 10px;
box-shadow: -2px -2px 5px gray, 2px 2px 5px gray;
}

@media (forced-colors: active) {
.colors {
background-color: white;
color: black;
.button {
/* Use a border instead, since box-shadow is forced to 'none' in forced-colors mode */
border: 2px ButtonText solid;
}
}
</pre>
Expand Down Expand Up @@ -120,5 +145,5 @@ <h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/@media">@media</a></li>
<li><a href="https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/">Styling for Windows high contrast with standards for forced colors.</a></li>
<li>{{cssxref("forced-color-adjust")}}</li>
<li>{{cssxref("forced-color-adjust")}}</li>
</ul>
12 changes: 6 additions & 6 deletions files/en-us/web/css/color_value/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -926,19 +926,19 @@ <h3 id="System_Colors">System Colors</h3>
</dd>
<dt>ButtonFace</dt>
<dd>
<p>Background of push buttons</p>
<p>Background color of controls</p>
</dd>
<dt>ButtonText</dt>
<dd>
<p>Text of push buttons</p>
<p>Foreground color of controls</p>
</dd>
<dt>Canvas</dt>
<dd>
<p>Background of application content or documents</p>
</dd>
<dt>CanvasText</dt>
<dd>
<p>Text in application content or documents</p>
<p>Foreground color in application content or documents</p>
</dd>
<dt>Field</dt>
<dd>
Expand All @@ -950,15 +950,15 @@ <h3 id="System_Colors">System Colors</h3>
</dd>
<dt>GrayText</dt>
<dd>
<p>Text that is disabled</p>
<p>Foreground color for disabled items (e.g. a disabled control)</p>
</dd>
<dt>Highlight</dt>
<dd>
<p>Background of items that are selected in a control</p>
<p>Background of selected items</p>
</dd>
<dt>HighlightText</dt>
<dd>
<p>Text of items that are selected in a control</p>
<p>Foreground color of selected items</p>
</dd>
<dt>LinkText</dt>
<dd>
Expand Down

0 comments on commit 13edc76

Please sign in to comment.