WCAG 2.2 Contrast Requirements
W3C WCAG 2.2 (2023) — Web Content Accessibility Guidelines define minimum contrast ratios using the WCAG luminance formula (IEC 61966-2-1 sRGB transfer function).
- AA normal text: 4.5:1 minimum
- AA large text / UI components: 3:1 minimum
- AAA normal text: 7:1 minimum
- AAA large text: 4.5:1 minimum
CVD Prevalence & Types
Colour-Vision Deficiency (CVD) affects approximately 8% of males and 0.5% of females of Northern European descent. Three primary types:
- Protanopia / Protanomaly: Reduced red cone sensitivity. ~2% of males.
- Deuteranopia / Deuteranomaly: Reduced green cone sensitivity. ~6% of males.
- Tritanopia / Tritanomaly: Reduced blue cone sensitivity. Very rare, ~0.003%.
Brettel matrices (Brettel, Viénot & Mollon, 1997) provide the most accurate simulation of dichromacy by operating in linear RGB via two half-plane projections.
OKLCH Color Space
OKLCH (CSS Color Level 4) — Perceptually uniform polar color space by Björn Ottosson (2020). Built on the OKLab model which fixes hue linearity problems in CIECAM02 and IPT. Components: L (perceived lightness 0–1), C (chroma), H (hue angle 0–360°).
OKLCH enables perceptually uniform color manipulation: equal steps in C or H
produce equal-looking differences regardless of hue. Ideal for palette generation and
harmony construction. Supported natively in modern CSS as
oklch(L C H).
Colour Quantisation
4-bit quantisation — Pixels are reduced from 8-bit per channel to 4-bit per channel (16 levels per channel, 4096 unique values), binned by occurrence, and the most frequent bins are taken as cluster centres. This is a fast approximation of k-means that avoids iterative convergence at the cost of some accuracy.
For high-quality quantisation, consider Median Cut (Heckbert 1982), Octree quantisation, or NeuQuant neural network algorithms.
CIEDE2000 (ΔE₀₀)
Sharma, Wu & Dalal, 2005 — CIEDE2000 is the current ICC-recommended perceptual colour difference metric. It corrects lightness, chroma, and hue weighting separately, adds a rotation term for the blue region (hue ≈ 275°), and compensates for incomplete adaptation in the CIE 1931 blue–violet region.
- ΔE < 1: imperceptible difference
- ΔE 1–2: perceptible on close inspection
- ΔE 2–10: perceptible at a glance
- ΔE > 10: colours are more similar than different
Colour Harmony Theory
OKLCH-based harmony modes manipulate hue angle H while preserving perceptual lightness L and chroma C:
- Complementary: H and H+180°
- Analogous: Evenly spread across ±30° of H
- Triadic: H, H+120°, H+240°
- Tetradic: H, H+90°, H+180°, H+270°
- Split-Complementary: H, H+150°, H+210°
SVG Colour Replacement
SVG recolouring uses regex-based hex find-replace on the raw SVG text. All 3-digit
and 6-digit hex values (#RGB and
#RRGGBB) are matched and replaced with the nearest
palette target colour using RGB Euclidean distance to cluster centre mapping.
Limitations: Named colours (red,
fill="blue"), CSS custom properties, and
rgb() notation are not detected. SVG must use hex fills.
sRGB Transfer Function
C_lin = C_8 / 12.92 if C_8 ≤ 0.04045
C_lin = ((C_8 + 0.055) / 1.055)^2.4 otherwise
where C_8 = (channel / 255)
Relative Luminance (WCAG)
Contrast ratio: (L1 + 0.05) / (L2 + 0.05)
where L1 = lighter luminance, L2 = darker luminance
OKLab & OKLCH
[l,m,s] = M1 × [R,G,B]
[L_,m_,s_] = [cbrt(l), cbrt(m), cbrt(s)]
[L,a,b] = M2 × [L_,m_,s_]
OKLab → OKLCH:
C = sqrt(a^2 + b^2)
H = atan2(b, a) × 180/π (mod 360)
CVD Simulation (Brettel)
2. Apply Brettel matrix M for deficiency type:
[R', G', B'] = M × [R_lin, G_lin, B_lin]
3. Clamp [0,1], re-encode to sRGB
Protan M row 0: [0.1523, 1.0526, -0.2049]
Deutan M row 0: [0.3673, 0.8606, -0.228]
Tritan M row 0: [1.2555, -0.0767, -0.1788]
OKLCH Gamut Mapping
lo = 0, hi = C_original
for i in 0..19:
mid = (lo + hi) / 2
rgb = oklch_to_srgb(L, mid, H)
if in_gamut(rgb): lo = mid, save ok
else: hi = mid
Use ok as result (clamp R,G,B to [0,1])
Cluster-to-Palette Mapping
dist(C_i, P_j) = (R_i-R_j)^2 + (G_i-G_j)^2 + (B_i-B_j)^2
mapping[i] = argmin_j( dist(C_i, P_j) )
Raster recolour: per-pixel nearest-centre assignment,
then output pixel ← targetRGB[nearest]
CIEDE2000 (ΔE₀₀)
SL = 1 + 0.015*(Lbar'-50)^2 / sqrt(20+(Lbar'-50)^2)
SC = 1 + 0.045*Cbar'
SH = 1 + 0.015*Cbar'*T
RT corrects hue/chroma interaction in the blue region (hbar' approx 275 deg).
Colour Vision Deficiency Simulation
[2] Viénot, F., Brettel, H. & Mollon, J.D. (1999) — Digital video colourmaps for checking the legibility of displays by dichromats. Color Research & Application, 24(4), 243-252.
OKLCH Color Space
[4] CSS Color Level 4 (W3C, 2023) — oklch() and oklab() color space definition. www.w3.org/TR/css-color-4/
[5] IEC 61966-2-1:1999 — Default RGB colour space — sRGB. Transfer function definition.
Colour Difference
[7] CIE 142:2001 — Improvement to industrial colour-difference evaluation.
Accessibility Standards
[9] W3C WCAG 3 Working Draft — APCA Lightness Contrast. Accessible Perceptual Contrast Algorithm by Andrew Somers.
Colour Quantisation
[11] Gervautz, M. & Purgathofer, W. (1988) — A Simple Method for Color Quantization: Octree Quantization.
About this tool
This tool implements SVG and PNG upload, 4-bit quantised colour extraction, OKLCH/OKLab analysis, cluster-to-palette mapping via RGB Euclidean distance, pixel-level raster recolouring, SVG hex find-replace, Brettel CVD simulation (protan/deutan/tritan), WCAG contrast matrix, CIEDE2000 heatmap, 4 analysis canvases (hue wheel, lightness, chroma, ΔE heatmap), gradient preview, and full exports (HEX/CSS/JSON/CSV/SVG/PNG) — entirely client-side (zero network). Not a substitute for professional accessibility auditing or calibrated CVD simulation software.
{}