@rific/auto-paper 0.13.2 → 0.13.4

package/README.md

@@ -413,7 +413,7 @@ function SettingsScreen() {
 
 ### `Appbar`
 
-A thin wrapper around `react-native-paper`'s `Appbar` that automatically syncs `StatusBar` background color and bar style to the current theme surface color (no `StatusBar` under `<Provider statusBar={false}>`).
+A thin wrapper around `react-native-paper`'s `Appbar` that automatically syncs the `StatusBar` bar style to the current theme (React Native 0.88 removed `StatusBar`'s Android-only `backgroundColor`, which edge-to-edge already ignored, so 0.13.3 stopped passing it) (no `StatusBar` under `<Provider statusBar={false}>`).
 
 ```tsx
 import { Appbar } from '@rific/auto-paper'
@@ -648,7 +648,7 @@ const appearance = useSelector((state: RootState) => selectThemeAppearance(state
 ### Color utilities
 
 ```ts
-import { getTriadicPalette, getThirdColor, getBlendedColor, getColorRoles, getContrastColor, isDarkColor, getRgb, getHex, getTonalColor, getTintTextColor, resolveSeedColor } from '@rific/auto-paper'
+import { getTriadicPalette, getThirdColor, getBlendedColor, getColorRoles, getContrastColor, getContrastRatio, getLuminance, isDarkColor, getRgb, getHex, getTonalColor, getTintTextColor, resolveSeedColor } from '@rific/auto-paper'
 import type { ColorHarmony, TriadicPalette } from '@rific/auto-paper'
 
 getTriadicPalette('#6750a4')                          // split-complementary (default)
@@ -661,7 +661,9 @@ getTriadicPalette('#6750a4', 'double-split')
 getThirdColor('#e53935', '#1e88e5')          // → '#59e52a' (hue maximally distant from both inputs; s/l averaged from both)
 
 getBlendedColor('#ff0000', '#0000ff', 0.5)   // → '#800080'
-getColorRoles('#6750a4', '#fffbfe')          // → { color, onColor, container, onContainer }: the MD3 color/onColor/container/onContainer math, generalized (this is what useComputedTheme uses internally for every role)
+getColorRoles('#6750a4', '#fffbfe')          // → { color, onColor, container, onContainer }: the MD3 color/onColor/container/onContainer math, generalized (this is what useComputedTheme uses internally for every role). onColor is light while light text reads on the color at 2.5:1, dark below that
+getContrastRatio('#767676', '#ffffff')       // → 4.54 (WCAG 2 contrast ratio, 1 to 21, either order)
+getLuminance('#ffffff')                      // → 1 (WCAG 2 relative luminance, 0 for black)
 getContrastColor('#6750a4')                  // → '#ffffff' (black/white pick for content sitting on a fully saturated fill)
 isDarkColor('#6750a4')                       // → true
 getRgb('coral')                              // → { r: 255, g: 127, b: 80 }

package/dist/index.d.mts

@@ -391,6 +391,9 @@ type ColorRoles = {
 };
 declare const getColorRoles: (base: string, surface: string, containerAlpha?: number) => ColorRoles;
 
+declare const getLuminance: (value: string) => number;
+declare const getContrastRatio: (a: string, b: string) => number;
+
 declare const getHex: (value: string) => string | null;
 
 type RGB = {
@@ -413,4 +416,4 @@ declare const isDarkColor: (value: string) => boolean;
 
 declare const resolveSeedColor: (color: string | TriadicPalette) => string;
 
-export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, FadingScrollView, type FadingScrollViewProps, HarmonyPicker, IconButton, type IconButtonProps, type MaskedViewModule, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SCROLL_FADE_HEIGHT, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeBridgeProps, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useMaskedViewModule, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeBridgeProps, useThemeSettings };
+export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, FadingScrollView, type FadingScrollViewProps, HarmonyPicker, IconButton, type IconButtonProps, type MaskedViewModule, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SCROLL_FADE_HEIGHT, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeBridgeProps, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getContrastRatio, getHex, getLuminance, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useMaskedViewModule, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeBridgeProps, useThemeSettings };

package/dist/index.d.ts

@@ -391,6 +391,9 @@ type ColorRoles = {
 };
 declare const getColorRoles: (base: string, surface: string, containerAlpha?: number) => ColorRoles;
 
