You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>Microsoft Windows includes an accessibility feature called <ahref="https://support.microsoft.com/en-us/windows/use-high-contrast-mode-in-windows-10-fedc744c-90ac-69df-aed5-c8a90125e696">Windows High Contrast Mode</a>. The
247
+
<p>Some operating systems include an accessibility feature called High Contrast Mode. The
248
248
<code>cdk/a11y</code> package provides a Sass mixin that lets you define styles that only apply in high
249
249
contrast mode. To create a high contrast style, define your style inside the <code>high-contrast</code> mixin.</p>
250
-
<p>The mixin works by targeting a CSS class which is added to the <code>body</code> by the CDK when high contrast
251
-
mode is detected at runtime, via the <code>HighContrastModeDetector</code> service.</p>
250
+
<p>The mixin works by targeting the <code>forced-colors</code> media query.</p>
<p>The <code>high-contrast</code> mixin accepts two optional parameters, <code>$target</code> and <code>$encapsulation</code>.</p>
261
-
<p>The <code>$target</code> parameter allows you to specify which variation of high contrast mode your style
262
-
targets. The accepted values are <code>active</code> (default), <code>black-on-white</code>, and <code>white-on-black</code>. These
263
-
values correspond to the supported values for the
264
-
<ahref="https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/"><code>-ms-high-contrast</code> media query</a>.</p>
265
-
<p>The <code>$encapsulation</code> parameter affects how the emitted styles interact with style encapsulation.
266
-
The supported values are <code>on</code>, <code>off</code>, and <code>any</code>. The default value is <code>any</code>, which works for any
267
-
encapsulation scenario by emitting two selectors. Specifying either <code>on</code> or <code>off</code> slightly reduces
268
-
the amount of CSS emitted by limiting the styles to components with encapsulation enabled or
269
-
disabled, respectively. The styles emitted for encapsulated components work for both Angular's
270
-
emulated style encapsulation and for native Shadow DOM encapsulation.</p>
259
+
<p>The <code>high-contrast</code> mixin accepts the optional <code>$target</code> parameter which allows you to specify
260
+
the value of the <code>forced-color</code> media query. Its value can be either <code>active</code> or <code>none</code>.</p>
0 commit comments