fix(providers): badge initials stay readable on light accent colors

apps/mobile/src/components/ProviderIcon.tsx

@@ -1,7 +1,11 @@
 import { Image } from "expo-image";
 import { Defs, LinearGradient, Path, Stop, Svg } from "react-native-svg";
 import { View } from "react-native";
-import { providerInstanceInitials } from "@t3tools/client-runtime/state/provider-instance-display";
+import {
+  normalizeProviderAccentColor,
+  providerAccentForegroundColor,
+  providerInstanceInitials,
+} from "@t3tools/client-runtime/state/provider-instance-display";
 import { useId, useState } from "react";
 import { resolveOfficialAcpRegistryIconUrl } from "@t3tools/contracts";
 import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
@@ -156,6 +160,7 @@ export function ProviderInstanceIcon(props: {
   readonly showBadge?: boolean;
   readonly surfaceColor: string;
 }) {
+  const accentColor = normalizeProviderAccentColor(props.accentColor);
   return (
     <View style={{ position: "relative" }}>
       <View style={{ opacity: 0.6 }}>
@@ -169,26 +174,26 @@ export function ProviderInstanceIcon(props: {
           style={{ position: "absolute", right: -3, bottom: -3, width: 32, alignItems: "flex-end" }}
         >
           <View
-            className={props.accentColor ? undefined : "bg-card"}
+            className={accentColor ? undefined : "bg-card"}
             style={{
               height: 12,
               minWidth: 12,
               paddingHorizontal: 2,
               borderRadius: 999,
               borderWidth: 1,
               borderColor: props.surfaceColor,
-              backgroundColor: props.accentColor,
+              backgroundColor: accentColor,
               alignItems: "center",
               justifyContent: "center",
             }}
           >
             <Text
-              className={props.accentColor ? undefined : "text-foreground-muted"}
+              className={accentColor ? undefined : "text-foreground-muted"}
               style={{
                 fontSize: 7,
                 fontWeight: "600",
                 lineHeight: 9,
-                color: props.accentColor ? "#ffffff" : undefined,
+                color: accentColor ? providerAccentForegroundColor(accentColor) : undefined,
               }}
             >
               {providerInstanceInitials(props.displayName)}

apps/web/src/components/chat/ProviderInstanceIcon.tsx

@@ -1,6 +1,10 @@
 import { type CSSProperties, memo } from "react";
 
-import { providerInstanceInitials } from "@t3tools/client-runtime/state/provider-instance-display";
+import {
+  normalizeProviderAccentColor,
+  providerAccentForegroundColor,
+  providerInstanceInitials,
+} from "@t3tools/client-runtime/state/provider-instance-display";
 
 import { ProviderDriverKind } from "@t3tools/contracts";
 import { AntigravityIcon, ClaudeAI, Icon, OpenAI } from "../Icons";
@@ -71,8 +75,12 @@ export const ProviderInstanceIcon = memo(function ProviderInstanceIcon(props: {
   const Icon = PROVIDER_ICON_BY_PROVIDER[props.driverKind] ?? null;
   const packageIcon = providerClients.get(props.driverKind)?.icon;
   const indicatorBackground = props.indicatorBackground ?? "var(--card)";
-  const accentStyle = props.accentColor
-    ? ({ "--provider-accent": props.accentColor } as CSSProperties)
+  const accentColor = normalizeProviderAccentColor(props.accentColor);
+  const accentStyle = accentColor
+    ? ({
+        "--provider-accent": accentColor,
+        "--provider-accent-foreground": providerAccentForegroundColor(accentColor),
+      } as CSSProperties)
     : undefined;
   const badgeContent = props.badgeContent ?? "initials";
   const iconClassName = cn(props.size === "compact" && "size-3.5", props.iconClassName);
@@ -90,7 +98,7 @@ export const ProviderInstanceIcon = memo(function ProviderInstanceIcon(props: {
         props.className,
       )}
       style={accentStyle}
-      data-provider-accent-color={props.accentColor}
+      data-provider-accent-color={accentColor}
     >
       {isAcpRegistry ? (
         <AcpRegistryAgentIcon
@@ -125,8 +133,8 @@ export const ProviderInstanceIcon = memo(function ProviderInstanceIcon(props: {
         <span
           className={cn(
             "pointer-events-none absolute right-0 bottom-0 z-10 flex h-3.5 min-w-3.5 items-center justify-center rounded-full border px-0.5 text-4xs font-semibold leading-none shadow-sm",
-            props.accentColor
-              ? "bg-(--provider-accent) text-white"
+            accentColor
+              ? "bg-(--provider-accent) text-(--provider-accent-foreground)"
               : "bg-card text-muted-foreground",
             props.size === "compact" &&
               "right-[-0.1875rem] bottom-[-0.1875rem] h-3 min-w-3 px-0.5 text-5xs",

packages/client-runtime/src/state/providerInstanceDisplay.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from "vite-plus/test";
 
 import {
   normalizeProviderAccentColor,
+  providerAccentForegroundColor,
   providerInstanceInitials,
   resolveProviderInstanceDisplayName,
   shouldShowInstanceBadge,
@@ -89,6 +90,16 @@ describe("normalizeProviderAccentColor", () => {
   });
 });
 
+describe("providerAccentForegroundColor", () => {
+  it.each([
+    ["#b5f23d", "#000000"],
+    ["#2563eb", "#ffffff"],
+    ["#777777", "#000000"],
+  ])("chooses the higher WCAG contrast foreground for %s", (accent, foreground) => {
+    expect(providerAccentForegroundColor(accent)).toBe(foreground);
+  });
+});
+
 describe("shouldShowInstanceBadge", () => {
   it("hides badges for distinct ACP agents sharing the registry driver", () => {
     const mistral = { driverKind: acpRegistry, acpRegistryAgentId: "mistral-vibe", enabled: true };

packages/client-runtime/src/state/providerInstanceDisplay.ts

@@ -42,6 +42,18 @@ export function normalizeProviderAccentColor(value: string | undefined): string
   return /^#[0-9a-fA-F]{6}$/u.test(trimmed) ? trimmed : undefined;
 }
 
+export function providerAccentForegroundColor(accentColor: string) {
+  const linearChannel = (offset: number) => {
+    const value = Number.parseInt(accentColor.slice(offset, offset + 2), 16) / 255;
+    return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+  };
+  const luminance =
+    0.2126 * linearChannel(1) + 0.7152 * linearChannel(3) + 0.0722 * linearChannel(5);
+  const blackContrast = (luminance + 0.05) / 0.05;
+  const whiteContrast = 1.05 / (luminance + 0.05);
+  return blackContrast >= whiteContrast ? "#000000" : "#ffffff";
+}
+
 export function shouldShowInstanceBadge(
   entry: {
     readonly driverKind: ProviderDriverKind;