Gathering detailed insights and metrics for a11y-color-contrast-checker
Gathering detailed insights and metrics for a11y-color-contrast-checker
Installations
npm install a11y-color-contrast-checkerDeveloper Guide
BETA
Typescript
No
Module System
ESM, UMD
Node Version
20.5.1
NPM Version
9.8.0
Score
72.1
Supply Chain
98.9
Quality
84.9
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Download Statistics
Total Downloads
2,304
Last Day
2
Last Week
4
Last Month
80
Last Year
2,304
Maintainers
1
Package Meta Information
Latest Version
1.0.24
Package Id
a11y-color-contrast-checker@1.0.24
Unpacked Size
33.04 kB
Size
8.69 kB
File Count
8
NPM Version
9.8.0
Node Version
20.5.1
Published on
Oct 17, 2024
Total Downloads
Cumulative downloads
Total Downloads
2,304
Last Day
-77.8%
2
Compared to previous day
Last Week
-90%
4
Compared to previous week
Last Month
-26.6%
80
Compared to previous month
Last Year
0%
2,304
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
6
a11y-color-contrast-checker
A color contrast checker for web developers to ensure your website meets WCAG (Web Content Accessibility Guidelines) standards for color contrast. This utility helps verify that text and background color combinations provide sufficient contrast for users with visual impairments, improving accessibility. During the development phase, it highlights elements in the DOM that do not meet the required standards.
WCAG 2.1 - Success Criterion 1.4.3: Contrast (Minimum) (Level AA)
The visual presentation of text and images of text must have a contrast ratio of at least 4.5:1, except for the following:
- Large Text: Large-scale text and images of large-scale text should have a contrast ratio of at least 3:1.
- Incidental: Text or images of text that are part of an inactive user interface component, pure decoration, invisible to users, or part of a picture containing significant other visual content have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no contrast requirement.
For more information, refer to the official WCAG 2.1 guidelines.
Features
- Checks color contrast between text and background according to WCAG 2.1 guidelines.
- Highlights DOM elements that fail to meet the required contrast ratio.
- Supports both ES6 and IIFE modules, making it easy to integrate into any project.
Installation
Install the package using npm:
1npm install a11y-color-contrast-checker --save-dev
Usage
For ES6 Modules
You can use the package in your React or other ES6-based projects as shown below:
1import { useEffect } from "react"; 2import "./App.css"; 3import { ColorContrastChecker } from "a11y-color-contrast-checker"; 4 5function App() { 6 useEffect(() => { 7 const getContainerElement = document.querySelector("#container"); 8 // Creating instance for the iife class. 9 const colorChecker = new ColorContrastChecker(getContainerElement); 10 11 // Initiatizing 12 colorChecker.init(); 13 14 // Mutating the dom after 10 sec to check the plugin 15 setTimeout(() => { 16 const divElement = document.createElement("div"); 17 divElement.classList.add("box", "box--red"); 18 divElement.textContent = "dummy element"; 19 getContainerElement.appendChild(divElement); 20 }, 10000); 21 }, []); 22 23 return ( 24 <div className="container" id="container"> 25 <div className="box box--white">text content</div> 26 <div className="box box--yellow">text content</div> 27 <div className="box box--orange">text content</div> 28 <div className="box box--transparent"></div> 29 <div className="box box--green"> 30 <span className="tamil"> tamil </span> 31 text content 32 </div> 33 <div className="box box--dummy"> 34 <span className="tamil"> tamil </span> 35 text content 36 </div> 37 </div> 38 ); 39} 40 41export default App;
For IIFE (Immediately Invoked Function Expression)
If you are not using a module bundler, you can include the package in your HTML page:
1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Color Contrast Checker</title> 7 <link href="./style.css" rel="stylesheet" /> 8 </head> 9 <body> 10 <div class="container" id="container"> 11 <div class="box box--white">text content</div> 12 <div class="box box--yellow">text content</div> 13 <div class="box box--orange">text content</div> 14 <div class="box box--transparent"></div> 15 <div class="box box--green"> 16 <span class="tamil"> tamil </span> 17 text content 18 </div> 19 <div class="box box--dummy"> 20 <span class="tamil"> tamil </span> 21 text content 22 </div> 23 </div> 24 <script src="../dist/iife/colorContrast.js"></script> 25 <script> 26 try { 27 // Creating instance for the iife class. 28 const getChecker = new colorContrast.ColorContrastChecke(); 29 // Initiatizing 30 getChecker.init(); 31 32 // Mutating the dom after 10 sec to check the plugin 33 setTimeout(() => { 34 const divElement = document.createElement("div"); 35 divElement.classList.add("box", "box--red"); 36 divElement.textContent = "dummy element"; 37 container.appendChild(divElement); 38 }, 10000); 39 } catch (error) { 40 console.error("Error initializing ColorContrastChecker:", error.message); 41 } 42 </script> 43 </body> 44</html>
API
ColorContrastChecker(container)
- container: The DOM element or the container you want to check for color contrast issues.
init()
- Initializes the checker and scans the provided container for any elements that fail to meet WCAG standards.
destroy()
- Use it when you're done observing changes to clean up resources efficiently.
License
This project is licensed under the MIT License.
Exmaple
No vulnerabilities found.
No security vulnerabilities found.