diff --git a/regression-test/src/app/custom-icons/page.tsx b/regression-test/src/app/custom-icons/page.tsx
index 9d9b5708fe..d296e5943f 100644
--- a/regression-test/src/app/custom-icons/page.tsx
+++ b/regression-test/src/app/custom-icons/page.tsx
@@ -97,7 +97,7 @@ function IconGrid({
           <Icon size={size} color={color} title={name} />
           <span
             style={{ fontSize: '15px' }}
-            className="text-gray-500 text-center leading-tight"
+            className="text-center leading-tight"
           >
             {name.replace('InstUIIcon_', '')}
           </span>
@@ -121,7 +121,7 @@ function SizeRow({
       {SIZES.map((size) => (
         <div key={size} className="flex flex-col items-center gap-1 p-1">
           <Icon size={size} color={color} title={name} />
-          <span style={{ fontSize: '15px' }} className="text-gray-500">
+          <span style={{ fontSize: '15px' }} className="">
             {size}
           </span>
         </div>
@@ -132,7 +132,7 @@ function SizeRow({
 
 function SectionHeader({ children }: { children: React.ReactNode }) {
   return (
-    <p className="text-xs font-bold mt-7 mb-2 pb-1 border-b border-gray-300 text-gray-700">
+    <p className="text-xs font-bold mt-7 mb-2 pb-1 border-b border-gray-300">
       {children}
     </p>
   )
diff --git a/regression-test/src/app/layout.tsx b/regression-test/src/app/layout.tsx
index 19a49e4066..bf0f2d3cdd 100644
--- a/regression-test/src/app/layout.tsx
+++ b/regression-test/src/app/layout.tsx
@@ -87,6 +87,12 @@ export default function RootLayout({
       ? newTheme.semantics(newTheme.primitives)
       : newTheme?.semantics
   const pageBackground = semantics?.color?.background?.page ?? 'transparent'
+  // Pair the surface with the theme's own text color. Painting only the
+  // background leaves inherited text at its default dark value, which on the
+  // dark theme's near-black surface is a serious color-contrast violation for
+  // every plain label on these pages and for any component using
+  // `color="inherit"`.
+  const pageColor = semantics?.color?.text?.base ?? 'inherit'
 
   return (
     // we need to make a new Map to reset counting on the server side
@@ -94,7 +100,7 @@ export default function RootLayout({
     <html
       lang="en"
       data-theme={themeKey}
-      style={{ background: pageBackground }}
+      style={{ background: pageBackground, color: pageColor }}
     >
       <head>
         <title>Component visual and regression test suite</title>
@@ -111,7 +117,11 @@ export default function RootLayout({
             in the captured baselines. */}
         <body
           className={inter.className}
-          style={{ background: pageBackground, minHeight: '100vh' }}
+          style={{
+            background: pageBackground,
+            color: pageColor,
+            minHeight: '100vh'
+          }}
         >
           {children}
         </body>
diff --git a/regression-test/src/app/small-components/page.tsx b/regression-test/src/app/small-components/page.tsx
index 38d07a9cad..be8618fd63 100644
--- a/regression-test/src/app/small-components/page.tsx
+++ b/regression-test/src/app/small-components/page.tsx
@@ -121,7 +121,7 @@ export default function SmallComponentsPage() {
         <Text variant="contentImportant"> contentImportant </Text>
       </div>
       <div>
-        <span style={{ color: '#AA0000' }}>
+        <span style={{ color: '#AA0000', background: '#ffffff' }}>
           <Text color="inherit"> inherit </Text>
         </span>
         <Text variant="contentQuote"> contentQuote </Text>
@@ -138,10 +138,14 @@ export default function SmallComponentsPage() {
         <Text color="warning">I&#39;m warning text</Text>
         <Text color="danger">I&#39;m danger text</Text>
         <Text color="ai-highlight">I&#39;m an ai-highlight text</Text>
-        <Text color="primary-inverse">I&#39;m primary-inverse text</Text>
+        <span style={{ background: '#1c222b' }}>
+          <Text color="primary-inverse">I&#39;m primary-inverse text</Text>
+        </span>
       </div>
       <div>
-        <Text color="secondary-inverse">I&#39;m secondary-inverse text</Text>
+        <span style={{ background: '#1c222b' }}>
+          <Text color="secondary-inverse">I&#39;m secondary-inverse text</Text>
+        </span>
         <Text color="primary-on">I&#39;m primary-on text</Text>
         <Text color="secondary-on">I&#39;m secondary-on text</Text>
       </div>
diff --git a/regression-test/src/app/tooltip/page.tsx b/regression-test/src/app/tooltip/page.tsx
index d36f4523f5..05053d2c42 100644
--- a/regression-test/src/app/tooltip/page.tsx
+++ b/regression-test/src/app/tooltip/page.tsx
@@ -145,7 +145,14 @@ export default function TooltipPage() {
       <Flex.Item>Flex Three</Flex.Item>
     </Flex>,
     <FormField id="foo" label="This is a FormField" width="200px">
-      <input style={{ display: 'block', width: '100%' }} />
+      <input
+        style={{
+          display: 'block',
+          width: '100%',
+          color: '#273540',
+          background: '#ffffff'
+        }}
+      />
     </FormField>,
     <Heading>Default Heading</Heading>,
     <IconButton screenReaderLabel="Add User">
