Skip to main content

Accessible Color Palette Generator & Contrast Checker

Generate mathematically safe, 5-color palettes guaranteed to pass WCAG contrast guidelines.

Ensure your UI designs are readable for everyone. This tool automatically calculates relative luminance and generates a 5-color safe palette where every combination passes minimum contrast ratios, or lets you manually check specific color pairs. It runs entirely in your browser with no data leaving your device.

Use the Tool​

🔓 Unlocked
🔓 Unlocked
🔓 Unlocked
🔓 Unlocked
🔓 Unlocked

Accessibility Contrast Matrix

#000000#222222#777777#CCCCCC#FFFFFF
#000000-1.32:14.69:113.08:121.00:1
#2222221.32:1-3.55:19.91:115.91:1
#7777774.69:13.55:1-2.79:14.48:1
#CCCCCC13.08:19.91:12.79:1-1.61:1
#FFFFFF21.00:115.91:14.48:11.61:1-

Have feature request?
If you want to see a specific feature or integration, let me know!
Contact Me

Get notified about updates to this tool

No spam. Just high-quality updates about new features and guides.

What This Tool Does​

What the tool does​

This application acts as both a Contrast Checker and a Safe Palette Generator. It automatically picks 5 colors that all have passing contrast ratios against each other, creating a fully accessible foundation for design systems. If you have existing brand colors, you can lock them and generate compliant companion colors.

What problems it solves​

Finding two colors with good contrast is easy. Finding five colors that all contrast well with each other leads to a "Combinatorial Explosion" problem. Every new color you add introduces $N-1$ new constraints. Automatically generating a matrix that proves mathematically safe combinations saves hours of trial and error.

Who should use it​

  • UI/UX Designers building accessible design systems and themes.
  • Frontend Developers implementing WCAG-compliant web applications.
  • Brand Strategists ensuring brand palettes meet legal web accessibility requirements.

Why it matters​

Accessible design is not just a best practice; it's a legal requirement in many jurisdictions and essential for users with visual impairments. The math of readability dictates that contrast ratios must be sufficient to ensure text is legible against background colors.

How It Works​

Input​

  • Generate: Click to generate a completely new 5-color palette.
  • Lock: Lock specific colors (e.g., your primary brand color) to preserve them during generation.
  • Manual Check: Input hex codes manually to see their contrast ratios and WCAG grades.

Processing​

Our algorithm is based on The Math of "Readability":

  1. Gamma Correction: Linearizes the sRGB color values before calculation.
  2. The Luminance Formula: Calculates the relative luminance of each color.
  3. The Contrast Ratio: Compares the luminance of two colors to find a ratio between 1:1 and 21:1.

To generate a safe palette, the system follows this logic:

  1. Seed: Pick a random starting color.
  2. Generate: Create a random candidate color.
  3. Validate: Check the contrast of the candidate against all existing colors in the palette.
  4. Repeat: If it fails any check, discard and try again. If it passes, add it to the set.
  5. Backtrack: If we can't find a match after 500 tries, start over to avoid unresolvable constraints.

Limitations​

A mathematically perfectly contrasting 5-color palette often relies on extreme lights and darks (the "Light/Dark Anchor Strategy"), which means the generated colors may be very bold or stark. To make a 5-color palette work, it is usually best to "anchor" the palette with one very dark color and one very light color to open up the middle ground.

Output​

  • Interactive 5-color swatches.
  • An accessibility matrix showing pass/fail states for every pairing.
  • Exportable CSS variables and Hex codes.
Developer API Available
Need to run this programmatically? Get an API key.
Get API Key

Frequently Asked Questions​

What are WCAG grades?​

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios. AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.

Why is it so hard to get 5 colors to pass?​

Because of the Combinatorial Explosion. To ensure a palette of 5 colors ($C_1, C_2, C_3, C_4, C_5$) is fully accessible, the algorithm must satisfy 10 unique pair combinations simultaneously.

How to create a 5-color palette where EVERY color is readable against EVERY other color with Python
How to create a 5-color palette where EVERY color is readable against EVERY other color with Python

Creating a color palette where **every** color is readable against **every other** color is a high-level design challenge. As the number of colors in your palette increases, the "contrast space" shrinks significantly. In this article, we’ll build a script that uses an **iterative "Collision-Check" algorithm**. It generates a candidate color, checks it against every color already in the palette, and only keeps it if it passes the WCAG AA threshold against all of them.

Contrast Checker: How to Calculate Color Contrast in Python
Contrast Checker: How to Calculate Color Contrast in Python

Designing a beautiful UI is pointless if half your users can't read it. Whether it's a person with a visual impairment or someone trying to check their phone on a sunny day, color contrast is the secret sauce of accessible design. The WCAG (Web Content Accessibility Guidelines) provides a mathematical way to ensure text stands out against its background. Let's integrate a "Contrast Checker" into our Python toolkit.

Get Early Access to New Tools

Be the first to try new APIs and applications. No noise. Only meaningful releases and practical engineering insights.

Last updated on