37aeb0b0cb92c745f4e1bd99a9de8c796c08cca08f908d883b0b12c1c1ba71b5b670de6d84e214c1820c147c318114888be483fbf30d1017cfaa04dee91e77 3.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.mostReadable = exports.isReadable = exports.readability = void 0;
  4. var index_js_1 = require("./index.js");
  5. // Readability Functions
  6. // ---------------------
  7. // <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)
  8. /**
  9. * AKA `contrast`
  10. *
  11. * Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
  12. */
  13. function readability(color1, color2) {
  14. var c1 = new index_js_1.TinyColor(color1);
  15. var c2 = new index_js_1.TinyColor(color2);
  16. return ((Math.max(c1.getLuminance(), c2.getLuminance()) + 0.05) /
  17. (Math.min(c1.getLuminance(), c2.getLuminance()) + 0.05));
  18. }
  19. exports.readability = readability;
  20. /**
  21. * Ensure that foreground and background color combinations meet WCAG2 guidelines.
  22. * The third argument is an object.
  23. * the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA';
  24. * the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'.
  25. * If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}.
  26. *
  27. * Example
  28. * ```ts
  29. * new TinyColor().isReadable('#000', '#111') => false
  30. * new TinyColor().isReadable('#000', '#111', { level: 'AA', size: 'large' }) => false
  31. * ```
  32. */
  33. function isReadable(color1, color2, wcag2) {
  34. var _a, _b;
  35. if (wcag2 === void 0) { wcag2 = { level: 'AA', size: 'small' }; }
  36. var readabilityLevel = readability(color1, color2);
  37. switch (((_a = wcag2.level) !== null && _a !== void 0 ? _a : 'AA') + ((_b = wcag2.size) !== null && _b !== void 0 ? _b : 'small')) {
  38. case 'AAsmall':
  39. case 'AAAlarge':
  40. return readabilityLevel >= 4.5;
  41. case 'AAlarge':
  42. return readabilityLevel >= 3;
  43. case 'AAAsmall':
  44. return readabilityLevel >= 7;
  45. default:
  46. return false;
  47. }
  48. }
  49. exports.isReadable = isReadable;
  50. /**
  51. * Given a base color and a list of possible foreground or background
  52. * colors for that base, returns the most readable color.
  53. * Optionally returns Black or White if the most readable color is unreadable.
  54. *
  55. * @param baseColor - the base color.
  56. * @param colorList - array of colors to pick the most readable one from.
  57. * @param args - and object with extra arguments
  58. *
  59. * Example
  60. * ```ts
  61. * new TinyColor().mostReadable('#123', ['#124", "#125'], { includeFallbackColors: false }).toHexString(); // "#112255"
  62. * new TinyColor().mostReadable('#123', ['#124", "#125'],{ includeFallbackColors: true }).toHexString(); // "#ffffff"
  63. * new TinyColor().mostReadable('#a8015a', ["#faf3f3"], { includeFallbackColors:true, level: 'AAA', size: 'large' }).toHexString(); // "#faf3f3"
  64. * new TinyColor().mostReadable('#a8015a', ["#faf3f3"], { includeFallbackColors:true, level: 'AAA', size: 'small' }).toHexString(); // "#ffffff"
  65. * ```
  66. */
  67. function mostReadable(baseColor, colorList, args) {
  68. if (args === void 0) { args = { includeFallbackColors: false, level: 'AA', size: 'small' }; }
  69. var bestColor = null;
  70. var bestScore = 0;
  71. var includeFallbackColors = args.includeFallbackColors, level = args.level, size = args.size;
  72. for (var _i = 0, colorList_1 = colorList; _i < colorList_1.length; _i++) {
  73. var color = colorList_1[_i];
  74. var score = readability(baseColor, color);
  75. if (score > bestScore) {
  76. bestScore = score;
  77. bestColor = new index_js_1.TinyColor(color);
  78. }
  79. }
  80. if (isReadable(baseColor, bestColor, { level: level, size: size }) || !includeFallbackColors) {
  81. return bestColor;
  82. }
  83. args.includeFallbackColors = false;
  84. return mostReadable(baseColor, ['#fff', '#000'], args);
  85. }
  86. exports.mostReadable = mostReadable;