Skip to content

Commit

Permalink
updated section on chrome media query emulation features
Browse files Browse the repository at this point in the history
  • Loading branch information
jongund committed Nov 9, 2024
1 parent e6d953b commit b711a44
Showing 1 changed file with 2 additions and 10 deletions.
12 changes: 2 additions & 10 deletions content/practices/high-contrast/high-contrast-practice.html
Original file line number Diff line number Diff line change
Expand Up @@ -766,16 +766,8 @@ <h3 id="os-high-contrast-config">Operating System High Contrast Settings</h3>

<h3 id="chrome-high-contrast-options">Chrome High Contrast Options</h3>

<p>There are two main ways to test for high contrast using the Chrome browser using the Render options in the DOM Inspector or installing the Google High Contrast extension. The extension provides a toolbar button to easily toggle between high contrast and author styled rendering. The DOM Inspector method is </p>

<ul>
<li>
<a href="https://developer.chrome.com/docs/devtools/rendering/emulate-css">DOM Inspector Render Tab: Emulate <code>prefers-color-scheme: dark</code> and <code>forced-colors: active</code></a>
</li>
<li>
<a href="https://chromewebstore.google.com/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph?hl%3Den&pli=1">Google High Contrast Extension</a>, use "Yellow on Black" option.
</li>
</ul>
<p>The Chrome browser has Render options in the DOM Inspector to enable and disable contrast related media queries. Use the <a href="https://developer.chrome.com/docs/devtools/rendering/emulate-css">DOM Inspector Render Tab: Emulate</a> and you can change the setting for <code>prefers-color-scheme: dark</code> and <code>forced-colors: active</code>.
</p>
</section>

<script src="./js/high-contrast-practice.js"></script>
Expand Down

0 comments on commit b711a44

Please sign in to comment.