fix: recalibrate getTextColor function (#983)

Ensure that getTextColor is choosing colors with better contrast.

packages/shared/styles/color.ts

@@ -81,38 +81,48 @@ export const getTextColor = (
  darkTextColor,
  lightTextColor
 ): string => {
- // Convert color from hex to RGB.
- const getRGB = (c: string | number): number => {
- return parseInt(c as string, 16) || (c as number);
- };
-
- // Convert to sRGB and apply gamma correction.
- const getsRGB = (c: string): number => {
- const rgb = getRGB(c) / 255;
- return rgb <= 0.03928 ? rgb / 12.92 : Math.pow((rgb + 0.055) / 1.055, 2.4);
- };
-
- // Calculate relative luminance.
- const getLuminance = (hexColor: string): number => {
- return (
- 0.2126 * getsRGB(hexColor.slice(1, 3)) +
- 0.7152 * getsRGB(hexColor.slice(3, 5)) +
- 0.0722 * getsRGB(hexColor.slice(5, 7))
- );
- };
-
- // Use relative luminance to compare color contrast.
  const getContrast = (f: string, b: string): number => {
+ // Use relative luminance to compare color contrast.
+ const getLuminance = (hexColor: string): number => {
+ // Convert to sRGB and apply gamma correction.
+ const getRGB = (c: string | number): number =>
+ parseInt(c as string, 16) || (c as number);
+ const getsRGB = (c: string): number => {
+ const rgb = getRGB(c) / 255;
+ return rgb <= 0.03928
+ ? rgb / 12.92
+ : Math.pow((rgb + 0.055) / 1.055, 2.4);
+ };
+
+ return (
+ 0.2126 * getsRGB(hexColor.slice(1, 3)) +
+ 0.7152 * getsRGB(hexColor.slice(3, 5)) +
+ 0.0722 * getsRGB(hexColor.slice(5, 7))
+ );
+ };
+
  const L1 = getLuminance(f);
  const L2 = getLuminance(b);
- // Ratio formula is defined by WCAG guidelines
  return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
  };
 
- const LIGHT_COLOR = getContrast(bgColor, lightTextColor);
- const DARK_COLOR = getContrast(bgColor, darkTextColor);
+ // WCAG 2.2 color contrast standard for normal text.
+ const MIN_NORMAL_CONTRAST = 4.5;
+
+ const contrastWithDarkText = getContrast(bgColor, darkTextColor);
+ const contrastWithLightText = getContrast(bgColor, lightTextColor);
+
+ if (
+ contrastWithLightText >= MIN_NORMAL_CONTRAST &&
+ contrastWithDarkText < MIN_NORMAL_CONTRAST
+ ) {
+ return lightTextColor;
+ }
+
  // Determine which color has the highest contrast ratio and return that color.
- return LIGHT_COLOR > DARK_COLOR ? lightTextColor : darkTextColor;
+ return contrastWithDarkText > MIN_NORMAL_CONTRAST
+ ? darkTextColor
+ : lightTextColor;
 };
 
 // Assumes we always want our default hover colors to be lower