Accessible Color Palette Builder

Accessible color palette builder with WCAG contrast checks

This tool helps you build an accessible color palette for a user interface and test every color pair in one place. You name your colors, and the workspace shows a WCAG contrast matrix, four color blindness simulations and ready-to-copy code. 66Colorful is free, runs in your browser and needs no signup.

How to build an accessible color palette step by step

1. Pick a Starter palette (UI roles, Okabe-Ito or Brand and status colors) and press Load, or edit the default UI roles palette.
2. Click a color row, then type a name such as Primary in Selected color name. These names become token names later.
3. Change colors with the picker or the HEX field, and use Add color for more roles (2 to 12 colors per theme).
4. Set the WCAG target (AA or AAA) and the Content type (normal text, large text, or UI components and graphics).
5. Read the contrast matrix. Rows are text colors and columns are backgrounds. Select any red cell to see the pair, all five checks and suggested fixes.
6. Switch to Dark and repeat, then copy the code from the export panel.

Accessible color palette features you can use

• Named color roles: Background, Surface, Text, Muted text, Border, Primary, Success, Warning and Destructive load by default, and you can rename every one.
• Contrast matrix: every foreground and background combination appears as a cell with its ratio and a Pass or Fail label, plus a summary such as how many pairs pass at your target.
• Pair detail panel: a live preview with heading, body text and a UI swatch, and pass or fail results for AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), AAA large text (4.5:1) and UI components (3:1).
• One-click fixes: for a failing pair, the tool suggests the smallest lightness change to either color and an Apply button updates your palette.
• Color blindness views: typical vision, protanopia, deuteranopia, tritanopia and achromatopsia, with warnings for pairs that become hard to tell apart.
• Separate light and dark themes: each theme keeps its own colors, simulations and matrix.
• Export and share: CSS, SCSS, JSON tokens, Tailwind CSS and a plain HEX list, plus a share link that restores both palettes and your settings.

What contrast ratio does a WCAG color palette need?

A WCAG color palette needs at least 4.5:1 for normal text and 3:1 for large text and UI components at level AA. Level AAA raises text to 7:1 and 4.5:1. The WCAG 2.2 Contrast (Minimum) page defines the text thresholds, and Non-text Contrast covers borders, icons and focus states.

The matrix shows each ratio rounded down to one decimal. A pair at 4.49:1 therefore appears as 4.4 and fails, so you never get a false pass from rounding up.

Worked example: contrast ratios in the UI roles starter

The default light palette shows how one palette can pass and fail at the same time. Dark slate #0F172A text on white #FFFFFF reaches about 17.8:1, far above AAA. Primary blue #2563EB on white reaches about 5.1:1, which passes AA for normal text but not AAA.

The Border color #94A3B8 on white reaches only about 2.5:1. It fails the 3:1 target for UI components, so an input outline in that color can be hard to see. Select that cell and the tool suggests a darker border you can apply.

How do you fix a failing color pair in a palette?

Select the failing cell in the contrast matrix, then use the suggested change in the pair panel. The tool tries a small lightness shift on the text color and on the background color and offers the closest one that reaches your target. Press Apply and the palette, matrix and export code all update.

Decide which side to change. Moving a brand color alters your identity, so you may prefer to adjust a Surface or Background instead. If no lightness change can reach the target, the panel says so, and you need to pick a different hue or a different partner color.

Fixes keep the same color family, so a darker Primary still looks like your blue. After applying several fixes, check the color blindness view again, because new lightness values can change which pairs look alike.

How does the color blindness check work on a palette?

The tool simulates your whole palette for protanopia, deuteranopia, tritanopia and achromatopsia, then flags pairs that look different to typical vision but close together in the simulation. The protan, deutan and tritan views use the Machado 2009 model, and achromatopsia shows lightness only.

Flagging depends on a ΔE distance, a measure of how different two colors look. Set Color blindness warning below to ΔE 6 (lenient), ΔE 10 (standard) or ΔE 15 (strict). Pairs that already look alike to everyone, such as Background and Surface, are not flagged.

Color blind safe palette: do not rely on color alone

WCAG asks that color is not the only way to show meaning, as explained in Use of Color. Add an icon, label or pattern to error and success states. If the tool reports conflicts, send them to the color blindness palette fixer, or preview single colors with the color blindness simulator.

The Okabe-Ito starter is a good reference. It is a set of eight colors chosen to stay distinct for common color vision deficiencies, so it suits charts and status badges.

Light and dark theme palette tips and common mistakes

Test light and dark themes separately, because a pair that passes on white often fails on dark slate. The starter dark theme lifts Primary to #60A5FA, which reaches about 7.0:1 on a #0F172A background. Do not simply invert your light colors.

• Check muted text: secondary text is the most common AA failure. Test Muted text against both Background and Surface.
• Test status colors on every surface: yellow and orange warnings often fail on white. The Warning amber #B45309 passes at about 5.0:1, while a brighter yellow such as #CA8A04 reaches only about 2.9:1.
• Match the content type: a 3:1 pass is only valid for large text or UI components. Switch Content type before you judge a result.
• Use the right target: AA is the usual legal and policy baseline. Choose AAA for body copy where you can afford it.
• Re-test after every edit: changing one color changes a whole row and column of the matrix.

Contrast ratio does not capture every readability factor such as font weight and polarity. Try the color legibility analyzer for APCA readings, or the contrast checker for a single pair.

Export an accessible palette as CSS, SCSS, JSON or Tailwind

The export panel turns your named colors into code. Pick CSS, SCSS, JSON tokens, Tailwind CSS or HEX, then copy it with the copy button or the Copy CSS and Export JSON quick actions. Tick Include both themes in the export to output light and dark values together.

:root {
  --color-background: #FFFFFF;
  --color-text: #0F172A;
  --color-primary: #2563EB;
}

Token names come from your color names, so Muted text becomes --color-muted-text. The CSS export includes a dark theme block and a block that follows the visitor's system setting through prefers-color-scheme. For a larger theme setup, continue in the CSS color variables theme builder.

Who uses an accessible UI color palette builder?

Designers use it to approve a palette before handoff, and developers use it to verify tokens before a release. Product teams use it to prepare for accessibility reviews, and students use it to learn how contrast ratios behave across a real set of colors.

The share link makes review easy: it restores both palettes and all settings, so a colleague sees exactly what you see.

Next, run a finished palette through the palette accessibility audit for a full report, or generate matching shade scales with the Tailwind scale generator.