Theme color testing

The colors of a chart theme have more jobs than the colors of buttons and text. Readers have to tell the series apart from the page, and from each other. Some charts print labels in the series colors, others put labels on top of the series. All of that has to work for readers with a color vision deficiency too.

This page checks the colors of a theme for all of these at once. Start from a built-in theme, change the series colors, the page background or the label color, and see the results, with what each failure means and which color would fix it. The same checks run in unit tests with @recharts/devtools/theme, which takes your RechartsTheme as it is, so you can keep your theme readable as it changes. Every threshold links to the standard that defines it, and where no standard exists, this page says so.

Theme checker

import { lightTheme, type RechartsTheme } from 'recharts';
import { analyzeTheme, themeFailures } from '@recharts/devtools/theme';

// In your project, import your own theme instead.
const myTheme: RechartsTheme = {
  ...lightTheme,
  pageBackground: '#fff',
  typography: { ...lightTheme.typography, color: '#010101' },
  graphicalItems: [
    { fill: '#2373e6', stroke: '#2373e6', fillOpacity: 0.85 },
    { fill: '#b65700', stroke: '#b65700', fillOpacity: 0.85 },
    { fill: '#017a58', stroke: '#017a58', fillOpacity: 0.85 },
    { fill: '#a5386e', stroke: '#a5386e', fillOpacity: 0.85 },
    { fill: '#6b53b0', stroke: '#6b53b0', fillOpacity: 0.85 },
    { fill: '#0681a0', stroke: '#0681a0', fillOpacity: 0.85 },
    { fill: '#b13629', stroke: '#b13629', fillOpacity: 0.85 },
    { fill: '#628039', stroke: '#628039', fillOpacity: 0.85 },
    { fill: '#723683', stroke: '#723683', fillOpacity: 0.85 },
    { fill: '#39807c', stroke: '#39807c', fillOpacity: 0.85 },
    { fill: '#9b6e27', stroke: '#9b6e27', fillOpacity: 0.85 },
    { fill: '#aa5a9e', stroke: '#aa5a9e', fillOpacity: 0.85 },
  ],
};

test('my theme is readable', () => {
  const report = analyzeTheme(myTheme, {
    severity: 1,
    thresholds: { seriesDifference: 10, seriesDifferenceCvd: 2 },
  });
  expect(themeFailures(report)).toEqual([]);
});

What each check measures

Every check runs for every page background, and for typical vision plus three simulated color vision deficiencies.

Contrast

WCAG 2.2 sets contrast ratios between 1:1 and 21:1, computed from the relative luminance of the two colors, as its contrast ratio definition describes. Three success criteria matter for charts:

• SC 1.4.3 Contrast (Minimum), level AA: text needs 4.5:1, or 3:1 when it is large-scale.
• SC 1.4.6 Contrast (Enhanced), level AAA: text needs 7:1, or 4.5:1 when it is large-scale.
• SC 1.4.11 Non-text Contrast, level AA: graphical objects that are required to understand the content need 3:1 against adjacent colors.

The defaults are the level AA numbers for normal text. The WCAG_CONTRAST export holds the others, and you can pass any of them as thresholds.textContrast.

The Understanding document for SC 1.4.11 has examples for charts. In a line chart, the lines need 3:1 against the background, but not against each other when they rarely overlap. In a pie chart, readers have to tell the slices apart, so neighboring slices need 3:1 against each other, unless something else separates them, like a contrasting border, or labels that carry the same information. That is what the seriesContrast check measures. It has no default threshold, because whether it applies depends on your chart: in the checker, turn on "My series touch each other" to require 3:1, and in a unit test pass thresholds: { seriesContrast: 3 }.

Telling series apart

No standard defines how different two series colors must be. WCAG asks for something else instead: SC 1.4.1 Use of Color says color must not be the only visual means of conveying information. Direct labels, different markers or dash patterns give readers another way to tell series apart.

