Text colors that work

You have 5 background colors in your palette. Each one needs readable text. That is 5 text colors minimum, each passing 4.5:1 contrast ratio.

Do it by hand and you are eyeballing hex codes, switching to a contrast checker, adjusting, re-checking. For every background. For every palette update.

Tedious. Error-prone. The kind of work that gets skipped when deadlines hit. And then your users cannot read your UI.

For each background color in your palette, Paletter generates a range of neutral text colors from dark to light.

Each candidate is filtered by WCAG compliance. You see which pass AA and which pass AAA, with preview cells showing actual text at each level.

Dark background gets light text. Light background gets dark text. The math handles it. You just pick the one you like from the passing options.

No guessing. No separate tools. Every text color shown with its contrast ratio and WCAG badge right next to it.

Grayscale text is safe. Complementary text is designed.

Complementary mode derives text colors from your palette's own hues. Dark and light variants of each palette color, filtered by WCAG contrast against each background.

The result: text that is on-brand, not just readable. Harmonious with your color system. Your accent hue as a dark text color on a light surface. Your support hue as light text on a dark card.

Same WCAG filtering. Same contrast ratios. Same pass/fail badges. But the colors come from your palette, not from a gray ramp.

In the Refine tab, toggle between grayscale and complementary text colors. Every option shows its contrast ratio and WCAG level.

Click any text color to copy the value. Hex, RGB, or HSL. Paste it directly into your code.

No separate workflow. No external tools. Text colors are part of the palette, not an afterthought.