a11y-color-contrast
Advanced tools
A simple utility package for working with WCAG 2.2/3.0 color contrasts
A simple utility package for working with WCAG 2.2/3.0 color contrasts
import { apcaContrastValue, hex, wcagContrastValue } from "https://deno.land/x/a11y_color_contrast/mod.ts";
const wcag = wcagContrastValue(hex("#e1e1e1"), hex("#fff"));
const apca = apcaContrastValue(hex("#e1e1e1"), hex("#fff"));
Install the module with your favorite manager: npm add a11y-color-contrast
import { apcaContrastValue, hex, wcagContrastValue } from "a11y-color-contrast";
const wcag = wcagContrastValue(hex("#e1e1e1"), hex("#fff"));
const apca = apcaContrastValue(hex("#e1e1e1"), hex("#fff"));
You can also read the documentation on Deno docs.
hexhex is a utility function to parse a hex string to a [number, number, number], useful if your colors are not in the
RBG format. Supports both short and long hex colors, and will strip out the alpha channel when the hex string contains
it. Note, the returned tripled will contain NaN if the string cannot be parsed. Use isValidColor
to check if the input can be invalid.
// import { hex } from "a11y-color-contrast";
import { hex } from "https://deno.land/x/a11y_color_contrast/mod.ts";
hex("#fff");
hex("#e1e1e1");
// Also support hex4/hex8
hex("#1234");
hex("#11ff0000");
// And missing #
hex("fff");
wcagBased on the WCAG 2.2 algorithm to calculate how readable two colors are when used together. The first argument is the foreground color and the second the background. By default, the function defaults to checking whether the colors pass the WCAG AAA standard (7:1 contrast ratio) for normal text.
// import { hex, wcag } from "a11y-color-contrast";
import { hex, wcag } from "https://deno.land/x/a11y_color_contrast/mod.ts";
wcag(hex("#fff"), hex("#e1e1e1"));
// { level: "AAA", size: "normal", score: 1.3076906134240802, pass: false }
wcag(hex("#0f0f0f"), hex("#fff"));
// { level: "AAA", size: "normal", score: 19.168645448127652, pass: true }
wcag(hex("#0f0f0f"), hex("#f4f"), { level: "AA" });
// { level: "AA", size: "normal", score: 6.8668010864317885, pass: true }
wcag(hex("#0f0f0f"), hex("#f4f"), { level: "AA", size: "large" });
// { level: "AA", size: "large", score: 6.8668010864317885, pass: true }
wcagContrastValueA simpler version of the wcag function, this returns the contrast value between two colors based on the WCAG
2.2 algorithm.
// import { hex, wcagContrastValue } from "a11y-color-contrast";
import { hex, wcagContrastValue } from "https://deno.land/x/a11y_color_contrast/mod.ts";
wcagContrastValue(hex("#fff"), hex("#e1e1e1"));
// 1.3076906134240802
wcagContrastValue(hex("#0f0f0f"), hex("#fff"));
// 19.168645448127652
wcagIsReadableA simpler version of the wcag function, this checks whether two colors used together are readable based on
the WCAG parameters passed.
// import { hex, wcagIsReadable } from "a11y-color-contrast";
import { hex, wcagIsReadable } from "https://deno.land/x/a11y_color_contrast/mod.ts";
wcagIsReadable(hex("#fff"), hex("#e1e1e1"));
// false
wcagIsReadable(hex("#0f0f0f"), hex("#fff"));
// true
wcagIsReadable(hex("#0f0f0f"), hex("#f4f"), { level: "AAA" });
// false
wcagIsReadable(hex("#0f0f0f"), hex("#f4f"), { level: "AA" });
// true
apcaContrastValueBased on the upcoming WCAG 3.0 standard, this function is based on the APCA algorithm to calculate how readable two colors are when used together. The first argument is the foreground color and the second the background. It is highly recommended reading the linked article and resources to get an overview over the differences between the WCAG and APCA standard.
// import { apcaContrastValue, hex } from "a11y-color-contrast";
import { apcaContrastValue, hex } from "https://deno.land/x/a11y_color_contrast/mod.ts";
apcaContrastValue(hex("#fff"), hex("#e1e1e1"));
// -17.5
apcaContrastValue(hex("#0f0f0f"), hex("#fff"));
// 105.5
apcaContrastValue(hex("#0f0f0f"), hex("#f4f"));
// 51.2
apcaToInterpolatedFontBased on a Lc between two colors, this will find the appropriate font sizes for it. The returned array will show
"placeholder" for when the contrast is too low for text and "prohibited" when the contrast is unusable and otherwise
a font size. If no font size can be calculated it will return null.
The returned array contains nine values, corresponding to the font useable at font weight 100 at index 0, and so on until weight 900 at index 8.
// import { apcaToInterpolatedFont, hex } from "a11y-color-contrast";
import { apcaToInterpolatedFont, hex } from "https://deno.land/x/a11y_color_contrast/mod.ts";
apcaToInterpolatedFont(-17.5);
// 100 200 300 400 500 600 700 800 900
// [ "placeholder", ...]
apcaToInterpolatedFont(105.5);
// 100 200 300 400 500 600 700 800 900
// [ 39, 25, 18, 14.5, 14, 13, 12, 16, 18 ]
apcaToInterpolatedFont(51.2);
// 100 200 300 400 500 600 700 800 900
// [ 92, 69, 57, 31, 27, 23.5, 20.5, 20.5, 20.5 ]
apcaValidateFontBased on a Lc value, this function allows you to check whether a given font and weight combination passes the required minimum contrast based on the APCA contrast table.
The first parameter is the Lc value, the second is either a single font size or an array of them and the third, optional parameter is either a single font weight or an array of them. If the weight parameter is undefined, it will default to all the font weights.
// import { apcaValidateFont, hex } from "a11y-color-contrast";
import { apcaValidateFont, hex } from "https://deno.land/x/a11y_color_contrast/mod.ts";
apcaValidateFont(-17.5, 36, 800);
// { "36": { "800": false } }
apcaValidateFont(105.5, [14, 16, 18], [400, 600, 800]);
// {
// "14": { "400": true, "600": true, "800": false },
// "16": { "400": true, "600": true, "800": true },
// "18": { "400": true, "600": true, "800": true }
// }
apcaValidateFont(51.2, [18, 32]);
// {
// "18": { "100": false, "200": false, ..., "700": false, "800": false, "900": false },
// "32": { "100": false, "200": false, ..., "500": true, "600": true, "700": true, "800": true, "900": true }
// }
toHexConverts an RGB triplet to its hex string representation.
// import { toHex } from "a11y-color-contrast";
import { toHex } from "https://deno.land/x/a11y_color_contrast/mod.ts";
toHex([0, 0, 0]);
// "#000000"
isValidColorChecks whether a color parsed via hex is valid.
// import { isValidColor } from "a11y-color-contrast";
import { isValidColor } from "https://deno.land/x/a11y_color_contrast/mod.ts";
isValidColor([0, 0, 0]);
// true
isValidColor([NaN, 0, 0]);
// false
colorFromObjectConverts an RGB object into an RGB triplet.
// import { colorFromObject } from "a11y-color-contrast";
import { colorFromObject } from "https://deno.land/x/a11y_color_contrast/mod.ts";
colorFromObject({ r: 0, g: 0, b: 0 });
// [0, 0, 0]
MIT
v0.2.0
2022-07-19
Fixed some unfortunate misspellings of WCAG, renamed a bunch of functions and added lots more documentation.
2d95d74] Yet another tiny mistake105b82b] Temporarily disable doc testsa5f5ea9] Update README145b249] Fix totally wrong values in apcaContrastValue docsad05e86] Add documentation to isValidColor12eb2e9] Rename more things, more documentationa0eebf0] Create new wcagContrastValue function, more
documentation170b205] Yeah, nah, no more grouped exports99d110c] And export the class0027b63] Fix names being wrong :facepalm:bdb7b48] Try with a class instead75818aa] Actually export wcag object797f2a1] Function renaming, add documentationcfc5893] Convert functions to named functions for deno doce9b3e07] Add documentation, example to 'toHex' function0d20fe6] Change toHex method to use bit shifting dark magicscfb3d73] Run doctests on CI, fix README/examples so they
compilef53d244] Fix wrong URL to documentationFAQs
A simple utility package for working with WCAG 2.2/3.0 color contrasts
The npm package a11y-color-contrast receives a total of 299 weekly downloads. As such, a11y-color-contrast popularity was classified as not popular.
We found that a11y-color-contrast demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.