fix: ensure dashboard card text has accessible contrast

Author: tifpham021

lib/theme.ts

@@ -28,6 +28,7 @@ export const FONT_FAMILY_VARIABLE_BY_THEME_FONT = {
 
 const LIGHT_BRAND_FOREGROUND = "#FFFFFF";
 const DARK_BRAND_FOREGROUND = "#000000";
+const FIXED_CARD_SURFACE = "#FFFFFF";
 
 export const DEFAULT_APP_THEME = {
   primaryColor: "#FC5B43",
@@ -156,6 +157,17 @@ export function getAccessibleBrandForeground(brandColor: string): string {
     : DARK_BRAND_FOREGROUND;
 }
 
+function getAccessibleSurfaceText(
+  preferredTextColor: string,
+  surfaceColor: string,
+): string {
+  if (getContrastRatio(preferredTextColor, surfaceColor) >= 4.5) {
+    return preferredTextColor;
+  }
+
+  return getAccessibleBrandForeground(surfaceColor);
+}
+
 function resolveColor(value: string | undefined, fallback: string): string {
   return value && isHexColor(value) ? value : fallback;
 }
@@ -246,7 +258,13 @@ export function getOrganizationThemeCssVariables(
     // organization's page colors without changing an unconfigured org's
     // current appearance.
     variables["--color-app-shell-bg"] = theme.backgroundColor;
-    variables["--color-app-strong-text"] = theme.textColor;
+    // Dashboard cards keep their existing white surface. Use the configured
+    // text color when it is readable there, otherwise choose an AA-safe
+    // foreground so light-on-dark page themes do not become white-on-white.
+    variables["--color-app-strong-text"] = getAccessibleSurfaceText(
+      theme.textColor,
+      FIXED_CARD_SURFACE,
+    );
     variables["--color-navbar-bg"] = theme.backgroundColor;
     variables["--color-mobile-navbar-bg"] = theme.backgroundColor;
     variables["--color-media-page-bg"] = theme.backgroundColor;

tests/e2e/organization-theme.spec.ts

@@ -161,4 +161,40 @@ test.describe("Organization theme", () => {
     await expect(saveButton).toHaveCSS("background-color", "rgb(252, 91, 67)");
     await expect(saveButton).toHaveCSS("border-radius", "2.5px");
   });
+
+  test("keeps fixed white dashboard cards readable with a dark page theme", async ({
+    page,
+  }) => {
+    const slug = `dark-theme-${Date.now()}-${Math.floor(Math.random() * 100000)}`;
+    const { org, baseUrl } = await createThemedAdminSession(page, slug);
+
+    await OrganizationConfigService.setConfig(
+      org.id,
+      OrganizationConfigKey.BackgroundColor,
+      "#111111",
+    );
+    await OrganizationConfigService.setConfig(
+      org.id,
+      OrganizationConfigKey.TextColor,
+      "#FFFFFF",
+    );
+
+    await page.goto(baseUrl);
+
+    const pageHeading = page.getByRole("heading", {
+      name: "Admin Dashboard",
+      level: 1,
+    });
+    await expect(pageHeading).toHaveCSS("color", "rgb(255, 255, 255)");
+
+    const cardHeading = page.getByRole("heading", {
+      name: "Events",
+      level: 3,
+    });
+    await expect(cardHeading).toHaveCSS("color", "rgb(0, 0, 0)");
+    await expect(cardHeading.locator("..")).toHaveCSS(
+      "background-color",
+      "rgb(255, 255, 255)",
+    );
+  });
 });

tests/unit/lib/theme.test.ts

@@ -134,4 +134,17 @@ describe("getOrganizationThemeCssVariables", () => {
       "color-mix(in oklch, #5C218C 40%, #FFFEF1)",
     );
   });
+
+  it("keeps fixed white dashboard cards readable for a dark page theme", () => {
+    const variables = getOrganizationThemeCssVariables({
+      [OrganizationConfigKey.BackgroundColor]: "#111111",
+      [OrganizationConfigKey.TextColor]: "#FFFFFF",
+    });
+
+    expect(variables["--color-page-text"]).toBe("#FFFFFF");
+    expect(variables["--color-app-strong-text"]).toBe("#000000");
+    expect(
+      getContrastRatio(variables["--color-app-strong-text"], "#FFFFFF"),
+    ).toBeGreaterThanOrEqual(4.5);
+  });
 });