87713197fd19a8e73fe414c0315e7b9a72c75a9d51fe8134c5e9e4fcfa33212d08a9e912f0574550e9d6ac71087ca6cecab3fff4bd6f06a1a79f5e10278211 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. import { ColorInput, TinyColor } from './index.js';
  2. /**
  3. * AKA `contrast`
  4. *
  5. * Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
  6. */
  7. export declare function readability(color1: ColorInput, color2: ColorInput): number;
  8. export interface WCAG2Parms {
  9. level?: 'AA' | 'AAA';
  10. size?: 'large' | 'small';
  11. }
  12. /**
  13. * Ensure that foreground and background color combinations meet WCAG2 guidelines.
  14. * The third argument is an object.
  15. * the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA';
  16. * the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'.
  17. * If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}.
  18. *
  19. * Example
  20. * ```ts
  21. * new TinyColor().isReadable('#000', '#111') => false
  22. * new TinyColor().isReadable('#000', '#111', { level: 'AA', size: 'large' }) => false
  23. * ```
  24. */
  25. export declare function isReadable(color1: ColorInput, color2: ColorInput, wcag2?: WCAG2Parms): boolean;
  26. export interface WCAG2FallbackParms extends WCAG2Parms {
  27. includeFallbackColors?: boolean;
  28. }
  29. /**
  30. * Given a base color and a list of possible foreground or background
  31. * colors for that base, returns the most readable color.
  32. * Optionally returns Black or White if the most readable color is unreadable.
  33. *
  34. * @param baseColor - the base color.
  35. * @param colorList - array of colors to pick the most readable one from.
  36. * @param args - and object with extra arguments
  37. *
  38. * Example
  39. * ```ts
  40. * new TinyColor().mostReadable('#123', ['#124", "#125'], { includeFallbackColors: false }).toHexString(); // "#112255"
  41. * new TinyColor().mostReadable('#123', ['#124", "#125'],{ includeFallbackColors: true }).toHexString(); // "#ffffff"
  42. * new TinyColor().mostReadable('#a8015a', ["#faf3f3"], { includeFallbackColors:true, level: 'AAA', size: 'large' }).toHexString(); // "#faf3f3"
  43. * new TinyColor().mostReadable('#a8015a', ["#faf3f3"], { includeFallbackColors:true, level: 'AAA', size: 'small' }).toHexString(); // "#ffffff"
  44. * ```
  45. */
  46. export declare function mostReadable(baseColor: ColorInput, colorList: ColorInput[], args?: WCAG2FallbackParms): TinyColor | null;