added caution for system colors and currentcolor keyword

w3c · Jan 28, 2025 · d2ffbfa · d2ffbfa
1 parent 2b77848
commit d2ffbfa
Showing 1 changed file with 20 additions and 9 deletions.
diff --git a/content/practices/high-contrast/high-contrast-practice.html b/content/practices/high-contrast/high-contrast-practice.html
@@ -59,7 +59,15 @@
 
     }
 
-    .support-notice::before {
+    .support-notice div.caution {
+      background-color: #FCEBC3;
+      padding-left: 60px;
+      padding-top: 1em;
+      padding-bottom: 1em;
+      position: relative;
+    }
+
+    .support-notice div.caution::before {
       width: 32px;
       height: 32px;
       display: block;
@@ -648,11 +656,12 @@ <h3 id="system-colors">System Colors</h3>
 
         <p>The following table identifies the current system colors defined in <a href="https://www.w3.org/TR/css-color-4/#css-system-colors">CSS Color Module Level 4</a>.  System colors are supported in all major browsers, but the <strong>actual colors</strong> they render may vary between browsers and operating systems based on default and user theme and contrast settings.</p>
 
-        <p class="support-notice">
-          <strong>Caution: </strong>
-          Some browsers may render a system color as <code>transparent</code>, for example the Chrome browser for <code>AccentColor</code> and <code>AccentColorText</code> colors.
-          Avoid using these system colors since the color contrast will be less predictable.
-        </p>
+        <div class="support-notice">
+          <div class="caution"><strong>Caution:</strong>
+            Some browsers may render a system color as <code>transparent</code>. For example the Chrome browser for <code>AccentColor</code> and <code>AccentColorText</code> colors.
+            Avoid using these system colors since background color and associated color contrast is less predictable.
+          </div>
+        </div>
 
         <table aria-labelledby="system-colors" class="data">
           <thead>
@@ -732,9 +741,11 @@ <h3><code>currentcolor</code> Keyword</h3>
 
         <p>The <code>currentcolor</code> keyword provides a means for components to use the color value of ancestors to set the color properties of an element.   When the user chooses a high contrast theme the browser changes the <code>color</code> and <code>background-color</code> values of text content.   The <code>currentcolor</code> value is set to the text color for use in setting the color of other properties including: <code>border</code> and <code>outline</code> on HTML elements, and <code>stroke</code> and <code>fill</code> properties on SVG elements.</p>
 
-        <p class="support-notice">
-          Caution: There is no equivalent to the <code>currentcolor</code> value for setting the background color, so when using this technique it is important for the background of the element to be transparent to allow the background color of the page to be visible.
-        </p>
+        <div class="support-notice">
+          <div class="caution"><strong>Caution:</strong>
+            There is no equivalent to the <code>currentcolor</code> value for setting the background color, so when using this technique it is important for the background of the element to be transparent to allow the background color of the page to be visible.
+          </div>
+        </div>
 
         <h3 id="currentcolor-example">Current Color Example: Switch</h3>