Color difference still matters: the closer two colors are, the more often readers mix them up. The seriesVsSeries check measures it with CIEDE2000, the color difference formula of the CIE, standardized as ISO/CIE 11664-6. Gaurav Sharma publishes implementation notes and test data for it, and the devtools test suite checks against that data.

How large a difference is large enough depends on the chart. In Modeling Color Difference for Visualization Design (IEEE TVCG, 2018), Danielle Albers Szafir found that people's ability to perceive color differences varies significantly across mark types: points, bars and lines. That is why seriesDifference and seriesDifferenceCvd have no default. The checker above starts with the numbers the built-in Recharts themes are tested with: ΔE00 10 in typical vision and 2 under simulation. These are project choices, not standards.

Color vision deficiencies

The checks simulate protanopia, deuteranopia and tritanopia with the model of Machado, Oliveira and Fernandes, A Physiologically-based Model for Simulation of Color Vision Deficiency (IEEE TVCG, 2009, doi:10.1109/TVCG.2009.113). A severity below 1 approximates anomalous trichromacy, a milder form. The model is published in steps of 0.1.

The model mixes amounts of light, so it applies to linear RGB, not to the gamma-encoded values of a hex color. The R package colorspace fixed this in version 2.1-0. The difference is small for muted colors and noticeable for saturated reds, purples and oranges.

A simulation approximates what some readers see. It does not replace testing with them. Also note that WCAG defines contrast for the colors as they are displayed. The contrast checks under simulation are an extra warning sign, not a WCAG requirement: turn them off by passing visions: ['normal'] to a separate analyzeTheme call.

How colors are measured

Colors are sRGB, as CSS Color Module Level 4 defines them. A translucent fill is first painted over the page with simple alpha compositing, which gives the color the reader actually sees, and then the color is simulated and measured.

All the color math comes from culori: parsing, compositing, WCAG contrast, CIEDE2000, the simulation matrices and the OKLCH lightness that the suggested fixes move along. The theme module only combines them.

Testing your own theme

Install @recharts/devtools as a development dependency. analyzeTheme takes your RechartsTheme object as it is and reads its graphicalItems, typography.color and pageBackground. Nothing from React or Recharts runs: the theme is plain data, and Recharts 3.11 or newer only provides its type. The @recharts/devtools/theme entry point runs in any test runner that supports ES modules.

import { analyzeTheme, themeFailures } from '@recharts/devtools/theme';
import { myTheme } from './myTheme';

test('my theme is readable', () => {
  const report = analyzeTheme(myTheme, {
    // No standard defines these two. Pick numbers that fit your marks, see "Telling series apart".
    thresholds: { seriesDifference: 10, seriesDifferenceCvd: 2 },
    // Our labels sit outside the bars, never on top of a series fill.
    checks: { textOnSeries: false },
  });
  expect(themeFailures(report)).toEqual([]);
});

By default the checks run on the theme's pageBackground. Pass other backgrounds when the theme shows on more than one surface:

// The theme also shows on cards, so check both surfaces.
analyzeTheme(myTheme, { backgrounds: { page: '#ffffff', card: '#f4f4f5' } });

// A light and a dark theme are two themes: check each one.
analyzeTheme(myLightTheme);
analyzeTheme(myDarkTheme);

analyzeTheme returns plain data: every measured value with its threshold, its standard and, when it fails, the nearest color that would pass. themeFailures turns the failed checks into one readable line each, fix included. See the Theming guide for how to write a theme.

Which standard applies to you

WCAG is the reference for most accessibility laws and standards, in one version or another. According to the W3C WCAG overview, WCAG 2.2 is also the international standard ISO/IEC 40500:2025, and EN 301 549, the European standard used for the European Accessibility Act, uses WCAG 2.2 in its 2026 version. In the United States, the Section 508 standards incorporate WCAG 2.0 level A and AA, and the ADA Title II rule adopts WCAG 2.1 level AA. Check which version applies to you: this page links WCAG 2.2.

WCAG 3 is an early draft, not a standard yet, so this page does not use it.