| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- import { TinyColor } from './index.js';
- // Readability Functions
- // ---------------------
- // <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)
- /**
- * AKA `contrast`
- *
- * Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
- */
- export function readability(color1, color2) {
- var c1 = new TinyColor(color1);
- var c2 = new TinyColor(color2);
- return ((Math.max(c1.getLuminance(), c2.getLuminance()) + 0.05) /
- (Math.min(c1.getLuminance(), c2.getLuminance()) + 0.05));
- }
- /**
- * Ensure that foreground and background color combinations meet WCAG2 guidelines.
- * The third argument is an object.
- * the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA';
- * the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'.
- * If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}.
- *
- * Example
- * ```ts
- * new TinyColor().isReadable('#000', '#111') => false
- * new TinyColor().isReadable('#000', '#111', { level: 'AA', size: 'large' }) => false
- * ```
- */
- export function isReadable(color1, color2, wcag2) {
- var _a, _b;
- if (wcag2 === void 0) { wcag2 = { level: 'AA', size: 'small' }; }
- var readabilityLevel = readability(color1, color2);
- switch (((_a = wcag2.level) !== null && _a !== void 0 ? _a : 'AA') + ((_b = wcag2.size) !== null && _b !== void 0 ? _b : 'small')) {
- case 'AAsmall':
- case 'AAAlarge':
- return readabilityLevel >= 4.5;
- case 'AAlarge':
- return readabilityLevel >= 3;
- case 'AAAsmall':
- return readabilityLevel >= 7;
- default:
- return false;
- }
- }
- /**
- * Given a base color and a list of possible foreground or background
- * colors for that base, returns the most readable color.
- * Optionally returns Black or White if the most readable color is unreadable.
- *
- * @param baseColor - the base color.
- * @param colorList - array of colors to pick the most readable one from.
- * @param args - and object with extra arguments
- *
- * Example
- * ```ts
- * new TinyColor().mostReadable('#123', ['#124", "#125'], { includeFallbackColors: false }).toHexString(); // "#112255"
- * new TinyColor().mostReadable('#123', ['#124", "#125'],{ includeFallbackColors: true }).toHexString(); // "#ffffff"
- * new TinyColor().mostReadable('#a8015a', ["#faf3f3"], { includeFallbackColors:true, level: 'AAA', size: 'large' }).toHexString(); // "#faf3f3"
- * new TinyColor().mostReadable('#a8015a', ["#faf3f3"], { includeFallbackColors:true, level: 'AAA', size: 'small' }).toHexString(); // "#ffffff"
- * ```
- */
- export function mostReadable(baseColor, colorList, args) {
- if (args === void 0) { args = { includeFallbackColors: false, level: 'AA', size: 'small' }; }
- var bestColor = null;
- var bestScore = 0;
- var includeFallbackColors = args.includeFallbackColors, level = args.level, size = args.size;
- for (var _i = 0, colorList_1 = colorList; _i < colorList_1.length; _i++) {
- var color = colorList_1[_i];
- var score = readability(baseColor, color);
- if (score > bestScore) {
- bestScore = score;
- bestColor = new TinyColor(color);
- }
- }
- if (isReadable(baseColor, bestColor, { level: level, size: size }) || !includeFallbackColors) {
- return bestColor;
- }
- args.includeFallbackColors = false;
- return mostReadable(baseColor, ['#fff', '#000'], args);
- }
|