Modal headings and labels missing editor text color (#71311)

kushagra-goyal-14 · kushagra-goyal-14 · juanfra · web-flow · commit 60986cd23b38 · 2025-09-04T18:06:34.000+02:00
* style: update header and content color to $gray-900 for better contrast

* chore: update changelog.md

* chore: update changelog to include modal text color fix

* chore: correct heading casing in changelog

* style: ensure proper text color for modal headings and content

* style: update changelog and set proper editor text color for modal content

* chore: remove repeated internal in CHANGELOG

* chore: add entry to changelog.md

* chore: correct pull request reference in changelog for Modal text color fix

Co-authored-by: kushagra-goyal-14 &lt;kush123@git.wordpress.org&gt;
Co-authored-by: juanfra &lt;juanfra@git.wordpress.org&gt;
Co-authored-by: Mamaduka &lt;mamaduka@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
Co-authored-by: ghorivipul97 &lt;ghorivipul97@git.wordpress.org&gt;
Co-authored-by: falgunihdesai &lt;falgunihdesai@git.wordpress.org&gt;
Co-authored-by: richtabor &lt;richtabor@git.wordpress.org&gt;
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   `Modal`: Fix modal headings and labels to use proper editor text color instead of wp-admin colors ([#71311](https://github.com/WordPress/gutenberg/pull/71311)).
+
 ## 30.3.0 (2025-09-03)
 
 ### Bug Fixes
@@ -14,7 +18,6 @@
 -   Upgrade `framer-motion` package to version `^11.15.0` ([#71442](https://github.com/WordPress/gutenberg/pull/71442)).
 -   Display names for Context providers [#71208](https://github.com/WordPress/gutenberg/pull/71208).
 
-
 ## 30.2.0 (2025-08-20)
 
 ### Bug Fixes
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
@@ -31,11 +31,19 @@
 	overflow: hidden;
 	// Have the content element fill the vertical space yet not overflow.
 	display: flex;
+	color: $gray-900;
 	// Animate the modal frame/contents appearing on the page.
 	animation-name: components-modal__appear-animation;
 	animation-fill-mode: forwards;
 	animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
 
+	// Ensure all headings use the proper editor text color, overriding wp-admin common.css
+	h1,
+	h2,
+	h3 {
+		color: $gray-900;
+	}
+
 	@media not (prefers-reduced-motion) {
 		animation-duration: var(--modal-frame-animation-duration);
 	}
