Foreground (Text)
Background
CVD Simulation
Applied to all pair-list and matrix calculations. Hero preview always shows original.
Minimum ratio filter — 1.0:1
Palette Quick-Add
Click a palette swatch to set FG. Shift/Alt-click to set BG.
Live Pair Preview
Sample interface text
This area previews the current text and background colours. All values update in real time.
Text BG
COLOUR VALUES
FG #1E293B
rgb(30, 41, 59)
hsl(217, 33%, 17%)
L 0.0241
-
-
-
BG #FFFFFF
rgb(255, 255, 255)
hsl(0, 0%, 100%)
L 1.0000
-
-
-
CR -
APCA -
AA FAIL AAA FAIL
ΔE76-
ΔE00-
Contrast Badge Preview
CVD Contrast Comparison
- - - Protanopia
- - - Deuteranopia
- - - Tritanopia
- - - Achromat.
Colour Harmonies (Foreground)
Tints & Shades (Background)
Accessibility Summary
Pair Ratio WCAG
FG on BG
Black on BG
White on BG
Palette Pair List
0 total pairs showing 0
Add colours to palette to see pair analysis.
Luminance Distribution
Gamut Graph (L* vs C*)
CIE L*a*b* lightness (vertical) vs chroma (horizontal). Each palette colour plotted.
Actions, Palette & Matrix
Palette (max 24)
Add colours from the Lab tab or bulk import.
n×n Contrast Matrix
Row = text colour, column = background. Click a cell to load that pair. Header swatches show each palette colour.
Export

CSV includes all pairs with ratio, WCAG level, and APCA Lc. JSON includes full palette and computed pairs.

Standards & Guidelines
WCAG 2.2 — Contrast Requirements

1.4.3 Contrast (Minimum) — Level AA: Text and images of text must have a contrast ratio of at least 4.5:1 for normal text, and 3:1 for large text (≥18pt, or ≥14pt bold).

1.4.6 Contrast (Enhanced) — Level AAA: At least 7:1 for normal text, 4.5:1 for large text.

1.4.11 Non-text Contrast — Level AA: UI components and graphical objects must have at least 3:1 contrast against adjacent colours.

These thresholds are based on the WCAG relative luminance formula, which uses linearised sRGB with BT.709 coefficients.

APCA — Accessible Perceptual Contrast Algorithm

APCA (part of WCAG 3.0 Draft) uses a perceptual lightness contrast metric Lc instead of a simple luminance ratio. It accounts for spatial frequency, polarity (dark-on-light vs light-on-dark), and human contrast sensitivity.

Thresholds (approximate): |Lc| ≥ 75 for body text, ≥ 60 for large text (24px/700wt), ≥ 45 for non-text elements, ≥ 30 for placeholders. Polarity-aware: Lc > 0 = dark text on light BG.

APCA replaces the simple (L₁+0.05)/(L₂+0.05) ratio with asymmetric exponents for text/background perceived lightness.

sRGB (IEC 61966-2-1:1999)

Standard RGB colour space with D65 white point and piecewise gamma. All web colours, CSS colours, and Canvas 2D operate in sRGB. Linearisation is required before luminance and contrast calculations.

CIE 15:2004 — CIELAB

Defines L*a*b* (perceptually uniform colour space) and ΔE colour difference metrics. L*a*b* is used throughout this tool for ΔE76 and ΔE00 calculations, gamut graph, and colour-difference analysis.

CIEDE2000 — Colour Difference

CIE 142-2001 defines ΔE00 as the recommended colour-difference formula with lightness, chroma, hue, and rotation corrections. This tool computes both ΔE76 (Euclidean in L*a*b*) and ΔE00 for every pair.

Guideline: ΔE00 <1 imperceptible, 1–2 expert-level, 2–5 noticeable, 5–10 large, >10 very large.

CVD — Color Vision Deficiency Standards

Simulation uses the Brettel, Viénot & Mollon (1997) model. Real CVD varies continuously; simulation provides the dichromatic extreme. ~8% of males and ~0.5% of females have some form of CVD.

Testing contrast under CVD simulation ensures accessibility for colour-blind users. A pair that passes WCAG under all 4 CVD types is robustly accessible.

ISO 9241-3 — Visual Display Requirements

Ergonomic requirements for visual display terminals specify minimum contrast ratios, luminance ranges, and viewing conditions for workplace displays. Complementary to WCAG for physical display accessibility.

Formulas & Mathematics
Relative Luminance (WCAG 2.x)
sRGB Linearisation:
if Csrgb ≤ 0.04045: Clin = Csrgb / 12.92
else: Clin = ((Csrgb + 0.055) / 1.055)2.4

Relative Luminance:
L = 0.2126 × Rlin + 0.7152 × Glin + 0.0722 × Blin

Coefficients from ITU-R BT.709. Range: 0 (black) to 1 (white).
WCAG 2.x Contrast Ratio
CR = (Llighter + 0.05) / (Ldarker + 0.05)

Range: 1:1 (identical) to 21:1 (black vs white).

Thresholds:
AA small text: CR ≥ 4.5:1
AA large text: CR ≥ 3.0:1
AAA small text: CR ≥ 7.0:1
AAA large text: CR ≥ 4.5:1
Non-text (1.4.11): CR ≥ 3.0:1
APCA Lightness Contrast (Simplified)
Perceived luminance (Y):
Y = 0.2126729 × (R/255)2.4 + 0.7151522 × (G/255)2.4 + 0.0721750 × (B/255)2.4

