Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

A user can change the default design of his 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 (eg if the user choose darkgreen then teh 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 best readability.

Update

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

share|improve this question
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 Nov 21 '11 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 Nov 21 '11 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. –  Ben Brocka Nov 21 '11 at 17:10
    
I provided a precise formula that answers this question at ux.stackexchange.com/questions/8297/… –  Michael Zuschlag Nov 22 '11 at 1:23

4 Answers 4

up vote 7 down vote accepted

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.

share|improve this answer
    
Isn't too much contrast bad either? See ux.stackexchange.com/questions/13351/the-colors-hurt-my-eyes –  Bart Gijssens Nov 22 '11 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. –  Ben Brocka Nov 22 '11 at 15:09

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
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 Nov 21 '11 at 14:13
    
@BartGijssens: I never said that the threshold should be mid way. I gave an example of it being mid way. –  JohnGB Nov 21 '11 at 15:26
4  
The color weight should be 30:60:10 -- at least that is what was used on the Amiga. –  Simon Richter Nov 21 '11 at 17:11
4  
@SimonRichter: The empirical weights are usually given as 30:59:11, so that’s right. –  Jon Purdy Nov 21 '11 at 20:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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