Skip to main content
Module

x/a11y_color_contrast/wcag.ts>wcag

A TypeScript package to calculate WCAG 2.0/3.0 and APCA color contrasts
Latest
function wcag
import { wcag } from "https://deno.land/x/a11y_color_contrast@v0.2.0/wcag.ts";

This function calculates the contrast and whether two colors used together are readable based on WCAG readability criteria. The first color is the foreground color and the second the background color (defaulting to pure white, "#FFF" / [255, 255, 255]).

This is a superset of the wcagIsReadable and wcagContrastValue functions. The readability criteria defaults to the 'AAA' level for normal text as defined in WCAG 2.2.

import { wcag } from "./wcag.ts";

wcag([0, 255, 0], [0, 0, 0]) // green on black
// { level: "AAA", size: "normal", score: 15.303999999999998, pass: true }

wcag([169, 169, 169], [0, 0, 0]) // dark gray on black
// { level: "AAA", size: "normal", score: 2.6043964062893665, pass: false }

See https://www.w3.org/WAI/WCAG22/Techniques/general/G17.html for concrete details for WCAG 2.2.

Parameters

foreground: Color
optional
background: Color = [UNSUPPORTED]
optional
wcag: WCAG