Accessible color palette generator

How to use the palette

Choose each shade by the job it does, because WCAG sets a different minimum for each one. The matrix gives the exact ratio for every pair, so the choice is a lookup rather than a guess.

W3C puts 18 point and 14 point at about 24px and 18.5px in CSS pixels. Our WCAG reference lists both criteria (1.4.3 and 1.4.11), and the color contrast guide covers the ratios, the formula and the common mistakes in full.

• Starting from nothing. Enter or pick color 1, choose a harmony, and press "Suggest companion colors". You get up to three more colors that already reach 4.5:1 on your light background, to adjust from there.
• Text on your light background. In a scale's matrix, read down the White column (it is called Light when you set another color) and choose a text shade labeled AA or AAA. The cards under "Nearest shade that passes" name the closest one for each of your colors, and the on-light colors in the exports hold the same answer.
• Text on your dark background. The same, using the Dark column and the on-dark colors.
• One brand color on another. Choose "All your colors together" and read the row of the text color against the column of the background color.
• Buttons. The label needs 4.5:1 against the button's fill, or 3:1 if it is large text. W3C says a control with a visible text label does not need a contrasting border or fill to meet 1.4.11, so the 3:1 applies where the fill or border is what identifies the control, such as an icon-only button or the outline of a text field. A focus indicator you style yourself needs 3:1 against the colors next to it.
• Decoration. Graphics that are purely decorative have no minimum, so a pale step can still be used for backgrounds and dividers. Do not use color as the only way to show something: 1.4.1 Use of Color asks for a second cue.

Why brand colors often fail on white

Low contrast text is the most common error WebAIM's February 2026 report finds: low contrast text on 83.9% of home pages, more than any of the other five categories that make up 96% of the errors it detects. Part of the reason is arithmetic. WCAG defines the ratio as (L1 + 0.05) / (L2 + 0.05), where L is relative luminance and L1 is the lighter color (WCAG 2.2 definitions). White has a luminance of 1, so a color passes 4.5:1 on white only if its luminance is at most 1.05 / 4.5 minus 0.05, which is 0.183. For 3:1 the limit is 0.30 and for 7:1 it is 0.10. Mid-tone colors sit above those limits: mid-gray #808080 is 3.94:1 on white.

The three colors this page opens with show how far a vivid color can sit from the line. On white, Blue #2F80ED measures 3.86:1, Coral #FF6B57 measures 2.80:1 and Yellow #FFC933 measures 1.53:1. The nearest colors of the same hue that reach 4.5:1 are #2274E0 (4.52:1), #D44332 (4.51:1) and #947100 (4.54:1), which move the colors' OKLCH lightness by 0.04, 0.12 and 0.29. The further a color starts from the line, the less the passing version looks like it.

There are two ways to keep the brand color. Use the exact color where the minimum is lower or absent: as large text, as a UI component or graphic edge at 3:1, or as decoration. And use a darker step of the same hue for small text. Text that is part of a logo or brand name has no contrast requirement under 1.4.3, so a logo can keep the exact color.

How it works

The color space

The scales are built in OKLCH, the polar form of the OKLab color space by Björn Ottosson (his description and code). OKLCH has three numbers: L is lightness from 0 (black) to 1 (white), C is chroma (how colorful), and H is hue as an angle in degrees. CSS Color Module Level 4 (section 9) describes OKLab as having better hue linearity, hue uniformity and chroma uniformity than CIE LCH, which suits a scale that changes lightness and holds hue. The conversions are the ones in that specification's sample code (section 19): sRGB to linear light, to XYZ with a D65 white point, to LMS, a cube root, then OKLab and the polar form. A gray has no hue; the specification treats the hue of a color with chroma of 0.000004 or less as powerless, and a gray's scale stays gray.

The scale

Your color is kept exactly, at the step whose lightness is closest to its own. Every other step takes the lightness in the table below and your color's hue. Its chroma is your color's chroma times the step's share divided by the share of the step that holds your color, never more than your color's own, and lowered further where sRGB cannot show it. The shares make tints and shades quieter toward white and black.

