No Login Data Private Local Save

Colorblind-Safe Palette Builder - Online Check & Generate Schemes

9
0
0
0

Colorblind-Safe Palette Builder

Build, simulate & verify colorblind-friendly color schemes for accessible data visualization and UI design.

Your Palette 5 colors
Presets:
Colorblind Simulation
Simulation based on Machado et al. (2009) cone-opponent model. Allows you to see how your palette appears to ~8% of males with color vision deficiency.
Live Preview

Bar Chart

Scatter / Line

Heatmap Grid

WCAG Contrast Checker
#333333
#FFFFFF
21.00 :1
Frequently Asked Questions
What are colorblind-safe palettes?
Colorblind-safe palettes are color schemes designed to remain distinguishable by people with various types of color vision deficiency (CVD). Approximately 8% of males and 0.5% of females have some form of color blindness. A well-designed palette uses colors that differ in lightness and saturation—not just hue—ensuring that information conveyed through color is accessible to all viewers. Key strategies include avoiding red-green combinations, incorporating blue-orange contrasts, and ensuring sufficient luminance differences between adjacent colors.
What types of color blindness does this tool simulate?
This tool simulates four major types: Protanopia (red-blindness, missing L-cones, ~1% of males), Deuteranopia (green-blindness, missing M-cones, ~1% of males), Tritanopia (blue-yellow blindness, missing S-cones, very rare ~0.01%), and Achromatopsia (total color blindness, rod-only vision, extremely rare). Protanopia and deuteranopia are collectively called red-green color blindness and account for over 99% of CVD cases. The simulation uses the Machado et al. (2009) physiological model for accurate representation.
How does WCAG contrast ratio work?
WCAG (Web Content Accessibility Guidelines) defines contrast ratio as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance values of the lighter and darker colors respectively. Relative luminance is calculated from sRGB values using the formula: L = 0.2126Ă—R + 0.7152Ă—G + 0.0722Ă—B (with linearized RGB components). AA compliance requires a ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA compliance requires 7:1 for normal text and 4.5:1 for large text. A ratio of 21:1 represents pure black on pure white.
Which preset palettes are recommended for data visualization?
We include several scientifically-validated palettes: IBM Safe (designed by IBM's accessibility team, great for enterprise dashboards), Wong's 7 (from Bang Wong's seminal 2011 paper, optimized for maximum distinguishability under CVD), Tol Bright (Paul Tol's high-contrast scheme for scientific figures), Tableau 10 (the default palette of Tableau, tested for colorblind accessibility), and Okabe-Ito (the most-cited palette in academic literature, specifically designed for CVD-safe scientific communication). All these palettes have been tested with real CVD observers.
Why should I care about colorblind accessibility in my designs?
Beyond being an ethical imperative for inclusive design, colorblind accessibility is increasingly a legal requirement under regulations like the Americans with Disabilities Act (ADA) and Section 508. In the EU, the European Accessibility Act (EAA) will mandate accessible digital products by 2025. Additionally, accessible designs benefit all users—not just those with CVD—in low-light conditions, on poor-quality displays, or when printed in grayscale. Investing in colorblind-safe design expands your audience reach and improves overall user experience while mitigating legal risk.
How many colors should a colorblind-safe palette have?
Research suggests that 4-8 colors is the sweet spot for colorblind-safe qualitative palettes. Beyond 8 colors, even people with normal vision struggle to distinguish categories quickly. For CVD-safe designs, Wong's 7-color palette and Tol's 6-7 color schemes are widely considered optimal. If you need more categories, consider combining color with other visual encodings like patterns, textures, shapes, labels, or varying lightness levels. This multi-channel approach is the most robust strategy for accessible data visualization.