diff --git a/site/content/docs/5.2/utilities/background.md b/site/content/docs/5.2/utilities/background.md
index ef7b2468e8..dad71ec372 100644
--- a/site/content/docs/5.2/utilities/background.md
+++ b/site/content/docs/5.2/utilities/background.md
@@ -17,11 +17,11 @@ Similar to the contextual text color classes, set the background of an element t
 <div class="p-3 mb-2 bg-{{ .name }}-subtle text-emphasis-{{ .name }}">.bg-{{ .name }}-subtle</div>
 {{- end -}}
 {{< /colors.inline >}}
-
 <p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
 <p class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</p>
 
 <div class="p-3 mb-2 bg-body text-body">.bg-body</div>
+<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
 <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
 <div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>
 {{< /example >}}
@@ -38,6 +38,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 <div class="p-3 mb-2 bg-{{ .name }} bg-gradient{{ with .contrast_color }} text-{{ . }}{{ else }} text-white{{ end }}">.bg-{{ .name }}.bg-gradient</div>
 {{- end -}}
 {{< /colors.inline >}}
+<div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>
 {{< /markdown >}}
 
 ## Opacity
diff --git a/site/content/docs/5.2/utilities/colors.md b/site/content/docs/5.2/utilities/colors.md
index 94418ac5e2..4b1647242c 100644
--- a/site/content/docs/5.2/utilities/colors.md
+++ b/site/content/docs/5.2/utilities/colors.md
@@ -24,6 +24,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t
 <p class="text-body-secondary">.text-body-secondary</p>
 <p class="text-body-tertiary">.text-body-tertiary</p>
 
+<p class="text-black bg-white">.text-black</p>
 <p class="text-white bg-dark">.text-white</p>
 <p class="text-black-50 bg-white">.text-black-50</p>
 <p class="text-white-50 bg-dark">.text-white-50</p>