Skip to main content
Module

x/a11y_color_contrast/apca.ts>apcaContrastValue

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

This function calculates the contrast value between two colors based on WCAG contrast readability criteria. The first color is the foreground color and the second the background color (defaulting to pure white, "#fff" / [255, 255, 255]).

NOTE: The returned value is signed, but only the absolute value matters, so you may want to wrap the result in Math.abs. The reason for this is that light on dark colors returns negative numbers, while dark on light returns positive numbers.

import { apcaContrastValue } from "./apca.ts";

apcaContrastValue([26, 26, 26], [255, 255, 255]) // black on white
// 104.3

apcaContrastValue([255, 255, 255], [26, 26, 26]) // inverted from above
// -106.55

See https://github.com/Myndex/SAPC-APCA/ for concrete details for APCA.

Parameters

foreground: Color
optional
background: Color = [UNSUPPORTED]

Returns

number