@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
40 lines • 6.75 kB
JavaScript
import { Injectable } from '@angular/core';
import { ThemeColor } from '../../../services/color/index';
import * as i0 from "@angular/core";
export class ContrastService {
/**
* Calculate the contract ratio between two colors.
* This uses the official WCAG Color Contrast Ratio
* Algorithm: https://www.w3.org/TR/WCAG20-TECHS/G17.html
*/
getContrastColor(backgroundColor, lightColor, darkColor) {
// get a ThemeColor from the ColorPickerColor
const themeColor = ThemeColor.parse(backgroundColor.toHex());
const background = this.getLuminance(themeColor);
const light = this.getLuminance(lightColor);
const dark = this.getLuminance(darkColor);
// determine the contrast for both black and white
const whiteContrast = (light + 0.05) / (background + 0.05);
const blackContrast = (background + 0.05) / (dark + 0.05);
// return the color with the most contrast ratio
return blackContrast > whiteContrast ? darkColor : lightColor;
}
getLuminance(color) {
// normalize the colors
let r = +color.getRed() / 255;
let g = +color.getGreen() / 255;
let b = +color.getBlue() / 255;
// calculate the value required for each color component
r = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
g = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
b = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
// return the luminance
return (0.2126 * r) + (0.7152 * g) + (0.0722 * b);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ContrastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ContrastService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ContrastService, decorators: [{
type: Injectable
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udHJhc3Quc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9kaXJlY3RpdmVzL2FjY2Vzc2liaWxpdHkvY29udHJhc3QtcmF0aW8vY29udHJhc3Quc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQzs7QUFHM0QsTUFBTSxPQUFPLGVBQWU7SUFDeEI7Ozs7T0FJRztJQUNILGdCQUFnQixDQUFDLGVBQTJCLEVBQUUsVUFBc0IsRUFBRSxTQUFxQjtRQUN2Riw2Q0FBNkM7UUFDN0MsTUFBTSxVQUFVLEdBQUcsVUFBVSxDQUFDLEtBQUssQ0FBQyxlQUFlLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUU3RCxNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ2pELE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDNUMsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUUxQyxrREFBa0Q7UUFDbEQsTUFBTSxhQUFhLEdBQUcsQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLENBQUM7UUFDM0QsTUFBTSxhQUFhLEdBQUcsQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLENBQUM7UUFFMUQsZ0RBQWdEO1FBQ2hELE9BQU8sYUFBYSxHQUFHLGFBQWEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUM7SUFDbEUsQ0FBQztJQUVPLFlBQVksQ0FBQyxLQUFpQjtRQUVsQyx1QkFBdUI7UUFDdkIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsTUFBTSxFQUFFLEdBQUcsR0FBRyxDQUFDO1FBQzlCLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLFFBQVEsRUFBRSxHQUFHLEdBQUcsQ0FBQztRQUNoQyxJQUFJLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxPQUFPLEVBQUUsR0FBRyxHQUFHLENBQUM7UUFFL0Isd0RBQXdEO1FBQ3hELENBQUMsR0FBRyxDQUFDLElBQUksT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxHQUFHLEtBQUssRUFBRSxHQUFHLENBQUMsQ0FBQztRQUNsRSxDQUFDLEdBQUcsQ0FBQyxJQUFJLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxLQUFLLENBQUMsR0FBRyxLQUFLLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFDbEUsQ0FBQyxHQUFHLENBQUMsSUFBSSxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLEdBQUcsS0FBSyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBRWxFLHVCQUF1QjtRQUN2QixPQUFPLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxHQUFHLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxHQUFHLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO0lBQ3RELENBQUM7K0dBcENRLGVBQWU7bUhBQWYsZUFBZTs7NEZBQWYsZUFBZTtrQkFEM0IsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFRoZW1lQ29sb3IgfSBmcm9tICcuLi8uLi8uLi9zZXJ2aWNlcy9jb2xvci9pbmRleCc7XG5cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBDb250cmFzdFNlcnZpY2Uge1xuICAgIC8qKlxuICAgICAqIENhbGN1bGF0ZSB0aGUgY29udHJhY3QgcmF0aW8gYmV0d2VlbiB0d28gY29sb3JzLlxuICAgICAqIFRoaXMgdXNlcyB0aGUgb2ZmaWNpYWwgV0NBRyBDb2xvciBDb250cmFzdCBSYXRpb1xuICAgICAqIEFsZ29yaXRobTogaHR0cHM6Ly93d3cudzMub3JnL1RSL1dDQUcyMC1URUNIUy9HMTcuaHRtbFxuICAgICAqL1xuICAgIGdldENvbnRyYXN0Q29sb3IoYmFja2dyb3VuZENvbG9yOiBUaGVtZUNvbG9yLCBsaWdodENvbG9yOiBUaGVtZUNvbG9yLCBkYXJrQ29sb3I6IFRoZW1lQ29sb3IpOiBUaGVtZUNvbG9yIHtcbiAgICAgICAgLy8gZ2V0IGEgVGhlbWVDb2xvciBmcm9tIHRoZSBDb2xvclBpY2tlckNvbG9yXG4gICAgICAgIGNvbnN0IHRoZW1lQ29sb3IgPSBUaGVtZUNvbG9yLnBhcnNlKGJhY2tncm91bmRDb2xvci50b0hleCgpKTtcblxuICAgICAgICBjb25zdCBiYWNrZ3JvdW5kID0gdGhpcy5nZXRMdW1pbmFuY2UodGhlbWVDb2xvcik7XG4gICAgICAgIGNvbnN0IGxpZ2h0ID0gdGhpcy5nZXRMdW1pbmFuY2UobGlnaHRDb2xvcik7XG4gICAgICAgIGNvbnN0IGRhcmsgPSB0aGlzLmdldEx1bWluYW5jZShkYXJrQ29sb3IpO1xuXG4gICAgICAgIC8vIGRldGVybWluZSB0aGUgY29udHJhc3QgZm9yIGJvdGggYmxhY2sgYW5kIHdoaXRlXG4gICAgICAgIGNvbnN0IHdoaXRlQ29udHJhc3QgPSAobGlnaHQgKyAwLjA1KSAvIChiYWNrZ3JvdW5kICsgMC4wNSk7XG4gICAgICAgIGNvbnN0IGJsYWNrQ29udHJhc3QgPSAoYmFja2dyb3VuZCArIDAuMDUpIC8gKGRhcmsgKyAwLjA1KTtcblxuICAgICAgICAvLyByZXR1cm4gdGhlIGNvbG9yIHdpdGggdGhlIG1vc3QgY29udHJhc3QgcmF0aW9cbiAgICAgICAgcmV0dXJuIGJsYWNrQ29udHJhc3QgPiB3aGl0ZUNvbnRyYXN0ID8gZGFya0NvbG9yIDogbGlnaHRDb2xvcjtcbiAgICB9XG5cbiAgICBwcml2YXRlIGdldEx1bWluYW5jZShjb2xvcjogVGhlbWVDb2xvcik6IG51bWJlciB7XG5cbiAgICAgICAgLy8gbm9ybWFsaXplIHRoZSBjb2xvcnNcbiAgICAgICAgbGV0IHIgPSArY29sb3IuZ2V0UmVkKCkgLyAyNTU7XG4gICAgICAgIGxldCBnID0gK2NvbG9yLmdldEdyZWVuKCkgLyAyNTU7XG4gICAgICAgIGxldCBiID0gK2NvbG9yLmdldEJsdWUoKSAvIDI1NTtcblxuICAgICAgICAvLyBjYWxjdWxhdGUgdGhlIHZhbHVlIHJlcXVpcmVkIGZvciBlYWNoIGNvbG9yIGNvbXBvbmVudFxuICAgICAgICByID0gciA8PSAwLjAzOTI4ID8gciAvIDEyLjkyIDogTWF0aC5wb3coKHIgKyAwLjA1NSkgLyAxLjA1NSwgMi40KTtcbiAgICAgICAgZyA9IGcgPD0gMC4wMzkyOCA/IGcgLyAxMi45MiA6IE1hdGgucG93KChnICsgMC4wNTUpIC8gMS4wNTUsIDIuNCk7XG4gICAgICAgIGIgPSBiIDw9IDAuMDM5MjggPyBiIC8gMTIuOTIgOiBNYXRoLnBvdygoYiArIDAuMDU1KSAvIDEuMDU1LCAyLjQpO1xuXG4gICAgICAgIC8vIHJldHVybiB0aGUgbHVtaW5hbmNlXG4gICAgICAgIHJldHVybiAoMC4yMTI2ICogcikgKyAoMC43MTUyICogZykgKyAoMC4wNzIyICogYik7XG4gICAgfVxufSJdfQ==