+declare const getLuminance: (value: string) => number;
+declare const getContrastRatio: (a: string, b: string) => number;
+
 declare const getHex: (value: string) => string | null;
 
 type RGB = {
@@ -413,4 +416,4 @@ declare const isDarkColor: (value: string) => boolean;
 
 declare const resolveSeedColor: (color: string | TriadicPalette) => string;
 
-export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, FadingScrollView, type FadingScrollViewProps, HarmonyPicker, IconButton, type IconButtonProps, type MaskedViewModule, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SCROLL_FADE_HEIGHT, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeBridgeProps, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useMaskedViewModule, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeBridgeProps, useThemeSettings };
+export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, FadingScrollView, type FadingScrollViewProps, HarmonyPicker, IconButton, type IconButtonProps, type MaskedViewModule, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SCROLL_FADE_HEIGHT, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeBridgeProps, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getContrastRatio, getHex, getLuminance, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useMaskedViewModule, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeBridgeProps, useThemeSettings };

package/dist/index.js

@@ -57,7 +57,9 @@ __export(index_exports, {
   getBlendedColor: () => getBlendedColor,
   getColorRoles: () => getColorRoles,
   getContrastColor: () => getContrastColor,
+  getContrastRatio: () => getContrastRatio,
   getHex: () => getHex,
+  getLuminance: () => getLuminance,
   getRgb: () => getRgb,
   getThirdColor: () => getThirdColor,
   getTintTextColor: () => getTintTextColor,
@@ -353,6 +355,21 @@ var getBlendedColor = (foreground, background, alpha) => {
   return getHex(`rgb(${r}, ${g}, ${b})`) ?? background;
 };
 
+// src/utils/getContrastRatio.ts
+var getLuminance = (value) => {
+  const rgb = getRgb(value);
+  if (!rgb) return 0;
+  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((channel) => {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+var getContrastRatio = (a, b) => {
+  const [lighter, darker] = [getLuminance(a), getLuminance(b)].sort((x, y) => y - x);
+  return (lighter + 0.05) / (darker + 0.05);
+};
+
 // src/utils/getTonalColor.ts
 var getTonalColor = (color, lightness) => {
   const rgb = getRgb(color);
@@ -417,11 +434,13 @@ var isDarkColor = (value) => {
 };
 
 // src/utils/getColorRoles.ts
+var MIN_LIGHT_ON_COLOR_CONTRAST = 2.5;
 var getColorRoles = (base, surface, containerAlpha = 0.15) => {
   const container = getBlendedColor(base, surface, containerAlpha);
+  const lightOnColor = getTonalColor(base, 0.95);
   return {
     color: base,
-    onColor: getTonalColor(base, isDarkColor(base) ? 0.95 : 0.08),
+    onColor: getContrastRatio(lightOnColor, base) >= MIN_LIGHT_ON_COLOR_CONTRAST ? lightOnColor : getTonalColor(base, 0.08),
     container,
     onContainer: getTonalColor(base, isDarkColor(container) ? 0.92 : 0.12)
   };
@@ -628,7 +647,7 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedVie
   }, [theme, onReady]);
   if (!theme) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native_paper2.Provider, { theme, children: [
-    statusBar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
+    statusBar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.StatusBar, { barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBarEnabledContext.Provider, { value: statusBar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MaskedViewModuleContext.Provider, { value: maskedView, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper2.Portal.Host, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) }) }) })
   ] });
 }
@@ -643,7 +662,7 @@ function Header({ style, ...props }) {
   const theme = (0, import_react_native_paper3.useTheme)();
   const statusBar = useStatusBarEnabled();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    statusBar && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.StatusBar, { backgroundColor: theme.colors.surface, barStyle: theme.dark ? "light-content" : "dark-content" }),
+    statusBar && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.StatusBar, { barStyle: theme.dark ? "light-content" : "dark-content" }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper3.Appbar.Header, { ...defaults.AppbarHeader, ...props, style })
   ] });
 }
@@ -1325,7 +1344,9 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   getBlendedColor,
   getColorRoles,
   getContrastColor,
+  getContrastRatio,
   getHex,
+  getLuminance,
   getRgb,
   getThirdColor,
   getTintTextColor,

package/dist/index.mjs

@@ -267,6 +267,21 @@ var getBlendedColor = (foreground, background, alpha) => {
   return getHex(`rgb(${r}, ${g}, ${b})`) ?? background;
 };
 