Soft clamp:
if Y < 0.022: Y = Y + (0.022 − Y)1.414

SAPC (polarity-dependent):
if Ybg > Yfg: SAPC = (Ybg0.56 − Yfg0.57) × 1.14
else: SAPC = (Ybg0.65 − Yfg0.62) × 1.14

Lc (output):
if |SAPC| < 0.1: Lc = 0
else: Lc = (SAPC − 0.027) × 100  (or +0.027 if SAPC < 0)
XYZ → CIELAB (D65)
f(t) = t1/3   if t > 0.008856
f(t) = 903.3t/116 + 16/116   otherwise

L* = 116 × f(Y/Yn) − 16
a* = 500 × [f(X/Xn) − f(Y/Yn)]
b* = 200 × [f(Y/Yn) − f(Z/Zn)]

D65 reference: Xn=0.95047, Yn=1.00000, Zn=1.08883

LCH (cylindrical):
C* = √(a*2 + b*2), h = atan2(b*, a*)
Colour Difference Metrics
CIE76 (ΔE*ab):
ΔE = √[(ΔL*)2 + (Δa*)2 + (Δb*)2]

CIEDE2000 (ΔE00):
Includes G (chroma compensation), SL, SC, SH weighting functions, T (hue-dependent), and RT (rotation term for blue region).

ΔE00 = √[(ΔL′/SL)2 + (ΔC′/SC)2 + (ΔH′/SH)2 + RT(ΔC′/SC)(ΔH′/SH)]
CVD Simulation Matrices (Brettel 1997)
Applied to linear sRGB.

Protanopia:
| 0.152286 1.052583 −0.204868 |
| 0.114503 0.786281 0.099216 |
|−0.003882 −0.048116 1.051998 |

Deuteranopia:
| 0.367322 0.860646 −0.227968 |
| 0.280085 0.672501 0.047413 |
|−0.011820 0.042940 0.968881 |

Tritanopia:
| 1.255528 −0.076749 −0.178779 |
|−0.078411 0.930809 0.147602 |
| 0.004733 0.691367 0.303900 |

Achromatopsia: L = 0.2126R + 0.7152G + 0.0722B
References & Citations

WCAG & Accessibility

[1] W3C — Web Content Accessibility Guidelines (WCAG) 2.2. W3C Recommendation, 2023.

[2] W3C — Understanding SC 1.4.3: Contrast (Minimum) — Level AA.

[3] W3C — Understanding SC 1.4.6: Contrast (Enhanced) — Level AAA.

[4] W3C — Understanding SC 1.4.11: Non-text Contrast — Level AA.

APCA & WCAG 3.0

[5] Somers, A. — APCA Contrast Algorithm. github.com/Myndex/SAPC-APCA.

[6] W3C — W3C Accessibility Guidelines (WCAG) 3.0. Working Draft, 2024.

[7] Somers, A. — Bridge-PCA: bridging WCAG 2 and APCA. Myndex Research.

Colour Science

[8] IEC 61966-2-1:1999 — Default RGB colour space — sRGB.

[9] ITU-R BT.709-6 (2015) — Parameter values for the HDTV standards.

[10] CIE 15:2004 — Colorimetry (3rd Edition). Standard observer, illuminants, chromaticity.

Colour Difference

[11] Sharma, G., Wu, W. & Dalal, E.N. (2005) — The CIEDE2000 Color-Difference Formula. Color Research & Application, 30(1), 21-30.

[12] CIE 142:2001 — Improvement to industrial colour-difference evaluation.

Colour Vision Deficiency

[13] Brettel, H., Viénot, F. & Mollon, J.D. (1997) — Computerized simulation of color appearance for dichromats. JOSA A, 14(10), 2647-2655.

[14] Machado, G.M., Oliveira, M.M. & Fernandes, L.A.F. (2009) — A Physiologically-based Model for Simulation of Color Vision Deficiency. IEEE TVCG, 15(6), 1291-1298.

General Resources

[15] Lindbloom, B. — brucelindbloom.com — Comprehensive colour mathematics and matrices.

[16] Fairchild, M.D. (2013) — Color Appearance Models (3rd ed.). Wiley.

About this tool

This tool implements WCAG 2.2 contrast ratios (AA/AAA), APCA lightness contrast (Lc), CIE L*a*b*/LCH colour-space breakdown, ΔE76 & ΔE00 colour difference, CVD simulation (Brettel 1997) across 4 deficiency types, n×n pair matrix, palette builder, luminance distribution, gamut graph, colour harmonies, tints & shades, batch ΔE analysis, and bootstrap confidence intervals — entirely client-side (zero network). Not a substitute for calibrated measurement or certified WCAG auditing.

Research & Visualization
Batch ΔE Analysis

Enter hex colours (one per line or space-separated) then run pairwise ΔE76, ΔE00, WCAG ratio and level analysis across all pairs.

Bootstrap Confidence Intervals

Bootstrap resampling of ΔE00 against the current foreground colour. Returns 95% CI for the mean ΔE00.

Research backend: WCAG 2.2 · APCA (Lc) · CIE L*a*b*/LCH · ΔE76 · ΔE00 · CVD simulation · n×n matrix · Batch ΔE · Bootstrap CI · Gamut graph · Luminance distribution. All computation on-device.