Comparison

brightnessDifference

Get the brightness difference between two colors using the RGB brightness formula.

brightnessDifference(left: string, right: string, precision?: number): number

import { brightnessDifference } from 'colorizr';

brightnessDifference('#ff0044', '#ffffff'); // 171.003

Playground

171.003

colorDifference

Get the sum of maximum RGB channel differences between two colors.

colorDifference(left: string, right: string): number

import { colorDifference } from 'colorizr';

colorDifference('#ff0044', '#ffffff'); // 442

Playground

442

compare

Run a full WCAG compliance analysis between two colors.

compare(left: string, right: string): Analysis

Returns an Analysis object:

interface Analysis {
  brightnessDifference: number;
  colorDifference: number;
  compliant: number;       // 0-2, number of compliance levels passed
  contrast: number;        // WCAG contrast ratio
  largeAA: boolean;
  largeAAA: boolean;
  normalAA: boolean;
  normalAAA: boolean;
}

import { compare } from 'colorizr';

compare('#ff0044', '#ffffff');
// {
//   brightnessDifference: 171.003,
//   colorDifference: 442,
//   compliant: 1,
//   contrast: 3.94,
//   largeAA: true,
//   largeAAA: false,
//   normalAA: false,
//   normalAAA: false,
// }

Playground

{
  "brightnessDifference": 171.003,
  "colorDifference": 442,
  "compliant": 1,
  "contrast": 3.94,
  "largeAA": true,
  "largeAAA": false,
  "normalAA": false,
  "normalAAA": false
}

deltaE

Get the perceptual color difference (Delta E) in OkLab space. Values below 0.02 are generally imperceptible.

deltaE(left: string, right: string, precision?: number): number

The DELTA_E_JND constant (0.02, the Just Noticeable Difference threshold) is also exported.

import { deltaE, DELTA_E_JND } from 'colorizr';

deltaE('#ff0044', '#ff0046'); // 0.00219
deltaE('#ff0044', '#0066ff'); // 0.43219

Playground

0.43219