updated switch examples

w3c · Dec 10, 2024 · aef3bc3 · aef3bc3
1 parent affb5bd
commit aef3bc3
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 37 deletions.
diff --git a/content/practices/high-contrast/css/switch-color-scheme.css b/content/practices/high-contrast/css/switch-color-scheme.css
@@ -11,12 +11,6 @@ button.color-scheme[role="switch"] {
   color: #242424;
 }
 
-button.color-scheme[role="switch"][aria-checked="true"] {
-  background-color: #333;
-  color: #eee;
-  border-color: #36c;
-}
-
 button.color-scheme[role="switch"] .label {
   position: relative;
   top: -3px;
@@ -28,11 +22,6 @@ button.color-scheme[role="switch"] .label {
   color: #242424;
 }
 
-button.color-scheme[role="switch"][aria-checked="true"] .label,
-button.color-scheme[role="switch"][aria-checked="true"] .on {
-  color: #fff;
-}
-
 button.color-scheme[role="switch"] svg {
   display: inline-block;
   width: 36px;
@@ -58,11 +47,6 @@ button.color-scheme[role="switch"] svg circle.on {
   display: none;
 }
 
-button.color-scheme[role="switch"][aria-checked="true"] svg rect {
-  fill: #36c;
-  stroke: #36c;
-}
-
 button.color-scheme[role="switch"][aria-checked="true"] svg circle.off {
   display: none;
 }
@@ -98,11 +82,6 @@ button.color-scheme[role="switch"]:hover {
   cursor: pointer;
 }
 
-button.color-scheme[role="switch"][aria-checked="true"]:focus,
-button.color-scheme[role="switch"][aria-checked="true"]:hover {
-  border-color: #add8e6;
-}
-
 @media (prefers-color-scheme: dark) {
   button.color-scheme[role="switch"] {
     background-color: #333;

diff --git a/content/practices/high-contrast/css/switch-increase-contrast.css b/content/practices/high-contrast/css/switch-increase-contrast.css
@@ -11,11 +11,6 @@ button.increase-contrast[role="switch"] {
   color: #242424;
 }
 
-button.increase-contrast[role="switch"][aria-checked="true"] {
-  background-color: #eee;
-  color: #000;
-}
-
 button.increase-contrast[role="switch"] .label {
   position: relative;
   top: -3px;
@@ -27,10 +22,6 @@ button.increase-contrast[role="switch"] .label {
   color: #242424;
 }
 
-button.increase-contrast[role="switch"][aria-checked="true"] .label {
-  color: #242424;
-}
-
 button.increase-contrast[role="switch"] svg {
   display: inline-block;
   width: 36px;
@@ -56,11 +47,6 @@ button.increase-contrast[role="switch"] svg circle.on {
   display: none;
 }
 
-button.increase-contrast[role="switch"][aria-checked="true"] svg rect {
-  fill: #0051a4;
-  stroke: #061d3a;
-}
-
 button.increase-contrast[role="switch"][aria-checked="true"] svg circle.off {
   display: none;
 }

diff --git a/content/practices/high-contrast/high-contrast-practice.html b/content/practices/high-contrast/high-contrast-practice.html
@@ -237,7 +237,7 @@ <h2>Increase Contrast</h2>
 
        <h3 id="prefers-contrast-example">Increase Contrast Example</h3>
 
-        <p>The example shows how the color contrast increases from 12.8 to 18.1 for text and 4.6 to 12.2 for border and fill for the button when the <code>prefers-contrast: more</code> is set.  The example simulates the change to colors when the Increase Contrast option switch is set to "on".  If you enable operating system "increased contrast" feature the example will be rendered with the increased contrast values.</p>
+        <p>The example shows how the color contrast increases from 12.8 to 18.1 for text and 4.6 to 12.2 for border and fill for the button when the <code>prefers-contrast: more</code> is set.  When you enable your device's "increased contrast" feature the example will be rendered with the increased contrast values.</p>
 
         <div class="example">
 
@@ -393,7 +393,7 @@ <h2>Color Scheme (Light or Dark)</h2>
 
        <h3 id="color-scheme-switch">Color Scheme Example: Switch</h3>
 
-        <p>The example shows how colors can change when users switch color schemes.  The example simulates the change of colors when the dark color theme is enabled when the switch is set to "on".  If you enable the operating system’s "dark scheme" feature the example will be rendered with the dark color scheme.</p>
+        <p>The example shows how colors can change when users switch color schemes.  When you enable your device's "dark scheme" feature the example will be rendered with the dark color scheme.</p>
 
         <div class="example">