WCAG Contrast Utils

WCAG Contrast Utils is a TypeScript library for calculating the contrast ratio between two colors and checking whether it meets WCAG 2.1 accessibility standards.

This library is useful for developers and designers who want to ensure that their websites or applications comply with accessibility standards, improving readability and usability for all users, including those with visual impairments.

You can install the library via npm or yarn:

npm install wcag-contrast-utils

or

yarn add wcag-contrast-utils

import { contrastRatio, passesWCAG } from "wcag-contrast-utils";

The contrastRatio function calculates the contrast ratio between two colors, which can be provided as hexadecimal strings or RGB arrays.

const ratio1 = contrastRatio("#000000", "#ffffff"); // 21
const ratio2 = contrastRatio([0, 0, 0], [255, 255, 255]); // 21
const ratio3 = contrastRatio("#777777", "#ffffff"); // 4.47

The passesWCAG function takes a contrast ratio value and returns the highest WCAG compliance level met.

console.log(passesWCAG(2));   // "Not WCAG Compliant"
console.log(passesWCAG(3));   // "WCAG 2 AA Compliant Large Text"
console.log(passesWCAG(4.5)); // "WCAG 2 AAA Compliant Large Text"
console.log(passesWCAG(7));   // "WCAG 2 AAA Compliant"

According to WCAG 2.1 guidelines, the required contrast ratios are:

• AA (Normal text): 4.5:1
• AA (Large text): 3:1
• AAA (Normal text): 7:1
• AAA (Large text): 4.5:1

If you want to contribute to the project, feel free to open an issue or submit a pull request!

This project is released under the MIT license.