Add a11y callouts

twbs · Jan 3, 2023 · 1d12765 · 1d12765
1 parent 593443d
commit 1d12765
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/site/content/docs/5.3/helpers/colored-links.md b/site/content/docs/5.3/helpers/colored-links.md
@@ -8,7 +8,7 @@ toc: true
 
 ## Link colors
 
-You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state.
+You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
 
 {{< example >}}
 {{< colored-links.inline >}}
@@ -19,7 +19,7 @@ You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` class
 {{< /example >}}
 
 {{< callout info >}}
-Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
 
 ## Link utilities

diff --git a/site/content/docs/5.3/utilities/link.md b/site/content/docs/5.3/utilities/link.md
@@ -9,7 +9,7 @@ added: 5.3
 
 ## Link opacity
 
-Change the alpha opacity of the link `rgba()` color value with utilities.
+Change the alpha opacity of the link `rgba()` color value with utilities. Please be aware that changes to a color's opacity can result in contrast ratios below the WCAG minimum.
 
 {{< example >}}
 <p><a class="link-opacity-10" href="#">Link opacity 10</a></p>
@@ -38,11 +38,15 @@ Change the underline's color independent of the link text color.
 {{< example >}}
 {{< link-underline-colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-<p><a href="#" class="link-dark link-underline-{{ .name }}">{{ .name | title }} underline</a></p>
+<p><a href="#" class="link-underline-{{ .name }}">{{ .name | title }} underline</a></p>
 {{- end -}}
 {{< /link-underline-colors.inline >}}
 {{< /example >}}
 
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
 ### Underline offset
 
 Change the underline's distance from your text. Offset is set in `em` units to automatically scale with the element's current `font-size`.
@@ -88,6 +92,10 @@ Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-under
 {{< /colored-links.inline >}}
 {{< /example >}}
 
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
 ## Sass
 
 In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.