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)
Answer
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.
No comments:
Post a Comment