Color Safe Palette Builder

Assemble a complete UI palette and validate every foreground and background combination against WCAG contrast thresholds.

Add your background, surface, text, and accent colors to the palette, then review the contrast matrix to see which pairings pass WCAG AA or AAA. Adjust lightness on any failing swatch until every combination you plan to ship is marked safe.

Your Palette

Color Vision Simulations

Normal Vision
Deuteranopia (Red-Green, most common — 6% of males)
Protanopia (Red-Blind — 1% of males)
Tritanopia (Blue-Yellow — rare)
Achromatopsia (Total color blindness)

Contrast Matrix

WCAG AA contrast ratio between each pair of colors in your palette:

⚡ Quick actions

Design a WCAG-Safe UI Palette in One Workspace

The color safe palette builder lets you assemble a complete interface palette — backgrounds, surfaces, text, borders, and accents — and instantly validates every foreground/background combination against WCAG contrast requirements. Instead of checking pairs one by one in a basic checker, you see the entire palette as a connected system and catch risky combinations before they reach production.

Why a Palette-Level Approach Beats Per-Pair Checking

WCAG 2 specifies a contrast ratio of at least 4.5:1 for normal body text, 3:1 for large text, and 3:1 for UI components and graphical objects. Verifying those thresholds on a single color pair is easy, but real design systems include dozens of tokens that interact in non-obvious ways. A neutral that passes on white can quietly fail on a dark surface, and an accent color that works for filled buttons can be illegible as link text.

This builder solves that by computing the full N×N contrast matrix for your palette every time you edit a swatch. If you prefer a dedicated matrix view across an existing token set, the contrast grid renders the same data as a copy-friendly table.

What You Can Do With the Builder

  • Define tokens by role — background, surface, text, muted text, border, primary, success, warning, destructive.
  • See pass/fail for every pair against WCAG AA (4.5:1) and AAA (7:1) at normal and large text sizes.
  • Tune lightness on any failing swatch until the combination clears the threshold you need.
  • Audit light and dark modes separately so neither theme regresses when you ship.
  • Export the validated palette as HEX, CSS custom properties, or design tokens.

Workflow: From Brand Color to Accessible System

  1. Start with your brand color or a base hue you trust.
  2. Generate a tint and shade ramp using the tint and shade scale generator to get a perceptually uniform set of steps.
  3. Drop those steps into the builder as candidate tokens.
  4. Review the contrast matrix and lock the pairings that pass — typically a dark text token on light surfaces and a light text token on dark surfaces, with accents reserved for components that meet the 3:1 non-text threshold.
  5. Export the final palette as CSS variables with the CSS theme builder so your light and dark themes share a single token contract.

Pair With Color-Vision Testing

WCAG contrast is necessary but not sufficient — color should never be the only signal carrying meaning. After your palette clears contrast, run it through the color blindness simulator to confirm states like success and error remain distinguishable under deuteranopia, protanopia, and tritanopia. For background on accessible color practice, the MDN guide to color contrast is a solid reference.

]]>

Frequently Asked Questions