Guest User

Untitled

a guest
Apr 26th, 2019
81
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const VALID_HEX_CHARS = {
  2. "0": true,
  3. "1": true,
  4. "2": true,
  5. "3": true,
  6. "4": true,
  7. "5": true,
  8. "6": true,
  9. "7": true,
  10. "8": true,
  11. "9": true,
  12. "A": true,
  13. "B": true,
  14. "C": true,
  15. "D": true,
  16. "E": true,
  17. "F": true
  18. }
  19.  
  20. const getRGBComponentLuminance = (component) => {
  21. if (typeof component == "string") component = parseInt(component);
  22.  
  23. if (component < 0) component = 0;
  24. else if (component > 255) component = 1;
  25. else component = component / 255;
  26.  
  27. if (component <= 0.03928) return component / 12.92;
  28. else return Math.pow((component + 0.055) / 1.055, 2.4);
  29. }
  30.  
  31. const HEXComponentToRGB = (component) => {
  32. if (component.length == 1) component = `${component}${component}`;
  33. return parseInt(component, 16);
  34. }
  35.  
  36. const RGBComponentToHEX = (component) => {
  37. if (typeof component == "string") component = parseInt(component);
  38.  
  39. const tempHEX = component.toString(16);
  40. return (tempHEX.length == 1) ? `0${tempHEX}` : tempHEX;
  41. }
  42.  
  43. const relativeLuminance = (color) => {
  44. if (validHEXColor(color)) color = parseRGBFromHEX(color);
  45.  
  46. const splitColor = splitRGB(color);
  47.  
  48. const redLuminance = getRGBComponentLuminance(splitColor[0]);
  49. const greenLuminance = getRGBComponentLuminance(splitColor[1]);
  50. const blueminance = getRGBComponentLuminance(splitColor[2]);
  51.  
  52. return 0.2126 * redLuminance + 0.7152 * greenLuminance + 0.0722 * blueminance;
  53. }
  54.  
  55. const splitHEX = (color) => {
  56. if (color.length == 4) return color.replace("#","").split("");
  57. else return color.replace("#","").match(/.{1,2}/g);
  58. }
  59.  
  60. const splitRGB = (color) => {
  61. return color.replace("rgb(","").replace("rgba(","").replace(")","").split(",");
  62. }
  63.  
  64. export var validHEXColor = (color) => {
  65. let valid = false;
  66.  
  67. if (typeof color == "string") {
  68. const splitColor = color.split("");
  69. const length = splitColor.length;
  70. const includesHEX = splitColor[0] == "#";
  71.  
  72. if (includesHEX ? (length == 4 || length == 7) : (length == 3 || length == 6)) {
  73. let i = includesHEX ? 1 : 0;
  74.  
  75. while (i < length) {
  76. if (typeof VALID_HEX_CHARS[splitColor[i].toUpperCase()] == "undefined") break;
  77.  
  78. i++;
  79. }
  80.  
  81. valid = (i == length && length != 0);
  82. }
  83. }
  84.  
  85. return valid;
  86. };
  87.  
  88. export var validRGBColor = (color) => {
  89. let valid = false;
  90.  
  91. if (typeof color == "string") {
  92. const splitColor = splitRGB(color);
  93. const length = splitColor.length;
  94.  
  95. if (length == 3 || length == 4) {
  96. let i = 0;
  97.  
  98. while (i < length) {
  99. if (isNaN((i == 3) ? parseFloat(splitColor[3]) : parseInt(splitColor[i]))) break;
  100.  
  101. i++;
  102. }
  103.  
  104. valid = (i == length);
  105. }
  106. }
  107.  
  108. return valid;
  109. }
  110.  
  111. export var parseHEXFromRGB = (color) => {
  112. let HEX = "#";
  113. const splitColor = splitRGB(color);
  114.  
  115. for (let i = 0; i < 3; i++) {
  116. HEX += RGBComponentToHEX(splitColor[i]);
  117. }
  118.  
  119. if (validHEXColor(HEX)) return HEX;
  120. }
  121.  
  122. export var parseRGBFromHEX = (color) => {
  123. let RGB = "";
  124. const splitColor = splitHEX(color);
  125.  
  126. for (let i = 0; i < 3; i++) {
  127. RGB += HEXComponentToRGB(splitColor[i]);
  128. if (i != 2) RGB += ", ";
  129. }
  130.  
  131. return `rgb(${RGB})`;
  132. }
  133.  
  134. export var getFullHEXColor = (color) => {
  135. const splitColor = color.split("");
  136. const length = splitColor.length;
  137. const includesHEX = splitColor[0] == "#";
  138.  
  139. let fullHEXColor = "#";
  140. let i = includesHEX ? 1 : 0;
  141.  
  142. while (i < length) {
  143. fullHEXColor += splitColor[i];
  144.  
  145. if (includesHEX && (length == 3 || length == 4)) fullHEXColor += splitColor[i];
  146.  
  147. i++;
  148. }
  149.  
  150. return fullHEXColor;
  151. }
  152.  
  153. const getContrastRatio = (background, foreground) => {
  154. const l1 = relativeLuminance(background) + 0.05;
  155. const l2 = relativeLuminance(foreground) + 0.05;
  156.  
  157. if (l1 > l2) return l1 / l2;
  158. else return l2 / l1;
  159. }
  160.  
  161. export var contrastRatio = (background, foreground) => {
  162. return getContrastRatio(background, foreground).toFixed(2);
  163. }
  164.  
  165. export var passesWCAGAA = (background, foreground) => {
  166. const contrastRatio = getContrastRatio(background, foreground);
  167.  
  168. return {
  169. normal: contrastRatio >= 4.5,
  170. large: contrastRatio >= 3
  171. }
  172. }
  173.  
  174. export var passesWCAGAAA = (background, foreground) => {
  175. const contrastRatio = getContrastRatio(background, foreground);
  176.  
  177. return {
  178. normal: contrastRatio >= 7,
  179. large: contrastRatio >= 4.5
  180. }
  181. }
RAW Paste Data