diff --git a/docs/_includes/callout-warning-color-assistive-technologies.md b/docs/_includes/callout-warning-color-assistive-technologies.md
new file mode 100644
index 0000000000..b92a1c3418
--- /dev/null
+++ b/docs/_includes/callout-warning-color-assistive-technologies.md
@@ -0,0 +1,5 @@
+{% callout warning %}
+#### Conveying meaning to assistive technologies
+
+Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
+{% endcallout %}
\ No newline at end of file
diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index c269c3d8f2..274061a5ee 100644
--- a/docs/components/alerts.md
+++ b/docs/components/alerts.md
@@ -30,6 +30,9 @@ Alerts are available for any length of text, as well as an optional dismiss butt
 </div>
 {% endexample %}
 
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 ### Link color
 
 Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
diff --git a/docs/components/buttons.md b/docs/components/buttons.md
index 42841807f3..d5aa453d7a 100644
--- a/docs/components/buttons.md
+++ b/docs/components/buttons.md
@@ -39,11 +39,8 @@ Bootstrap includes six predefined button styles, each serving its own semantic p
 <button type="button" class="btn btn-link">Link</button>
 {% endexample %}
 
-{% callout warning %}
-#### Conveying meaning to assistive technologies
-
-Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
-{% endcallout %}
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
 
 ## Button tags
 
diff --git a/docs/components/card.md b/docs/components/card.md
index 53580d667c..b53d2e39ae 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -362,6 +362,9 @@ Cards include their own variant classes for quickly changing the `background-col
 </div>
 {% endexample %}
 
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 ## Outline variants
 
 In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card.
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index db339c824d..8b3b9cd885 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -104,6 +104,9 @@ Use contextual classes to style list items, default or linked. Also includes `.a
 </div>
 {% endexample %}
 
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 ## Custom content
 
 Add nearly any HTML within, even for linked list groups like the one below.
diff --git a/docs/components/tag.md b/docs/components/tag.md
index 185ea378de..09608931a2 100644
--- a/docs/components/tag.md
+++ b/docs/components/tag.md
@@ -32,6 +32,9 @@ Add any of the below mentioned modifier classes to change the appearance of a ta
 <span class="tag tag-danger">Danger</span>
 {% endexample %}
 
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 ## Pill tags
 
 Use the `.tag-pill` modifier class to make tags more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index b67221119a..7add31309b 100644
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -160,11 +160,8 @@ Similar to the contextual text color classes, easily set the background of an el
 Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` with the class.
 {% endcallout %}
 
-{% callout warning %}
-#### Conveying meaning to assistive technologies
-
-Ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.
-{% endcallout %}
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
 
 ## Close icon
 
diff --git a/docs/content/tables.md b/docs/content/tables.md
index 80bbbf8549..01ec2239a9 100644
--- a/docs/content/tables.md
+++ b/docs/content/tables.md
@@ -420,6 +420,9 @@ Use contextual classes to color table rows or individual cells.
   </table>
 </div>
 
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 {% highlight html %}
 <!-- On rows -->
 <tr class="table-active">...</tr>