10

Scenario: a user can change the default design of a site by selecting a color. This color is applied to the menu background color. The problem is that I have to change the menu text color depending on the selected color (e.g., if the user chose darkgreen, then the text color needs to be white).

I only want to use or white or black as a text color for the menu and want to know how I can calculate whether white or black results in the best readability.

Update

The website is aimed at soccer teams. Since soccer teams often have specific colors I want to give them the option to add team colors to the site. Templates won't do because I can't provide all the colors with templates. I also opted not to give them the option to define the text color, since I think this is a physics problem (contrast).

Improve this question
4
  • 2
    For what reason do you want to allow your user to select a background color? And why can't you allow the user to select a foreground color as well?
    – Bart Gijssens
    Commented Nov 21, 2011 at 13:52
  • I'd second Bart. If you're going to allow people to change colors, you might as well let them change all. Though be forewarned that you'll likely end up with users making atrocious color decisions.
    – DA01
    Commented Nov 21, 2011 at 14:52
  • Yeah, I'd consider prebuilt themes if you really want all of the sites to look good and readable (assuming your users aren't all graphic designers). If you're going to allow customizing, you might as well allow customizing both foreground and background.
    – Zelda
    Commented Nov 21, 2011 at 17:10
  • 1
    I provided a precise formula that answers this question at ux.stackexchange.com/questions/8297/…
    – Michael Zuschlag
    Commented Nov 22, 2011 at 1:23

5 Answers 5

Reset to default
8

The W3C has explicit guidelines for web content accessability, including contrast. You can compare color values to their ratio and tell the user if their color choices are likely inaccessible/unreadable.

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

Note there are exceptions and some good guidance in the full set of guidelines. If you're doing something so simple as checking whether white or black is most readable, comparing the contrast ratio is the easiest way. Note that this may not always result in ideal colors if black and white are the only text options. Readability is more complex than just contrast, which is why the W3C guidelines go into things like font size and other considerations.

Here's a great tool to let you to test contrast in text. You can get a good idea of what is checked for in color accessibility and consider giving your users a display somewhat like that; present the text on their chosen background, and consider giving them a warning message if their text is considerably below the readability threshold.

Improve this answer
2
  • Isn't too much contrast bad either? See ux.stackexchange.com/questions/13351/the-colors-hurt-my-eyes
    – Bart Gijssens
    Commented Nov 22, 2011 at 6:35
  • @BartGijssens arguably, but at the same time black on white is extremely high contrast. The problem with "too much contrast" is usually more accurately clashing colors. With only black and white text as your options, clashing isn't really an issue. They might pick a truly terrible background color, but I can't imagine a situation where you would want the lower contrast option.
    – Zelda
    Commented Nov 22, 2011 at 15:09
4

The simple solution is to simply look at the numerical value of the colour and decide on some threshold above which it will be black and below which it will be white.

For example (with all number given in hexadecimal):

If the button colour is #4E5523, add each colour component to get an overall value. In this case it would be #4E + #55 + #23 = #C6. If the threshold were set at the midway point between pure black (#000000) and white (#FFFFFF), it would be at #17E. #C6 is lower, so use white.

If the button colour is #70CCD1, the value of each colour component added would be #20D, which is above the threshold of #17E, so you should use black.

This is a very simple method, but it works.

Improve this answer
5
  • 4
    Let's take an example. As color I choose 128, 128, 128 (decimal). Add these up and you get 384. The midway point is 382 according to you? So 384 is higher, you choose black. Go ahead and try this (a dark grey square with black text on it). It's not readable at all. White is a lot better. I believe one of the reasons is that you need to give every channel it's own weight, similar as a desaturating algorithm. But this is beyond UX territory.
    – Bart Gijssens
    Commented Nov 21, 2011 at 14:13
  • @BartGijssens: I never said that the threshold should be mid way. I gave an example of it being mid way.
    – JohnGB ♦
    Commented Nov 21, 2011 at 15:26
  • 4
    The color weight should be 30:60:10 -- at least that is what was used on the Amiga.
    – Simon Richter
    Commented Nov 21, 2011 at 17:11
  • 4
    @SimonRichter: The empirical weights are usually given as 30:59:11, so that’s right.
    – Jon Purdy
    Commented Nov 21, 2011 at 20:05
  • The weights for sRGB: 0.213 0.715 0.072 and the RGB values must be linearized first. Here's a shortcut JS that returns a luminance value 0-255: let luminance = Math.min(255,((Rs/255.0)**2.2*0.2126+(Gs/255.0)**2.2*0.7152+(Bs/255.0)**2.2*0.0722)**0.4545*255);
    – Myndex
    Commented Jun 14, 2023 at 11:59
2

I don't think you can.

Every computer, every computer screen and every user has its own interpretation of color. So a certain combination of background and foreground color may look nice on one screen and terrible on another screen. Or it may look nice to one person but terrible to another user.

If you allow the user to freely choose any color, some users will end up with a background-foreground combination which is tiring to their eyes without the user even knowing it, because some just don't care.

From a UX point of view, would it not be better to allow the user to select between a predefined selection of "themes" (i.e. background-foreground combination)? You can make sure that these themes are designed with readability in mind.

Improve this answer
1

I recently built a tool that automatically checks contrast of links and buttons of websites.

There are some useful things that I think are different and quite useful:

  • It calculates non-text contrast (the contrast of the button background with adjacent colors) --> minimum 3:1
  • It also takes :hover and :focus states in consideration.
Improve this answer
0
0

I like a solution with some good predefined themes. User can select an appropriate theme of one or several light and a dark themes. The general question is, how important is the flexible customization of the colors.

The technique with infinitely adjustable changing background color is implemented e.g. in Adobe Aftereffects. The text color changes automatically to the best contrast color (black or white). IMO a good dark and light theme would be good enough.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.