WCAG Palette Generator

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

Last reviewed: April 2026
Reviewed by , software engineer · last updated April 2026

New to this tool? Click here for instructions

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

How to Use the WCAG Palette Generator

To use the WCAG Palette Generator, follow these steps:

1. Pick a Base Color: Choose the brand or design color you want to find accessible variants of.

2. Select a Target Level: Choose between AA (4.5:1) for standard compliance or AAA (7:1) for enhanced accessibility.

3. Choose a Background: Select either a light (#FFFFFF) or dark (#1a1a2e) background, or enter a custom background color.

4. Review the Palette: All generated shades will show their contrast ratio and AA/AAA pass/fail badges.

5. Export Passing Colors: Copy the colors as CSS variables, Tailwind config, or SCSS variables.

When to Use the Tool in Real Workflows

Use the WCAG Palette Generator when you need to ensure that your digital content is accessible to people with visual impairments. This includes:

1. Web Design: When creating or updating websites to meet WCAG standards.

2. Graphic Design: When designing logos, icons, and other visual elements that need to be accessible.

3. Branding: When developing a brand identity that includes accessible color palettes.

4. Document Design: When creating documents that need to be accessible to all users.

How It Works

The WCAG Palette Generator works by:

1. Receiving Input: You provide a base color, target level, and background.

2. Generating Variants: The tool generates up to 18 shades of the base color, adjusting the lightness from 5% to 95% in 5% increments.

3. Testing Contrast: Each shade is tested against the chosen background to ensure it meets the selected WCAG contrast ratio.

4. Displaying Results: The tool displays all generated shades, showing their contrast ratio and whether they pass or fail the selected WCAG level.

5. Exporting Results: You can export only the passing shades in various formats like CSS variables, Tailwind config, or SCSS variables.

Tips, Edge Cases, or Limitations

Here are some tips and considerations when using the WCAG Palette Generator:

1. Test Both Backgrounds: Always test your palette against both light and dark backgrounds to ensure accessibility in all modes.

2. Consider Color Blindness: While WCAG contrast ratios ensure sufficient luminance contrast, they do not address color blindness. Consider additional design considerations for color blindness.

3. Legal Compliance: Ensure that your use of accessible colors complies with relevant laws and regulations, such as the European Accessibility Act, ADA, and Section 508.

4. Early Integration: Integrate the WCAG Palette Generator into your design workflow during the early stages to ensure accessible design by default.

5. Regular Updates: Regularly update your accessible color palette as your brand or design evolves.

Frequently Asked Questions

An accessible color palette is a set of colors that meet the contrast requirements specified by the Web Content Accessibility Guidelines (WCAG) to ensure that text and other content is readable by people with visual impairments.
AA compliance requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA compliance requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
The tool generates up to 18 shades of the base color, adjusting the lightness from 5% to 95% in 5% increments, and tests each shade against the chosen background to ensure it meets the selected WCAG contrast ratio.
Yes, you can use these colors with both light and dark backgrounds. It's important to test your palette against both backgrounds to ensure accessibility in all modes.
You can export only the passing shades in various formats like CSS variables, Tailwind config, or SCSS variables.