[PR feedback] Extract WCAG 4.5 ratio const to shared export

elastic · Sep 13, 2022 · 617dd30 · 617dd30
1 parent 8d572eb
commit 617dd30
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
@@ -24,6 +24,7 @@ import {
   euiPaletteColorBlindBehindText,
   getSecureRelForTarget,
   isColorDark,
+  wcagContrastMin,
 } from '../../services';
 import { EuiInnerText } from '../inner_text';
 import { EuiIcon, IconType } from '../icon';
@@ -149,8 +150,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
     };
 
     let textColor = null;
-    const wcagContrastBase = 4.5; // WCAG AA contrast level
-    let wcagContrast = null;
+    let contrastRatio = null;
     let colorHex = null;
 
     try {
@@ -176,17 +176,17 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
         textColor = setTextColor(euiTheme, color);
 
         // Check the contrast
-        wcagContrast = getColorContrast(textColor, color);
+        contrastRatio = getColorContrast(textColor, color);
 
-        if (wcagContrast < wcagContrastBase) {
+        if (contrastRatio < wcagContrastMin) {
           // It's low contrast, so lets show a warning in the console
           console.warn(
             'Warning: ',
             color,
             ' badge has low contrast of ',
-            wcagContrast.toFixed(2),
+            contrastRatio.toFixed(2),
             '. Should be above ',
-            wcagContrastBase,
+            wcagContrastMin,
             '.'
           );
         }

diff --git a/src/services/color/contrast.ts b/src/services/color/contrast.ts
@@ -10,6 +10,8 @@ import chroma from 'chroma-js';
 import { shade, tint, lightness as getLightness } from './manipulation';
 import { getOn } from '../theme/utils';
 
+export const wcagContrastMin = 4.5; // WCAG AA minimum contrast ratio for normal (non-large) text
+
 /**
  * Creates a new color that meets or exceeds WCAG level AA
  * @param foreground - Color to manipulate

diff --git a/src/services/index.ts b/src/services/index.ts
@@ -69,6 +69,7 @@ export {
   lightness,
   makeHighContrastColor,
   makeDisabledContrastColor,
+  wcagContrastMin,
 } from './color';
 
 export type { EuiSetColorMethod } from './color_picker';