+// src/utils/getContrastRatio.ts
+var getLuminance = (value) => {
+  const rgb = getRgb(value);
+  if (!rgb) return 0;
+  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((channel) => {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+var getContrastRatio = (a, b) => {
+  const [lighter, darker] = [getLuminance(a), getLuminance(b)].sort((x, y) => y - x);
+  return (lighter + 0.05) / (darker + 0.05);
+};
+
 // src/utils/getTonalColor.ts
 var getTonalColor = (color, lightness) => {
   const rgb = getRgb(color);
@@ -331,11 +346,13 @@ var isDarkColor = (value) => {
 };
 
 // src/utils/getColorRoles.ts
+var MIN_LIGHT_ON_COLOR_CONTRAST = 2.5;
 var getColorRoles = (base, surface, containerAlpha = 0.15) => {
   const container = getBlendedColor(base, surface, containerAlpha);
+  const lightOnColor = getTonalColor(base, 0.95);
   return {
     color: base,
-    onColor: getTonalColor(base, isDarkColor(base) ? 0.95 : 0.08),
+    onColor: getContrastRatio(lightOnColor, base) >= MIN_LIGHT_ON_COLOR_CONTRAST ? lightOnColor : getTonalColor(base, 0.08),
     container,
     onContainer: getTonalColor(base, isDarkColor(container) ? 0.92 : 0.12)
   };
@@ -542,7 +559,7 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedVie
   }, [theme, onReady]);
   if (!theme) return null;
   return /* @__PURE__ */ jsxs(PaperProvider, { theme, children: [
-    statusBar && /* @__PURE__ */ jsx(StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
+    statusBar && /* @__PURE__ */ jsx(StatusBar, { barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
     /* @__PURE__ */ jsx(StatusBarEnabledContext.Provider, { value: statusBar, children: /* @__PURE__ */ jsx(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ jsx(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ jsx(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ jsx(MaskedViewModuleContext.Provider, { value: maskedView, children: /* @__PURE__ */ jsx(Portal.Host, { children: /* @__PURE__ */ jsx(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) }) }) })
   ] });
 }
@@ -557,7 +574,7 @@ function Header({ style, ...props }) {
   const theme = useTheme();
   const statusBar = useStatusBarEnabled();
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    statusBar && /* @__PURE__ */ jsx2(StatusBar2, { backgroundColor: theme.colors.surface, barStyle: theme.dark ? "light-content" : "dark-content" }),
+    statusBar && /* @__PURE__ */ jsx2(StatusBar2, { barStyle: theme.dark ? "light-content" : "dark-content" }),
     /* @__PURE__ */ jsx2(PaperAppbar.Header, { ...defaults.AppbarHeader, ...props, style })
   ] });
 }
@@ -1238,7 +1255,9 @@ export {
   getBlendedColor,
   getColorRoles,
   getContrastColor,
+  getContrastRatio,
   getHex,
+  getLuminance,
   getRgb,
   getThirdColor,
   getTintTextColor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.13.2",
+  "version": "0.13.4",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -69,8 +69,8 @@
   },
   "devDependencies": {
     "@infinitetoken/eslint-config": "0.2.0",
-    "@infinitetoken/jest-config": "^0.4.0",
-    "@infinitetoken/tsconfig": "^0.5.0",
+    "@infinitetoken/jest-config": "^0.5.1",
+    "@infinitetoken/tsconfig": "^0.6.0",
     "@react-native-masked-view/masked-view": "^0.3.2",
     "@reduxjs/toolkit": "^2.0.0",
     "@rific/core": "^0.3.0",
@@ -81,16 +81,16 @@
     "eslint": "^9.39.4",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-native": "^5.0.0",
-    "expo-blur": "^57.0.3",
-    "expo-navigation-bar": "^57.0.3",
+    "expo-blur": "^58.0.3",
+    "expo-navigation-bar": "^58.0.4",
     "jest": "^30.0.0",
     "jest-environment-jsdom": "^30.0.0",
     "prettier": "^3.8.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-native": "^0.86.3",
+    "react-native": "^0.88.0",
     "react-native-paper": "^5.12.0",
-    "react-native-safe-area-context": "^5.5.2",
+    "react-native-safe-area-context": "^5.10.1",
     "tsup": "^8.0.0",
     "typescript": "^6.0.3"
   },

package/src/ThemeProvider.tsx

@@ -109,7 +109,7 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedVie
 
   return (
     <PaperProvider theme={theme}>
-      {statusBar && <StatusBar backgroundColor={theme.colors.background} barStyle={theme.dark ? 'light-content' : 'dark-content'} {...statusBarProps} />}
+      {statusBar && <StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} {...statusBarProps} />}
       <StatusBarEnabledContext.Provider value={statusBar}>
         <PaperDefaultsContext.Provider value={defaults ?? {}}>
           <NavBarContext.Provider value={{ navigationBar, onNavBarChange }}>

package/src/components/Appbar.tsx

@@ -11,7 +11,7 @@ function Header({ style, ...props }: AppbarHeaderProps) {
   const statusBar = useStatusBarEnabled()
   return (
     <>
-      {statusBar && <StatusBar backgroundColor={theme.colors.surface} barStyle={theme.dark ? 'light-content' : 'dark-content'} />}
+      {statusBar && <StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />}
       <PaperAppbar.Header {...defaults.AppbarHeader} {...props} style={style} />
     </>
   )

package/src/index.ts

@@ -43,6 +43,7 @@ export { useThemeSettings } from './useThemeSettings'
 export { getBlendedColor } from './utils/getBlendedColor'
 export type { ColorRoles } from './utils/getColorRoles'
 export { getColorRoles } from './utils/getColorRoles'
+export { getContrastRatio, getLuminance } from './utils/getContrastRatio'
 export { getHex } from './utils/getHex'
 export type { RGB } from './utils/getRgb'
 export { getRgb } from './utils/getRgb'

package/src/utils/getColorRoles.ts

@@ -1,4 +1,5 @@
 import { getBlendedColor } from './getBlendedColor'
+import { getContrastRatio } from './getContrastRatio'
 import { getTonalColor } from './getTonalColor'
 import { isDarkColor } from './isDarkColor'
 
@@ -9,18 +10,28 @@ export type ColorRoles = {
   onContainer: string
 }
 
+// The lowest contrast light text may have on a color before onColor turns dark instead. The fleet's
+// colored buttons have always had light text, and keep it wherever it reads about as well as it does on
+// their reds, blues and greens (2.8 to 3.1:1 for the picker's Red, Blue, Emerald and Coral); only
+// colors light enough that it fades take dark text: the picker's Lime, Amber, Cyan and Sky (Yellow
+// already did). Judging by the color's own darkness alone gave those near-white text that all but
+// vanished (Jay, 2026-10-19: 1.96:1 on a light green Ready button).
+const MIN_LIGHT_ON_COLOR_CONTRAST = 2.5
+
 // The MD3 "color / onColor / container / onContainer" quadruple, generalized from the math
 // useComputedTheme already uses for primary/secondary/tertiary: onColor is tuned to sit on the
-// vivid color itself, container is base blended toward the theme's real surface (so it inherits
+// vivid color itself (light while it reads, MIN_LIGHT_ON_COLOR_CONTRAST, else dark), container is
+// base blended toward the theme's real surface (so it inherits
 // that surface's actual lightness rather than a fixed light/dark guess), and onContainer is tuned
 // against the *computed* container rather than a light/dark assumption, so it stays readable
 // whatever surface color it's handed. onContainer also reads safely directly on `surface` itself
 // (not just on `container`), since container is only lightly blended toward it.
 export const getColorRoles = (base: string, surface: string, containerAlpha = 0.15): ColorRoles => {
   const container = getBlendedColor(base, surface, containerAlpha)
+  const lightOnColor = getTonalColor(base, 0.95)
   return {
     color: base,
-    onColor: getTonalColor(base, isDarkColor(base) ? 0.95 : 0.08),
+    onColor: getContrastRatio(lightOnColor, base) >= MIN_LIGHT_ON_COLOR_CONTRAST ? lightOnColor : getTonalColor(base, 0.08),
     container,
     onContainer: getTonalColor(base, isDarkColor(container) ? 0.92 : 0.12)
   }

package/src/utils/getContrastRatio.ts

@@ -0,0 +1,20 @@
+import { getRgb } from './getRgb'
+
+// WCAG 2's relative luminance (0 for black, 1 for white): the same formula isDarkColor applies.
+export const getLuminance = (value: string): number => {
+  const rgb = getRgb(value)
+  if (!rgb) return 0
+  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((channel) => {
+    const c = channel / 255
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+  })
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+// WCAG 2's contrast ratio between two colors, 1 (identical) to 21 (black on white). Order doesn't matter.
+export const getContrastRatio = (a: string, b: string): number => {
+  const [lighter, darker] = [getLuminance(a), getLuminance(b)].sort((x, y) => y - x)
+  return (lighter + 0.05) / (darker + 0.05)
+}
+
+export default getContrastRatio