A set of tools for validating the color contrast based on WCAG 2.0 standard.
Using npm
npm i cococh@latestUsing yarn
yarn add cococh@latestor installing it manually on package.json
{
//...otherConfigs,
"dependencies": {
"cococh": "^1.2.0"
}
}and then do npm install or yarn install
It is possible to use different color formats and combine them:
// With rgb()
const ratios = getContrastRatios("rgb(255, 0, 0)", "rgb(0, 0, 0)");
// with rgb() and 3-digit hexa
const ratios = getContrastRatios("rgb(255, 0, 0)", "#000");
// with hsl() and rgb()
const ratios = getContrastRatios("hsl(0, 100%, 50%)", "rgb(0, 0, 0)");
// with 3-digit hexa and 6-digit hexa
const ratios = getContrastRatios("#f00", "#000000");Any combination is valid, and you will receive an object like this:
{
"normal": {
"AA": true,
"AAA": false
},
"large": {
"AA": true,
"AAA": true
}
}You can validate like this:
if (ratios.large.AAA) {
// Is valid to use as large text on an AAA level
}
if (ratios.large.AA) {
// Is valid to use as large text on an AA level
}
if (ratios.normal.AAA) {
// Is valid to use as normal text on an AAA level
}
if (ratios.normal.AA) {
// Is valid to use as normal text on an AA level
}To test it use:
yarn testor
npm test