How to programmatically calculate the contrast ratio between two colors?

by

According to Wikipedia, when converting to grayscale representation of luminance, “one must obtain the values of its red, green, and blue” and mix them in next proportion: R:30% G:59% B:11%

Therefore white will have 100% luminance and yellow will have 89%. At the same time, green has as small as 59%. 11% is almost four times lower than 41% difference!

And even lime (#00ff00) is not good for reading large amounts of texts.

IMHO for good contrast colors’ brightness should differ at least for 50%. And this brightness should be measured as converted to grayscale.

upd: Recently found a comprehensive tool for that on the web
which in order uses formula from w3 document
Threshold values could be taken from #1.4
Here is an implementation for this more advanced thing.

const RED = 0.2126;
const GREEN = 0.7152;
const BLUE = 0.0722;

const GAMMA = 2.4;

function luminance(r, g, b) {
  var a = [r, g, b].map((v) => {
    v /= 255;
    return v <= 0.03928
      ? v / 12.92
      : Math.pow((v + 0.055) / 1.055, GAMMA);
  });
  return a[0] * RED + a[1] * GREEN + a[2] * BLUE;
}

function contrast(rgb1, rgb2) {
  var lum1 = luminance(...rgb1);
  var lum2 = luminance(...rgb2);
  var brightest = Math.max(lum1, lum2);
  var darkest = Math.min(lum1, lum2);
  return (brightest + 0.05) / (darkest + 0.05);
}

console.log(contrast([255, 255, 255], [255, 255, 0])); // 1.074 for yellow
console.log(contrast([255, 255, 255], [0, 0, 255])); // 8.592 for blue

// note: minimal recommended contrast ratio is 4.5, or 3 for larger font-sizes

For more information, check the WCAG 2.0 documentation on how to compute this value.

More Related Contents:

  1. Javascript Commenting not working. Cannot comment out a comment?
  2. How can I check if a string is a valid number?
  3. HTML5 form required attribute. Set custom validation message?
  4. JavaScript file upload size validation
  5. Programmatically Lighten or Darken a hex color (or rgb, and blend colors)
  6. Regex pattern to match at least 1 number and 1 character in a string
  7. How can I listen to the form submit event in javascript?
  8. Javascript function to convert color names to hex codes
  9. How to validate inputs dynamically created using ng-repeat, ng-show (angular)
  10. Check whether an input string contains a number in javascript
  11. Validate decimal numbers in JavaScript – IsNumeric()
  12. Javascript: how to validate dates in format MM-DD-YYYY?
  13. JS function to calculate complementary colour?
  14. Convert RGB to RGBA over white
  15. ZIP Code (US Postal Code) validation
  16. How do I remove javascript validation from my eclipse project?
  17. How to check if a string is a valid hex color representation?
  18. How to Call a JS function using OnClick event [duplicate]
  19. Safari JS cannot parse YYYY-MM-DD date format?
  20. Recommendation for javascript form validation library [closed]
  21. Is canvas getImageData method machine/browser dependent?
  22. Convert HSB/HSV color to HSL
  23. What is jQuery Unobtrusive Validation?
  24. Angular form validation ng-disabled not working
  25. JS check for valid date format
  26. angularjs form reset error
  27. How to apply both ValidationPipe() and ParseIntPipe() to params?
  28. input:invalid css rule is applied on page load
  29. How can I void a form action and execute jQuery when all HTML form elements are validated?
  30. How to check if hex color is “too black”?

Leave a Comment