Accessible Chart Palette Builder – Online Data Visualization

An accessible chart palette ensures that all viewers—including those with color vision deficiencies (CVD), low vision, or using monochrome displays—can distinguish data categories. Key criteria: sufficient contrast ratios (WCAG AA ≥4.5:1 or AAA ≥7:1 against backgrounds), perceptual distinguishability under colorblind simulations, and grayscale discriminability. This tool bakes in all three checks.

Protanopia (red-blind, ~1% of males) affects L-cones—reds appear darker or brownish. Deuteranopia (green-blind, ~1-5% of males) affects M-cones—greens and reds look similar. Tritanopia (blue-blind, very rare, <0.01%) affects S-cones—blues and yellows become hard to distinguish. Combined, CVD affects ~8% of males and ~0.5% of females. Simulating these helps you build truly inclusive visualizations.

Qualitative (categorical): Best for nominal data with no inherent order (e.g., countries, product types). Uses distinct hues at similar lightness. Sequential: For ordered data from low to high (e.g., population density, temperature). Uses a single hue that varies in lightness/saturation. Diverging: For data with a meaningful midpoint (e.g., election margins, z-scores). Uses two contrasting hues that meet at a neutral center.

WCAG (Web Content Accessibility Guidelines) is the global standard for digital accessibility (ISO/IEC 40500). For charts, WCAG 2.1 SC 1.4.3 (Contrast Minimum) requires at least 4.5:1 contrast ratio for normal text and graphical elements against their background. SC 1.4.11 (Non-text Contrast) extends this to UI components and meaningful graphics—including chart elements. AAA level requires 7:1. This tool calculates ratios precisely using the WCAG relative luminance formula.

The matrix shows pairwise contrast ratios between every color in your palette plus a white (#FFFFFF) reference row. Each cell displays the ratio (e.g., 6.8:1) and is color-coded: green = passes AAA (≥7:1), amber = passes AA (≥4.5:1 but <7:1), red = fails (<4.5:1). This helps you spot problematic pairings—crucial for adjacent bars or overlapping elements.

The tool uses LMS (Long-Medium-Short cone) color space transformations based on the Brettel-Viénot-Mollon model, the most widely-cited method in vision science literature. While no simulation perfectly replicates lived experience (severity varies), this approach is considered the gold standard for accessibility testing in design tools. The grayscale mode uses luminance-preserving desaturation per ITU-R BT.709 coefficients.

Absolutely. Use the Export panel to copy HEX arrays directly into your code. For Python (matplotlib/seaborn), paste as a list: ['#E69F00','#56B4E9',...]. For R (ggplot2), use scale_fill_manual(values=c(...)). For D3.js, use the array in d3.scaleOrdinal(). For Tableau, you can manually enter the HEX values in the color palette editor. CSS custom properties export is ideal for web-based charting libraries.

Rainbow/jet palettes are notoriously inaccessible: they contain uneven perceptual steps, create false boundaries, and fail completely under most forms of colorblindness. Studies (e.g., Borland & Taylor, 2007; Moreland, 2009) consistently show they mislead viewers. The presets here—Wong's, Tol's, Okabe-Ito, ColorBrewer, Viridis—are all peer-reviewed, perceptually uniform, and CVD-tested palettes recommended by scientific visualization communities.