Wednesday, April 4, 2018

contrast - Choosing colors for a subtle UI


I'm currently agonizing over how light I can make various colors in my UI before I adversely affect usability. The reason for the agonizing is that different monitors have different responses. Those at work are universally poor, showing light colors as very close to white, no matter how you change the settings on the monitor itself. At home, however, I know that the same colors come through loud and clear.


One specific (albeit not brilliant) example is the color used for subtle text prompts e.g.


blank state message


The majority of our UI has a white background; for relatively bold/heavy typefaces, I'm using #E7E7E7 as the text color, and darkening it to #CCCCCC for smaller font-sizes and lighter typefaces. I desperately don't want to make the messages so dark that they dominate the screen or demand unnecessary levels of attention, but neither do I want them to be so faint that you can barely read or even notice them.


How do you design for subtlety while allowing for different color responses in users' monitors? Do you use a rule of thumb to decide what's the lightest legible text color on, say, a white background?



I'd be interested to hear any advice.



Answer



At minimum you should choose colour combinations that pass the WCAG 2.0's requirements for colour contrast (Criteria 1.4.3 - and Id recommend at the AA level). The example colours you have shown above won't pass by a long measure.


It doesn't mean all your colours have to be solid dark tones, but your text should be a somewhat darker than #e7e7e7 and #cccccc.


There a heap of tools and websites about that can help you do the calculations to find combinations that work. JuicyStudio is an example of one I use frequently. When you use that tool you will discover the minimum colour for regular text on a white background is #777677. For large text, and there is a minimum size definition for what means large, 18pt or 14pt bold, the minimum colour on white background is #959495.


Id go one step further than JeromeR comments - you don't need to consider just the needs of visually impaired users. A user with "normal" sight may find a light UI very hard to use depending on other factors in their environment, the time of day, how long they have been using the application etc


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...