1. wcag-contrast
evaluate the wcag color contrast score for two colors
wcag-contrast
Package: wcag-contrast
Created by: tmcw
Last modified: Tue, 28 Jun 2022 22:20:58 GMT
Version: 3.0.0
License: BSD-2-Clause
Downloads: 253,941
Repository: https://github.com/tmcw/wcag-contrast

Install

npm install wcag-contrast
yarn add wcag-contrast

wcag color contrast

CircleCI

This module produces WCAG contrast ratio
measurement and scoring. It's an accessibility standard, intended to make sure websites have high enough contrast to be readable by everyone, including people with low vision and age-related vision problems. This module is a low-level utility, useful for its implementation of the underlying math: to test a page, you'll want to use something like Google Chrome’s Lighthouse tools, or the axe extension for Chrome and Firefox.

I (personally, speaking as Tom) have doubts about the universality, accuracy, and application of this particular standard. High contrast is a good value, but I argue that the standard is over-strict and doesn't precisely match human perception.

API

luminance

Get the contrast ratio between two relative luminance values

Parameters

Examples

 luminance(1, 1); // = 1

Returns number contrast ratio

rgb

Get a score for the contrast between two colors as rgb triplets

Parameters

Examples

 rgb([0, 0, 0], [255, 255, 255]); // = 21

Returns number contrast ratio

hex

Get a score for the contrast between two colors as hex strings

Parameters

Examples

 hex('#000', '#fff'); // = 21

Returns number contrast ratio

score

Get a textual score from a numeric contrast value

Parameters

Examples

 score(10); // = 'AAA'

Returns string score

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin