Color Pair
BG
FG
Background and foreground colors. Auto-fix adjusts luminance to meet WCAG AA.
Font Metrics
Font size & weight affect large-text classification (≥18pt or ≥14pt bold).
Contrast Standard
WCAG 2.x uses relative luminance ratio. WCAG 3.0 uses APCA (Lc).
CVD Simulation
Simulation strength100%
Applies Viénot/Machado matrices. Strength 0–100%.
Image CVD Simulation
Upload JPG/PNG (max 600×600 px). Original & simulated shown in results.
Keyboard Shortcuts
C Copy WCAG summary
R Reset colors
Ctrl+Z Undo · Ctrl+Shift+Z Redo
Swatches — Background vs Foreground
Background
HEX: — · RGB: — · L: —
Foreground
HEX: — · RGB: — · L: —
Contrast Metrics
WCAG 2.x Ratio
APCA Lc
ΔE (CIEDE2000)
AA Normal
AA Large
AAA Normal
AAA Large
Live Text Preview
Heading sample (18pt)
Body text sample — evaluated against WCAG 2.x and APCA thresholds for normal and large text. Adjust colors, font size, and weight.
Small bold label (12pt bold)
CVD Simulated Pair
BG (CVD)
HEX: — · RGB: —
FG (CVD)
HEX: — · RGB: —
CVD Ratio
CVD ΔE
Design Advisor
Adjust colors to see contrast recommendations.
Image CVD Simulation
🖼️
No image loaded

Upload a JPG or PNG to preview how it looks under different color vision deficiencies.

Export & Share
Bookmark saves locally. Share URL encodes BG/FG/CVD. JSON/CSS/SVG export full color pair data.
Global Actions
Accessible Palette Generator
Generates 8 foreground colors that meet WCAG AA (4.5:1) against your current background.
Bookmarks
Saved color pairs persist locally. Click to apply.
Multi-Condition Comparison
5
WCAG & CVD Standards Overview
WCAG 2.x Contrast Requirements

Definition: WCAG 2.1/2.2 defines minimum contrast ratios to ensure readability for users with low vision or CVD. Contrast is measured via relative luminance of the lighter and darker colors.

Thresholds: Normal text: 4.5:1 (AA), 7:1 (AAA). Large text (≥18pt or ≥14pt bold): 3:1 (AA), 4.5:1 (AAA).

Formula: L = 0.2126×R + 0.7152×G + 0.0722×B · CR = (L₁+0.05)/(L₂+0.05)

WCAG 3.0 & APCA

Overview: APCA is the proposed contrast method for WCAG 3.0. Polarity-aware (distinguishes dark-on-light from light-on-dark) using perceptual lightness model (Lc).

Lc Values: Range 0 to ±108. Minimum thresholds vary by font size/weight (e.g., 16px normal text: Lc ≥ 75; 24px bold: Lc ≥ 45).

Advantages: Better perceptual uniformity, accounts for spatial frequency (font size), handles dark mode more accurately than WCAG 2.x.

Color Vision Deficiency Types
  • Protanopia (Red-Blind): Absence of L-cone photoreceptors. ~1% of males.
  • Protanomaly (Red-Weak): Anomalous L-cone. ~1% of males.
  • Deuteranopia (Green-Blind): Absence of M-cone. ~1% of males.
  • Deuteranomaly (Green-Weak): Anomalous M-cone. Most common CVD; ~5% of males.
  • Tritanopia (Blue-Blind): Absence of S-cone. ~0.003%, affects both sexes.
  • Tritanomaly (Blue-Weak): Anomalous S-cone. Extremely rare.
  • Achromatopsia (Monochromacy): No cone function. ~1 in 30,000.
Simulation Models (Brettel, Viénot, Machado)

Brettel et al. (1997): Gold-standard dichromat simulation using LMS cone space projections with two half-planes separated by the neutral axis.

Viénot et al. (1999): Simplified single-matrix approximation. Faster but less accurate near the neutral axis.

Machado et al. (2009): Extends to anomalous trichromacy; severity parameter (0–1) interpolates between normal and full dichromacy.

Inclusive Design Principles
  • Don’t rely on color alone: Use shape, pattern, text labels, or icons (WCAG 1.4.1).
  • Test with real users: Automated tools catch ratio failures but miss context issues.
  • Consider dark mode: APCA handles polarity better than WCAG 2.x.
  • UI components: Non-text UI requires 3:1 contrast (WCAG 1.4.11).
  • Provide alternatives: High-contrast mode, user-adjustable themes, forced-colors support.
Regulatory Standards & Compliance
  • Section 508 (US): Federal ICT must conform to WCAG 2.0 AA (updated guidance references WCAG 2.1).
  • EN 301 549 (EU): Mandates WCAG 2.1 AA for public sector websites and apps.
  • ADA (US): Courts increasingly interpret Title III to require web accessibility.
  • ISO 9241-3: VDT display readability standards including luminance contrast.
Mathematical Models & Contrast Computation

Relative Luminance & WCAG 2.x Ratio:

Step 1: Inverse gamma (sRGB → linear RGB)
if (C ≤ 0.04045): C_linear = C / 12.92
else: C_linear = ((C + 0.055) / 1.055)^2.4

Step 2: Relative luminance (Rec.709):
L = 0.2126×R + 0.7152×G + 0.0722×B

Step 3: Contrast ratio (WCAG 2.x):
CR = (L_lighter + 0.05) / (L_darker + 0.05)

Range: [1:1, 21:1] · Black on White = 21:1
Research, Standards & Citations

WCAG & Contrast Standards

[1] W3C (2023). Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/ — Definitive contrast ratio requirements.

[2] A. Somers (2022). APCA Contrast Algorithm. WCAG 3.0 Working Draft. Polarity-aware perceptual contrast method proposed for WCAG 3.0.

[3] ISO 9241-3:1992. Ergonomic requirements for VDTs. VDT display readability standards including luminance contrast.

Color Vision Deficiency Simulation

[4] H. Brettel, F. Viénot, J. D. Mollon (1997). “Computerized simulation of color appearance for dichromats,” JOSA A, 14(10), 2647–2655. Gold-standard dichromat simulation in LMS cone space.

[5] F. Viénot, H. Brettel, J. D. Mollon (1999). “Digital video colourmaps for dichromats,” Color Res. App., 24(4), 243–252. Simplified single-matrix approximation used in this lab.

[6] G. M. Machado, M. M. Oliveira, L. A. F. Fernandes (2009). “A physiologically-based model for simulation of color vision deficiency,” IEEE TVCG, 15(6), 1291–1298. Continuous severity interpolation for anomalous trichromacy.

Colorimetry & Colour Difference

[7] CIE (2004). Colorimetry, 3rd Ed. CIE 15:2004. CIELAB, XYZ, standard illuminants, colour difference formulae.

[8] G. Sharma, W. Wu, E. N. Dalal (2005). “The CIEDE2000 color-difference formula,” Color Res. App., 30(1), 21–30. DOI: 10.1002/col.20070

[9] M. D. Fairchild (2013). Color Appearance Models, 3rd ed. Wiley. Colour appearance, cone fundamentals, chromatic adaptation.

Perceptual Colour Spaces

[10] B. Ottosson (2020). “A perceptual color space for image processing.” OKLab color space used for perceptual ΔL computation.

Regulatory & Industry Standards

[11] US Access Board (2017). Section 508 ICT Accessibility Standards. https://www.access-board.gov/ict/

[12] ETSI (2021). EN 301 549 V3.2.1 — Accessibility requirements for ICT. Mandates WCAG 2.1 AA for EU public sector.

About this tool

This tool implements WCAG 2.2/3.0 contrast analysis, APCA perceptual contrast, CVD simulation across all major deficiency types, accessible palette generation, ΔE metrics, confusion-line diagnostics, and batch analysis — entirely client-side (zero network). Not a substitute for clinical colour vision testing or calibrated measurement.

Research & Advanced Analysis
Advanced Perceptual Metrics

OKLab ΔL, CIEDE2000, CIE76, Michelson/Weber contrast, full L*a*b* & OKLab coordinates.

Click Analyse to compute research-grade metrics.
Fix Suggestions

Nearest perceptually-minimal adjustments (by ΔE2000) that achieve your target contrast. Click a chip to apply.

Click Suggest Fixes to see colour suggestions.
Full Audit Report

Generates a structured compliance report covering WCAG 2.0/2.1/2.2, EN 301 549, Section 508, with CVD impact analysis for all 8 vision types.

Click Generate Report to produce a full multi-standard audit.
Batch Contrast Analysis

Enter one colour pair per line (#FG #BG). Returns WCAG ratio, APCA Lc, AA/AAA compliance, and CVD impact per pair.

CIE xy Confusion Lines — copunctal point · spectral locus · D65 white · BG/FG markers
Gamut Impact — 36 hue slices · original vs CVD simulated
Research backend: WCAG 2.0/2.1/2.2 · APCA-W3 · OKLab · CIEDE2000/ΔE76 · Viénot/Machado CVD algorithms · Confusion lines · Gamut impact · Batch analysis up to 200 pairs · Full audit reports. All computation on-device.