Create requiresLightText util (#311)

* Create requiresLightText util

* Add CHANGELOG entry

* Add review feedback

CHANGELOG.md

@@ -1,5 +1,6 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `requiresLightText` color util [(#311)](https://github.com/elastic/eui/pull/311)
 - EuiButton, EuiButtonEmpty and EuiButtonIcon can now take an `href` [(#316)](https://github.com/elastic/eui/pull/316)
 
 **Bug fixes**

src/services/colors/index.js

@@ -0,0 +1,2 @@
+export { isColorDark } from './is_color_dark';
+export { VISUALIZATION_COLORS } from './visualization_colors';

src/services/colors/is_color_dark.js

@@ -0,0 +1,23 @@
+/**
+ * This function calculates if the specified color is "dark", which usually means
+ * you need light text if you use it as a background color to fulfill WCAG contrast
+ * requirement.
+ * The color must be specified via its red, green and blue value in the range of
+ * 0 to 255.
+ * The formula is based on this Stackoverflow answer: https://stackoverflow.com/a/3943023
+ * which itself is based upon the WCAG recommendation for color contrast.
+ *
+ * @param {number} red The red component in the range 0 to 255
+ * @param {number} green The green component in the range 0 to 255
+ * @param {number} blue The blue component in the range 0 to 255
+ * @returns {boolean} True if the color is dark, false otherwise.
+ */
+function isColorDark(red, green, blue) {
+  const [r, g, b] = [red, green, blue]
+    .map(c => c / 255.0)
+    .map(c => c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  return luminance <= 0.179;
+}
+
+export { isColorDark };

src/services/colors/is_color_dark.test.js

@@ -0,0 +1,37 @@
+import { isColorDark } from './is_color_dark';
+
+describe('isColorDark', () => {
+
+  const DARK_COLORS = [
+    [0, 104, 55],
+    [165, 0, 38],
+    [0, 0, 0],
+    [219, 19, 116],
+    [73, 0, 146],
+    [70, 26, 10],
+    [146, 0, 0]
+  ];
+
+  const LIGHT_COLORS = [
+    [191, 161, 128],
+    [249, 133, 16],
+    [0, 179, 164],
+    [212, 157, 170],
+    [255, 255, 255],
+    [254, 182, 219],
+    [230, 194, 32]
+  ];
+
+  DARK_COLORS.forEach(color => {
+    it(`should return true for dark color rgb(${color.join(', ')})`, () => {
+      expect(isColorDark(...color)).toBe(true);
+    });
+  });
+
+  LIGHT_COLORS.forEach(color => {
+    it(`should return false for light color rgb(${color.join(', ')})`, () => {
+      expect(isColorDark(...color)).toBe(false);
+    });
+  });
+
+});

src/services/index.js

@@ -14,6 +14,10 @@ export {
   RIGHT_ALIGNMENT,
 } from './alignment';
 
+export {
+  isColorDark
+} from './colors';
+
 export {
   Pager,
 } from './paging';