Start from your brand color, or let the tool pick a random hue, and choose a target: AA (4.5 to 1) or AAA (7 to 1). It builds a light or dark palette with a page background, a card background, body text, muted text, link and accent colors and a button, then adjusts each color until every pairing meets the target. The grid of ratios and CSS variables are ready to copy.
The tool works in HSL, which separates the color family (hue) from how vivid (saturation) and how light it is (lightness). The backgrounds are very light or very dark tints of your hue, so the whole palette feels related. The text colors keep the same family but are pushed toward black or white until the ratio is met.
Every pair is checked in code against the actual rounded color values, not the ideal ones, so what you see in the table is what the browser will use. A text color must pass on both the page background and the card background, since text appears on both.
A light base is the safe default for text-heavy pages. A dark base suits media, developer tools and apps used in dim rooms. In a dark palette, saturated colors can vibrate against the background, so the tool lifts them and keeps saturation moderate.
Whatever you pick, offer both if you can. Many people set their phone to dark mode, and a site that follows it feels considerate. Generate one palette of each, and swap the CSS variables when the user prefers dark.
Use the page and card backgrounds for large areas, the text color for body copy and the muted color for captions and secondary labels. Keep the link color for links only, so people learn that it means clickable, and use the accent sparingly for highlights.
The button pair is the one most often wrong in real designs. The label color and the button fill are checked together here, so a button built from these two variables is readable. Test the finished page with a contrast checker, since images and gradients can change the real background behind text.
They are conformance levels in the Web Content Accessibility Guidelines. For normal-size text, AA requires a contrast ratio of at least 4.5 to 1 between the text and its background, and AAA requires at least 7 to 1.
Each color is converted to a relative luminance, a number from 0 (black) to 1 (white) that accounts for how the eye sees red, green and blue. The ratio is (lighter + 0.05) divided by (darker + 0.05). Black on white is 21 to 1.
The tool keeps the hue of your color and most of its saturation (held between 45 and 90 percent for links and buttons). It then sets the lightness itself, in one-percent steps, until each pairing passes. The result is in the same color family as your brand color but is not always the identical shade.
A color that is too light for text on a light page, or too dark for text on a dark page, cannot pass. The tool darkens or lightens it just enough. For a logo, you can keep the original color, because logos are exempt from the text contrast rules.
It meets the contrast rule for the pairs shown. A full accessibility check also covers things like keyboard use, labels, focus states and color-blind safe design, which a palette cannot decide on its own.
Related: Color contrast checker, Hex color picker, Brand style guide generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.