Gradient Border Generator
Put a gradient on a border — and keep the rounded corners.
Text Color on Background
Work out whether black or white text belongs on any colour.
The background
The answer
Black or white appears here
Quick Tool Overview
Text Color on Background answers the question every theme system has to answer: black or white text on this colour. It uses the WCAG luminance formula rather than the naive brightness average, and hands you the code to automate it.
- What it does
- Picks black or white text for any background
- You give it
- One background colour, or a whole list
- You get back
- The winner, both ratios, and code in four languages
- Best for
- Theme systems, tag colours and generated palettes
About the Text Color on Background
Give it a background colour and it tells you which of black or white text reads better on it, with the contrast ratio for both so you can see how close the call was. Paste a whole list of backgrounds and it answers for every one at once.
The naive version of this test — brightness above 128 means black text — is wrong often enough to matter, because it ignores that the eye is far more sensitive to green than to blue. This tool uses the WCAG relative luminance formula, which weights the channels the way vision does.
Because this is a decision usually made in code rather than by hand, the page also hands you the implementation: a CSS solution using the modern contrast-color() function with a light-dark() fallback, and short, correct versions in JavaScript, Sass and PHP.
Key features of the Text Color on Background
Correct, not approximate
Relative luminance weights green far above blue, the way vision does. The "brightness over 128" rule gets mid-greens wrong.
Bulk mode
Paste a whole palette and every background is answered at once, in one table.
The awkward band flagged
Mid-tones where neither black nor white is comfortable are called out, because those backgrounds need changing rather than labelling.
Copy-ready code
CSS with contrast-color(), plus correct JavaScript, Sass and PHP versions for doing it at runtime.
Both previews shown
Black and white are drawn on your colour side by side, so the margin is visible rather than implied.
How to use the Text Color on Background
-
1
Enter a background colour
One colour, or a whole list pasted in — one per line.
-
2
Read the answer
Black or white, with both contrast ratios and a live preview of each.
-
3
Check the margin
When the two ratios are close, neither is comfortable, and the background itself needs adjusting.
-
4
Copy the code
Take the CSS, JavaScript, Sass or PHP version to do it automatically.
Frequently asked questions
No. It uses a flat average of the channels, so it picks white text on mid-greens where black is clearly more readable, and it ignores gamma entirely. The relative luminance formula is barely more code and is correct.
That cannot happen for contrast alone — every colour passes 4.5:1 against at least one of them except a narrow band of mid-tones, and this tool flags exactly that band. Those backgrounds need to be lightened or darkened before they carry text.
A CSS Color 5 function that picks the more readable of black and white against a colour you give it, in the browser. Support is still arriving, so the tool gives you a fallback alongside it.
Rarely. Pure black on pure white is often reported as uncomfortable for long reading; a very dark grey such as #1a1a1a keeps almost all the contrast with less glare. The tool scores whatever you choose.
Reviews of the Text Color on Background
What people who use the Text Color on Background think of it. Reviews come from visitors and are posted as written.
No ratings yet
Yours would be the first.
- 5 0 reviews rated 5 stars
- 4 0 reviews rated 4 stars
- 3 0 reviews rated 3 stars
- 2 0 reviews rated 2 stars
- 1 0 reviews rated 1 star
0 reviews
Newest first
No reviews yet
Be the first to rate the Text Color on Background. It takes half a minute and no account.
Write the first reviewMore color tools
Color Temperature Converter
Convert colour temperature in kelvin to an RGB colour.
Color Scale Generator
Interpolate an even scale between two or more colours.
Web Safe Colors Chart
The 216 web-safe colours, and why they no longer matter.
HEX to Decimal Color
Convert a HEX colour to the integer forms Android, Java and Unity want.
HEX to SwiftUI Color
Turn a HEX code into SwiftUI Color, UIColor and NSColor code.
Theme Color Generator
Generate matching light and dark themes from one colour.
Eyedropper Color Picker
Pick a colour from anywhere on your screen.