@kcuf/mere-color
Version:
Mere color utils for generating, manipulation, a11y purposes.
36 lines (35 loc) • 1.67 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = a11yReadableColor;
var _a11yContrast = _interopRequireDefault(require("./a11y-contrast"));
var _a11yLuminance = _interopRequireDefault(require("./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).
*/
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 = (0, _a11yLuminance.default)(bgc) > 0.179;
var readableColor = bgcIsLight ? whenBgLight : whenBgDark;
if (!strict || (0, _a11yContrast.default)(bgc, readableColor) >= 4.5) {
return readableColor;
}
return bgcIsLight ? DEFAULT_ON_LIGHT : DEFAULT_ON_DARK;
}