Chart and Infographic Color Checker
Use this free chart color checker to test the colors in your charts, graphs and infographics. It checks each color's contrast against your background and shows whether people with color blindness can still tell your colors apart. Everything runs in your browser.
Check your chart colors
Chart Background
Chart Colors
Enter 2 to 8 colors, one for each series, bar or slice.
Contrast Against the Background
Bars, lines, pie slices and other chart parts that people need to understand need a contrast ratio of at least 3:1 against the background under WCAG 1.4.11 Non-text Contrast.
Color Blindness Check
How your colors look with different types of color vision, and the pair of colors that is closest together for each.
How the Chart Color Checker Works
The chart color checker runs two tests. The first compares each color with your background using the WCAG contrast ratio formula. Chart parts that carry meaning need at least 3:1, as explained in the W3C's Understanding Non-text Contrast. If a color falls short, the checker suggests the closest lighter or darker shade of the same hue that passes.
The second test simulates how your palette looks with protanopia, deuteranopia and tritanopia, using the model published by Machado, Oliveira and Fernandes (2009), and in grayscale. For each type of vision, it measures the difference between every pair of colors with the CIEDE2000 formula and reports the closest pair. Red and green pairs are the most common problem, because they can look almost the same with protanopia or deuteranopia.
Beyond the Chart Color Checker: Don't Rely on Color Alone
Good colors are only half the job. WCAG 1.4.1 Use of Color says color can never be the only way information is shown, as described in the W3C's Understanding Use of Color. Pair your palette with:
- Direct labels on lines, bars and slices, instead of a color legend alone.
- Patterns or textures, such as solid and striped fills.
- Different marker shapes on line and scatter charts.
- A data table or text summary, which also gives the chart a text alternative under WCAG 1.1.1 Non-text Content.
Checking text colors instead? Use our WCAG color contrast checker, and read our guide to 1.4.3 Contrast (Minimum).
What does the chart color checker test?
Two things. First, the contrast of each chart color against your background, compared with the 3:1 minimum that WCAG 1.4.11 Non-text Contrast sets for graphics people need to understand. Second, how different your colors look to each other with typical vision and with protanopia, deuteranopia, tritanopia and full color blindness, so you can spot colors that people may confuse.
How does it simulate color blindness?
It uses the model by Machado, Oliveira and Fernandes (2009), a widely used method for simulating color vision deficiency, at full severity. Grayscale uses WCAG relative luminance. It then measures how different each pair of colors looks with the CIEDE2000 color difference formula.
What does "hard to tell apart" mean?
We flag a pair of colors when their CIEDE2000 difference is below 10 for that type of vision. This is a practical rule of thumb for small chart marks, not a WCAG requirement. Colors above it can still be hard to match to a legend, which is why charts should never rely on color alone.
Does passing this check make my chart accessible?
Not on its own. WCAG 1.4.1 Use of Color says color cannot be the only way information is shown, so add direct labels, patterns or different marker shapes as well, and offer the data as a table or text. This tool helps you choose colors that work well alongside those cues.
Do you store the colors I enter?
No. Everything is calculated in your browser. The web address updates so you can share a link to your palette, and that link contains only the hex codes.
Check Every Chart on Your Site
Start a 3-day free trial and AccessBell scans up to 500 pages per domain every day for contrast, missing text alternatives and every other automated WCAG check.
Then $29/mo per domain. Cancel anytime.