JSVision

Appearance

@jsvision/core / contrastRatio

Function: contrastRatio() ​

contrastRatio(a, b): number

Defined in: color/contrast.ts:43

Compute the WCAG 2.x contrast ratio between two colors, 1 (identical) to 21 (black on white).

The ratio is (Llight + 0.05) / (Ldark + 0.05) on relative luminance, so argument order does not matter. WCAG AA wants ≥ 4.5 for body text and ≥ 3 for large text. If either color is unresolvable ('default' — its luminance is whatever the terminal picks), the result is NaN; the function never throws, so it is safe to call inside a render/preview loop.

Parameters ​

a ​

Color

One color (hex, named, or 'default').

b ​

Color

The other color.

Returns ​

number

The contrast ratio 1..21, or NaN when a color is unresolvable.

Example ​

ts
import { contrastRatio } from '@jsvision/core';

contrastRatio('#000000', '#ffffff'); // 21 — maximum contrast
contrastRatio('#777777', '#808080'); // ~1.05 — far below the 4.5 AA floor
contrastRatio('default', '#ffffff'); // NaN — luminance unknown, skip the check