Add custom accessible color generator based on contrast

src/components/Button/Button.style.ts

@@ -1,10 +1,10 @@
 import styled, { css } from 'styled-components';
-import { rgba, rem, tint, shade, em, readableColor } from 'polished';
+import { rgba, rem, tint, shade, em } from 'polished';
 
 import { borderRadii } from './Button.config';
 import { FeaturedIcon } from './FeaturedIcon';
 
-import { a11yColor } from '../../themes';
+import { a11yColor, generateAccessibleTextColor } from '../../themes';
 import { white, black, blue, violet } from '../../color';
 import { core } from '../../tokens';
 
@@ -203,13 +203,12 @@ function deriveButtonColor(customColor, format, theme) {
   let hoverColor: string;
   let activeColor: string;
   let textColor: string;
-
   if (customColor) {
     if (typeof customColor === 'string') {
       color = customColor;
       hoverColor = tint(0.15, color);
       activeColor = shade(0.15, color);
-      textColor = readableColor(color);
+      textColor = generateAccessibleTextColor(color);
     } else if (customColor.color) {
       color = customColor.color;
       hoverColor = customColor.hover
@@ -220,7 +219,7 @@ function deriveButtonColor(customColor, format, theme) {
         : shade(0.15, color);
       textColor = customColor.textColor
         ? customColor.textColor
-        : readableColor(color);
+        : generateAccessibleTextColor(customColor.color);
     }
   } else {
     color = theme.formats[format];

src/themes/index.ts

@@ -1,4 +1,4 @@
-import { rgba } from 'polished';
+import { rgba, getContrast, parseToRgb, toColorString } from 'polished';
 import { grayscale, white, black, slate, blue, red, green } from '../color';
 import { readableColor, lighten, darken, getLuminance, saturate } from 'polished';
 
@@ -104,6 +104,16 @@ export const themes: {
   },
 };
 
+export function generateAccessibleTextColor(backgroundColor) {
+  // Determine the contrast ratio
+  const contrastRatio = getContrast(backgroundColor, readableColor(backgroundColor));
+
+  // Choose a suitable text color based on the contrast ratio
+  const textColor = contrastRatio >= 4.5 ? black : white;
+
+  return textColor;
+}
+
 export function a11yColor(color) {
   return ({ theme }) => (theme.a11y.contrast ? readableColor(lighten(0.1, color)) : readableColor(darken(0.3, color)));
 }