Light and Dark Theme Color Preview
Try brand colors on a card, buttons, and fields in both themes, with contrast indicators.
Try a pair
Your result
Pick a text colour and a background to see them together.
Light theme
Your heading here
This is how a paragraph reads with these colours. A link
Dark theme: the same colours swapped
Your heading here
This is how a paragraph reads with these colours. A link
How to use it
- Pick the ink (text), paper (background), and accent colours.
- Read the contrast and the pass or fail checks.
- Look at both cards, and swap the colours to try the dark version.
Examples
- Black on white#000000 on #FFFFFF 21.00 : 1, passes every check
- Light grey#777777 on #FFFFFF 4.47 : 1, fails body text, passes large headings
Tool details and privacy
Pick a text colour, a background, and an accent, and see them as a light and a dark card with the contrast checks beside them.
A ratio alone is hard to judge. Seeing a heading, a paragraph, a link, and a button makes it clear.
Options
- Body text needs 4.5 : 1, large headings 3 : 1, and the strict AAA level 7 : 1. The ratio is cut, not rounded up, so 4.496 shows 4.49.
Limits
- This checks colour pairs, not a whole interface.
- It is not a certified accessibility audit.
Privacy
What you type stays in your browser. Nothing is uploaded or saved on the server.
Questions
What is black on white?
21.00 : 1.
Why does #777777 on white fail?
Its ratio is 4.47 : 1, just under 4.5.
What is the dark card?
The same two colours swapped.
Is anything uploaded?
No.