color contrast checker - Download Color Contrast Checker With JavaScript - color-contrast.js

Download Color Contrast Checker With JavaScript – color-contrast.js

Posted on

This time I will share jQuery Plugin and tutorial about Color Contrast Checker With JavaScript – color-contrast.js, hope it will help you in programming stack.

color contrast checker - Download Color Contrast Checker With JavaScript - color-contrast.js
File Size: 12.2 KB
Views Total: 1405
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A jQuery or Vanilla JavaScript based accessibility testing tool to check the color contrast of your web design (e.g. text color & background color) based on WCAG 2.0.

The plugin highlights the elements with contrast failures in the DOM and outputs the elements, contrast ratios and failures (warnings and errors) for testing in the page and console.

How to use it:

1. Include the color-contrast.js plugin after loading the latest jQuery library.

2         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
3         crossorigin="anonymous">
4 </script>
5 <script src="jquery.color-contrast.js"></script>

2. Check the contrast of your color design.

1 contrast.check();

3. Output the contrast failures in the console.

1 console.log(contrastErrors);

4. Output errors and warning in the page.

01 $.each(contrastErrors.errors, (index, item) => {
02   var name = item.name
03       count = index + 1;
04   $(name).append(' (' + count + ')');
05   $('body').append(
06     ${name[0].nodeName}, ${item.ratio}, ${item.detail}, ${item.status}>
07   );
08 });
09  
10 $.each(contrastErrors.warnings, (index, item) => {
11   var name = item.name,
12       count = index + 1;
13   $(name).append(' (' + count + ')');
14   $('body').append(
15     ${name[0].nodeName}, ${item.ratio}, ${item.detail}, ${item.status}
16   );
17 });

This awesome jQuery plugin is developed by jasonday. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net