From d2ffbfa56c0ee3067aa16716277443b680000632 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 28 Jan 2025 15:50:03 -0600
Subject: [PATCH] added caution for system colors and currentcolor keyword

---
 .../high-contrast/high-contrast-practice.html | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/content/practices/high-contrast/high-contrast-practice.html b/content/practices/high-contrast/high-contrast-practice.html
index ec3dbef78..91837be22 100644
--- 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>