diff --git a/CHANGELOG.md b/CHANGELOG.md index acd3806ae8a..843b1e78864 100644 --- a/CHANGELOG.md +++ b/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** diff --git a/src/services/colors/index.js b/src/services/colors/index.js new file mode 100644 index 00000000000..09f0df7d5d9 --- /dev/null +++ b/src/services/colors/index.js @@ -0,0 +1,2 @@ +export { isColorDark } from './is_color_dark'; +export { VISUALIZATION_COLORS } from './visualization_colors'; diff --git a/src/services/colors/is_color_dark.js b/src/services/colors/is_color_dark.js new file mode 100644 index 00000000000..e4ecb5a8970 --- /dev/null +++ b/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 }; diff --git a/src/services/colors/is_color_dark.test.js b/src/services/colors/is_color_dark.test.js new file mode 100644 index 00000000000..ba40b4182d2 --- /dev/null +++ b/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); + }); + }); + +}); diff --git a/src/services/index.js b/src/services/index.js index a77970a9a65..15a0ab45434 100644 --- a/src/services/index.js +++ b/src/services/index.js @@ -14,6 +14,10 @@ export { RIGHT_ALIGNMENT, } from './alignment'; +export { + isColorDark +} from './colors'; + export { Pager, } from './paging';