WCAG Palette Generator

Find accessible shades of any color that pass WCAG AA or AAA contrast against your background.

Export (Passing Colors Only)
Pick a base color, target level, and background to generate accessible variants.

How to Use the WCAG Palette Generator

  1. Pick a base color — this is the brand or design color you want to find accessible variants of.
  2. Choose a target level — AA (4.5:1) for standard compliance or AAA (7:1) for enhanced accessibility.
  3. Select the background — Light (#FFFFFF), Dark (#1a1a2e), or enter a custom background color.
  4. Review the palette — all generated shades show their contrast ratio and AA/AAA pass/fail badges.
  5. Export passing colors — copy as CSS variables, Tailwind config, or SCSS variables.

Why Accessible Colors Matter

Approximately 1.3 billion people worldwide live with some form of visual impairment, according to the World Health Organization. Color contrast is one of the most fundamental accessibility requirements for digital content. When text does not have sufficient contrast against its background, users with low vision, color blindness, or simply suboptimal viewing conditions (bright sunlight, old monitors) cannot read it. Designing with accessible colors from the start is easier and cheaper than retrofitting later.

Building an Accessible Design System

Most design systems include a palette of color shades, typically numbered from 50 (lightest) to 900 (darkest). Not all shades in a standard palette will be accessible for text. This tool helps you identify which shades of your brand color can be safely used as text on your chosen background. You can then document these as your "accessible text colors" in your design system, preventing accessibility issues before they happen.

The Lightness Approach

This tool generates palette variants by keeping the hue and saturation of your base color constant while adjusting the lightness from 5% (nearly black) to 95% (nearly white) in 5% increments. Each variant is tested against your background for contrast compliance. This approach preserves the "feel" of your brand color while finding the specific shades that meet accessibility requirements.

Light vs Dark Backgrounds

The same color shade behaves very differently on light and dark backgrounds. A mid-tone green might pass AA on a white background but fail completely on a dark background (or vice versa). That is why this tool lets you test against different backgrounds. For a complete design system, test your palette against both light and dark themes to ensure accessibility in all modes.

Legal Requirements

Color contrast is not just a best practice — it is a legal requirement in many jurisdictions. The European Accessibility Act, the Americans with Disabilities Act (ADA), Section 508, and similar laws around the world reference WCAG 2.1 Level AA as the minimum standard. Non-compliance can result in lawsuits, fines, and reputational damage. Proactively designing with accessible colors protects your organization.

Integrating with Your Design Workflow

The most effective way to use this tool is during the early stages of your design process, before components are built. Start with your brand color, generate the accessible palette against both light and dark backgrounds, then use only the passing colors in your design tokens or style guide. This "accessible by default" approach eliminates the need for costly accessibility audits later. Export the palette as CSS variables or Tailwind config and share with your team so everyone uses the same verified colors.

Color Blindness Considerations

While WCAG contrast ratios ensure sufficient luminance contrast, they do not address color blindness. Approximately 8% of men and 0.5% of women have some form of color vision deficiency, with red-green color blindness being the most common. When building an accessible palette, avoid relying solely on color to distinguish information — always supplement color differences with text labels, icons, or patterns. For example, do not rely on green for success and red for error without also including a checkmark icon and an X icon respectively. Check individual color pairs with our Color Contrast Checker, explore broader color harmonies with the Color Palette tool, or pair your accessible palette with harmonious type sizes using the Typography Scale.

Frequently Asked Questions

An accessible color palette is a set of colors that meet WCAG contrast ratio requirements when used as text on a specific background. This ensures that people with visual impairments, including color blindness and low vision, can read the text comfortably.
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text, while AAA requires 7:1. AA is the standard compliance level required by most accessibility laws. AAA provides enhanced readability and is recommended for text-heavy content like articles and documentation.
The tool takes your base color's hue and saturation, then generates variations by adjusting the lightness from 5% to 95%. Each variation is tested against your chosen background color to determine if it meets the target WCAG contrast ratio. Only passing colors are shown in the palette.
Each swatch shows pass/fail badges for AA and AAA against the selected background. You can switch between Light, Dark, or Custom backgrounds to see which shades work for each. Typically, darker shades pass on light backgrounds and lighter shades pass on dark backgrounds.
Click the export format chips below the palette to switch between CSS custom properties, SCSS variables, and Tailwind CSS config. Then click Copy to copy the code to your clipboard. Only the colors that pass the selected WCAG level are included in the export.