The last three lines are CSS custom properties you can paste into a stylesheet. The accent is decorative. Its contrast against the background is not what the ratio line measures.
How to use
- Type a seed. The sample is harbor.
- Press Make theme and read the contrast line before you ship the colours.
- Copy the three custom properties if the ratio is high enough for your text. Reset restores harbor.
Formula / how it works
The choice of text colour. The background is a seeded 24-bit colour. Near-black is #0b1220 and near-white is #f8fafc. The page computes the WCAG contrast of each against the background and keeps the higher one. Harbor’s background is #645ff8, the text is #f8fafc, and the ratio is 4.43:1, just under the 4.5:1 figure often used for body text. Ink’s background is #d19d14, the text is #0b1220, and the ratio is 7.62:1. The tool does not silently darken the background to force a pass. It tells you the number. The contrast checker is where you test a pair you typed yourself, including large text and non-text marks. The palette generator builds a set of swatches. This page builds one interface trio and a ratio.
Accent. The accent is mixed from a teal base and the seed. It is for a button or a link, and you still have to check it. A pretty accent on a close background can fail even when the body text passes. The ratio line is only text on background.
CSS. The three declarations use --bg, --text and --accent. They are not a complete design system. They do not set a font, a radius or a focus ring. Paste them onto a scope you control and look at them. A seed rebuilds the same three colours, which is how a design review stays on one theme instead of chasing a new draw every refresh.
What 4.5 means, briefly. For ordinary body text, WCAG 2 AA asks for 4.5:1. Large text can be lower. This page does not decide which of those applies to your label. If the printed ratio is 4.43, do not round it up and call it a pass. Pick another seed or set the text colour by hand.
Limits. One theme per press. No dark-mode pair, no automatic palette of twelve. Hex only. The arithmetic runs in the browser.
Using the properties. Put the three lines on a wrapper and set background and color from the variables. Look at a paragraph, not only at a square of the background. A ratio near 4.5 can look fine in a heading and tired in a caption. If you need a second theme for a dark page, run a second seed and keep both seeds. The page will not invent the pair for you
Worked examples
Harbor, just under 4.5
Inputs: Seed: harbor
Leave the seed as harbor and press Make theme. Text is the light colour and the contrast is 4.43:1.
Result: Seed: harbor
Background: #645ff8
Text: #f8fafc
Accent: #001479
Contrast of text on background: 4.43:1
--bg: #645ff8;
--text: #f8fafc;
--accent: #001479;
A small interface theme. The contrast figure is for the text colour on the background, not a full audit.
Ink, with dark text
Inputs: Seed: ink
Change the seed to ink and press Make theme. The background is a gold and the text is the dark colour, at 7.62:1.
Result: Seed: ink
Background: #d19d14
Text: #0b1220
Accent: #028b1c
Contrast of text on background: 7.62:1
--bg: #d19d14;
--text: #0b1220;
--accent: #028b1c;
A small interface theme. The contrast figure is for the text colour on the background, not a full audit.
Use cases
- A starting background and text pair for a prototype.
- Seeing a ratio before you call a theme finished.
- Sharing one theme with a teammate by sharing the seed.
- Remembering that the accent is not covered by the ratio line.
Tips & limitations
- Do not treat 4.43 as 4.5.
- Check the accent separately.
- Keep the seed in the ticket.
- Use the contrast checker for a pair this page did not generate.
FAQ
Does every theme pass WCAG?
No. The higher of near-black and near-white is chosen, and the ratio is printed. Harbor is 4.43:1, which is under 4.5:1.
What does the ratio measure?
Text colour on the background. It does not measure the accent.
Can I get the same theme again?
Yes. The same seed rebuilds the same three colours.
Why are there only two text colours?
So the text is either clearly dark or clearly light. A random third grey would fail more often and be harder to explain.
Is this a full stylesheet?
No. Three custom properties. Font, spacing and focus are yours.
Is the seed uploaded?
No. The colours are calculated in the browser.
Runs entirely in your browser; nothing is uploaded. Check the output before you rely on it in production code, data or security decisions.