Replace raster images with SVG in Understanding SC 1.4.11: Non-Text Contrast (#4573)

Closes #4549.

Replaces many of the raster images in [Understanding Non-Text
Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html)
with inlined SVG assets. This gives the example visuals higher fidelity
in varying viewport sizes, user zoom levels, and high-density displays.

Please compare
[before](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html)
and
[after](https://deploy-preview-4573--wcag2.netlify.app/understanding/non-text-contrast).

⚠️ While doing this work, I also discovered that the current
Understanding page has horizontal scrolling overflow in ~`320px`
viewports because of the non-responsive tables like [“_Passing User
Interface Component
Examples_”](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html#:~:text=Passing%20User%20Interface%20Component%20Examples).
I’ll create a separate issue & PR to see about resolving that. #4641

---------

Co-authored-by: Patrick H. Lauke <[email protected]>
Co-authored-by: Mike Gower <[email protected]>

Author: 3 people

css/base.css

@@ -203,9 +203,9 @@ margin: 1.2em 0;
 align-items: stretch;
 }
 
-#site-header.minimal-header .minimal-header-name, 
-#site-header.minimal-header .minimal-header-subtitle, 
-#site-header.minimal-header .minimal-header-link 
+#site-header.minimal-header .minimal-header-name,
+#site-header.minimal-header .minimal-header-subtitle,
+#site-header.minimal-header .minimal-header-link
 {
 display: flex;
 flex-direction: column;
@@ -411,7 +411,7 @@ font-size: 95%;
 .standalone-resource-about a,
 .standalone-resource-pager a,
 .standalone-resource-about span,
-.standalone-resource-pager span 
+.standalone-resource-pager span
 {
 margin-left:.8em;
 margin-right:.8em;
@@ -444,6 +444,12 @@ figure svg {
 	border: 1px solid var(--line-grey);
 }
 
+main table svg[role*="image"],
+figure svg[role*="image"] {
+    display: block;
+    max-inline-size: 100%;
+}
+
 figcaption {
 	font-weight: initial;
 	border-bottom: initial;

understanding/20/contrast-enhanced.html

@@ -236,7 +236,7 @@ <h3>Inactive User Interface Components</h3>
 
          <p>User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.</p>
          <figure id="figure-grey-button-and-text">
-            <img src="img/inactive-button.png" alt="Grey button with non-contrasting grey text." width="120">
+            {% include "../21/img/1.4.11-ntc-button-inactive.svg" %}
             <figcaption> An inactive button using default browser styles</figcaption>
          </figure>
       </section>

understanding/20/contrast-minimum.html

@@ -219,7 +219,7 @@ <h3>Inactive User Interface Components</h3>
 
          <p>User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.</p>
          <figure id="figure-grey-button-and-text">
-            <img src="img/inactive-button.png" alt="Grey button with non-contrasting grey text." width="120">
+            {% include "../21/img/1.4.11-ntc-button-inactive.svg" %}
             <figcaption> An inactive button using default browser styles</figcaption>
          </figure>
       </section>