From 210d77e72a72e923a5aad07a5c792adfb533d4da Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Sun, 3 Nov 2024 18:12:51 -0800
Subject: [PATCH] Editorial revisions to invert colors section

---
 .../high-contrast/high-contrast-practice.html | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/content/practices/high-contrast/high-contrast-practice.html b/content/practices/high-contrast/high-contrast-practice.html
index 1849dee0d..3517cab24 100644
--- a/content/practices/high-contrast/high-contrast-practice.html
+++ b/content/practices/high-contrast/high-contrast-practice.html
@@ -178,14 +178,21 @@ <h2>User Options for Adjusting Colors and Contrast</h2>
 
       <section id="invert-colors">
         <h2>Invert Colors</h2>
-
-        <p>The invert colors setting is a simple transformation of colors used to render content to the opposite color.   For example, content rendered as white is changed to black.  Content styled as blue is rendered as a brown (e.g. a mixture of red and green).  There are no media queries associated with identifying the invert colors setting.</p>
-
-        <p>Authors support this setting by insuring their content meets <a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">WCAG 1.4.3: Contrast (Minimum)</a> contrast requirements, including components.  The following example illustrates how the <code>switch</code> role example is rendered on macOS when invert colors is disabled and enabled.</p>
-
-
-        <h3 id="invert-colors-example-screenshots">Invert Colors Example: Button Switch</h3>
-        <table aria-labelledby="invert-colors-example-screenshots" class="data">
+        <p>
+          The invert colors setting is a simple transformation that renders content to its opposite color.
+          For example, content rendered as white is changed to black.
+          Content styled as blue is rendered as a brown, i.e., a mixture of red and green.
+          User agents do not provide a media query that can determine whether invert colors is enabled in the operating system.
+        </p>
+        <p>
+          To support invert colors effectively, insure content meets
+          <a href="https://www.w3.org/TR/WCAG22/#contrast-minimum">WCAG 1.4.3: Contrast (Minimum)</a>.
+        </p>
+        <p>
+          The following example illustrates how a <code>switch</code> element is rendered on macOS both when invert colors is disabled and enabled.
+        </p>
+        <table class="data">
+          <caption>Invert Colors Example: Button Switch</caption>
           <thead>
             <tr>
               <th>Setting</th>
@@ -207,9 +214,12 @@ <h3 id="invert-colors-example-screenshots">Invert Colors Example: Button Switch<
 
       <section id="prefers-contrast">
         <h2>Increase Contrast</h2>
-
-        <p>When the increase contrast setting is is enabled the <code>prefers-contrast</code> media query changes from <code>no-preference</code> to <code>more</code>.  The author <em>should</em> update the rendering of text content and components to meet <a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced">WCAG 1.4.6: Contrast (Enhanced)</a> requirement.  If content already meets the enhanced requirement, the author <em>may</em> want to exceed the enhanced color contrast requirement.</p>
-
+        <p>When the increase contrast setting is is enabled the <code>prefers-contrast</code> media query changes from <code>no-preference</code> to <code>more</code>.
+          The author <em>should</em> update the rendering of text content and components to meet
+          <a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced">WCAG 1.4.6: Contrast (Enhanced)</a>
+          requirement. 
+          If content already meets the enhanced requirement, the author <em>may</em> want to exceed the enhanced color contrast requirement.
+        </p>
         <p>Note: Operating systems that support the <code>forced-colors</code> media query will set <code>prefers-contrast</code> to <code>custom</code> when the <code>forced-colors</code> is set to <code>active</code>.  </p>
 
        <h3 id="prefers-contrast-example">Increase Contrast Example</h3>