Skip to content

Text Color for Background

Pick black or white text for a background.

Input
Output

No result

About Text Color for Background

Text Color for Background answers one narrow question: given a background color, should the text sitting on it be black or white? Enter the color in whatever notation you have it and the page weighs its channels, then returns one of two sentences together with the hex value to use. The sample starts at #4F46E5, a mid indigo, and the answer that comes back is white text.

The measurement is a weighted average of the raw channels - red counted at 0.299, green at 0.587 and blue at 0.114 - divided by 255 so that the total lands between zero and one. Anything above the halfway point is treated as a light background and gets black text; anything at or below it is treated as dark and gets white. The parser underneath accepts three, four, six and eight digit hex, thirty standard color names, and rgb or hsl notation with an optional alpha component, so most of the ways a color is written in a stylesheet can be pasted straight in.

It is worth being clear about what this is not. It is not a WCAG contrast checker: the standard formula gamma-corrects each channel before weighting it and then compares two colors as a ratio, while this page weights the raw values and compares the total against a fixed midpoint. On a mid-tone background the two can reach different conclusions. The page also only ever sees a single color, so it cannot tell you whether a particular pair of brand colors works together.

How to use Text Color for Background

  1. 1 Paste the background color - hex, a standard name and rgb notation are all accepted.
  2. 2 Read the recommendation, which names black or white and prints the hex value to use.
  3. 3 Take the same value to the contrast checker if you need the actual ratio rather than a black-or-white call.
  4. 4 Recheck a mid-tone color elsewhere if the two tools disagree, because the formulas behind them are different.

Frequently asked questions

Why does this answer differ from a contrast checker?

Because the formulas are different. A contrast checker converts each channel to a relative luminance with a gamma correction and then reports a ratio between two colors, while this page takes a plain weighted average of the raw channels and compares it against a fixed halfway point. Near the middle of the range the two can reach different conclusions.

Can I compare two specific colors here?

No. The page takes a single background value and picks between pure black and pure white text. To test a branded pair, or a dark gray on cream, use the contrast checker tool on this site instead.

Does transparency affect the answer?

It is ignored. An eight digit hex value or an rgba notation is accepted, but the calculation reads only the red, green and blue channels, so a translucent background is judged as though it were fully opaque.

What if I type a hex value with the wrong number of digits?

It is read anyway rather than rejected. The parser takes the first two characters as red, the next two as green and the two after that as blue, so five digits leave only one character for blue and a seventh digit is dropped altogether - and a confident recommendation comes back for a color you did not intend. Check the length of the string if the answer looks wrong.

Free, online, and private

Free to use

Text Color for Background is completely free. There is no account to create, no login, and no hidden charge or usage limit.

Runs online in your browser

It is a free online tool that runs entirely in your browser. Nothing to download or install — open the page and start using it right away.

Your data stays private

All processing happens locally on your device. Your input is never uploaded, stored, or tracked, so it never leaves your browser.

How Text Color for Background behaves in detail

These are the specifics of this implementation — the exact ranges, defaults and fixed settings you are working with.

Parameter Value
Input a color written as text; the sample is #4F46E5
Accepted formats three, four, six or eight digit hex, thirty standard color names, and rgb or hsl notation with an optional alpha part
Brightness measure the channels are weighted red at 0.299, green at 0.587 and blue at 0.114, summed, then divided by 255 to land between zero and one
Decision a brightness above 0.5 returns the advice to use black text; anything at or below 0.5 returns the advice to use white text
Output one of exactly two fixed sentences, each carrying the recommended hex value in brackets
Alpha ignored a translucent background is judged as if it were fully opaque, because the formula reads only the red, green and blue channels

Compiled from the implementation of this tool and checked against it by itoolnet.

What Text Color for Background does not do

Knowing the edges of a tool saves more time than another list of its features. These are the cases where it will not do what you might expect.

  • It is not the contrast formula that accessibility checkers use. Those apply a gamma correction to each channel, weight the result into a relative luminance and then compare two colors as a ratio; this page weights the raw channel values and compares the total against a fixed halfway point, so its verdict on a mid-tone color can disagree with a checker.
  • Only the background is taken into account. The page answers black or white for a single color and cannot compare a pair that you supply, so a dark brand color that should be paired with a cream rather than a pure white has to be taken to the contrast checker tool instead.
  • A malformed hex string is not rejected. Five or seven digits after the hash are still read as three channels, because the parser takes the first two characters as red, the next two as green and the two after that as blue - so five digits leave a single character for blue while a seventh digit is ignored outright, and a typo produces a confident recommendation for a color that was never typed.

Tested and documented by itoolnet, the team that builds and maintains this site.

Share & embed this tool

Writing a guide or article? You are welcome to link to Text Color for Background with the snippet below. It is free, runs entirely in your browser, and needs no signup.