@kcuf/mere-color
Version:
Mere color utils for generating, manipulation, a11y purposes.
30 lines • 1.44 kB
JavaScript
import a11yContrast from './a11y-contrast';
import a11yLuminance from './a11y-luminance';
var DEFAULT_ON_LIGHT = '#000';
var DEFAULT_ON_DARK = '#fff';
/**
* Returns black or white (or optional passed colors) for best
* contrast depending on the luminosity of the given color.
* When passing custom return colors, strict mode ensures that the
* return color always meets or exceeds WCAG level AA or greater. If this test
* fails, the default return color (black or white) is returned in place of the
* custom return color. You can optionally turn off strict mode.
*
* Follows [W3C specs for readability](https://www.w3.org/TR/WCAG20-TECHS/G18.html).
*/
export default function a11yReadableColor(bgc) {
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
_ref$whenBgLight = _ref.whenBgLight,
whenBgLight = _ref$whenBgLight === void 0 ? DEFAULT_ON_LIGHT : _ref$whenBgLight,
_ref$whenBgDark = _ref.whenBgDark,
whenBgDark = _ref$whenBgDark === void 0 ? DEFAULT_ON_DARK : _ref$whenBgDark,
_ref$strict = _ref.strict,
strict = _ref$strict === void 0 ? true : _ref$strict;
var bgcIsLight = a11yLuminance(bgc) > 0.179;
var readableColor = bgcIsLight ? whenBgLight : whenBgDark;
if (!strict || a11yContrast(bgc, readableColor) >= 4.5) {
return readableColor;
}
return bgcIsLight ? DEFAULT_ON_LIGHT : DEFAULT_ON_DARK;
}
//# sourceMappingURL=a11y-readable-color.js.map