Steps 600 and 700 were set from a sweep of every hue in half-degree steps and every chroma from 0 to 0.4 in steps of 0.005, each result rounded to a hex color before it was measured. On pure white, steps 600 to 950 reach 4.5:1 whatever the hue and chroma (the lowest value in the sweep is 4.68:1 at step 600) and steps 700 to 950 reach 7:1 (the lowest is 7.28:1 at step 700). On #111111, steps 50 to 500 reach 4.5:1 (the lowest is 4.73:1 at step 500). The one exception is the step that holds your own color, which is kept exactly as you entered it. These promises hold for white and #111111 only; with other backgrounds, read the matrix.

Many OKLCH colors are outside what an sRGB screen can show. The specification's gamut mapping (section 14) reduces chroma in OKLCH while keeping lightness and hue, and this tool does the same: it searches for the largest chroma that fits. It leaves out the shortcut in the specification's binary search (14.2.2), which returns the clipped color whenever clipping moves it by less than one just-noticeable difference (0.02), so a color near the edge of sRGB can differ slightly from the one a browser would draw. These values and the ladder above are our own design choices, not a standard.

The companion colors

Press "Suggest companion colors" and the tool first moves your color 1 to its nearest shade that reaches 4.5:1 on your light background, using the search described below. That shade's lightness and chroma are the reference. Each companion takes the reference lightness and chroma at color 1's hue turned by an angle from the table, is mapped into sRGB, and is then nudged again, because the same OKLab lightness gives a different WCAG ratio at another hue. The optional neutral keeps color 1's hue at a chroma of 0.015 and is darkened until it reaches 7:1, so it can carry body text. The angles are the usual ones from color theory applied to OKLCH hue. They are our choice and not a standard, and a suggestion reaches the ratio without being a judgment about taste: it may not suit your brand.

The contrast numbers

Every ratio comes from the same code as the color contrast checker: the WCAG 2.2 relative luminance and contrast ratio, measured on the 8-bit hex colors you would paste, never on the unrounded OKLCH values. A pair passes when its exact ratio is at or above the threshold. The number shown is cut off at two decimals, never rounded up, because W3C says the computed value should not be rounded: 4.499:1 does not meet 4.5:1 (Understanding 1.4.3).

The nearest shade that passes

From your color's own lightness the search moves outward in steps of 0.001, darker and lighter, keeping the OKLCH hue and chroma, and stops at the first candidate whose hex color reaches the target against the background. That is the smallest change in lightness that works, to the nearest 0.001. The card also names the nearest step in your scale that passes, and the same search produces the on-light and on-dark colors in the exports.

The exports

The CSS names follow the --color-name-step pattern that Tailwind's theme documentation uses. Tailwind CSS version 4 turns variables declared in an @theme block into utility classes, while the same variables in :root stay ordinary CSS variables, so the theme block is a separate output. The Tailwind-style output is a theme.extend.colors object for a JavaScript config file, which version 4 loads with the @config directive. The JSON follows the Design Tokens Format Module 2025.10 and its color module: a color value is an object with a colorSpace, components from 0 to 1, an alpha and a 6-digit hex fallback. The format recommends the file extensions .tokens and .tokens.json and the media type application/design-tokens+json, which the download button uses. Token names here are lowercase letters, digits and hyphens, which the format allows.

Related tools and guides

• Color contrast checker: one text and background pair, with see-through text and the nearest passing color.
• Image contrast checker: the worst-case contrast behind text on a photo, screenshot or gradient.
• Color blindness simulator: how a pair of colors or an image may look with protan, deutan, tritan or achromatopsia color vision.
• Accessibility bookmarklet: the contrast of the text actually painted on a live page.
• Color contrast accessibility guide: the ratios, the formula and how to test.
• WCAG 2.2 criteria explained, including 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) and 1.4.11 Non-text Contrast.
• WCAG 2.2 checklist and how to test website accessibility.