User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

The accessibility guidelines from the W3C offer neat and usable guidelines for creating text that is readable for everyone. There are a number of very useful tools for checking contrast levels, so it's pretty easy to at least get the basics up to AA level compliancy.

However, it doesn't become clear from the texts what to do with buttons, icons and other visual control. These are different from text, are used differently, and this leads me to think it's possible to be more lenient about contrast here.

Of course, if you want to be on the safe side you can aim for a 4.5 contrast ratio here as well. However, usually we also try to make things pretty and not simply lowest common denominator accessible. Also, having high visual contrast on everything also impedes usability, especially in user interfaces that are necessarily cluttered.

I usually look at the big guys for guidance. Apple, Facebook, Microsoft etc. usually make sure they're accessible, and for instance have text and links at a proper contrast. However these two shots are from iOS7:

ios7 calculator screenshot
ios7 calculator screenshot

ios7 settings screenshot
ios7 settings screenshot

The orange to white contrast in the buttons does not comply to AA level, not even for large text. I would've thought that would make it hard to distinguish what sign is on the button for many people. The same goes for the green in the slider. Wouldn't that make it hard for many people to use? The increase contrast option in iOS settings does not affect these at all. They offer a 'labels' option for the on/off slider, but that hardly has any contrast at all. The only way to "solve" this is to switch to inverted colors.

So, WCAG being fuzzy on this, how do I go about setting a benchmark for my design team to create accessible buttons and icons?

share|improve this question
up vote 2 down vote accepted

I interpreted the guidelines for text to apply unconditionally, regardless of whether the text is appearing on a button or in video. Buttons are only different from a text box because they are more likely to have 3D borders, shadows, and gradient backgrounds. However, only the background colour applies to the contrast rating.

Sadly, all the contrast evaluation tools are extremely out-of-date. They do not support gradients, transparent layers, or image backgrounds.

Post script: My experience with iOS 7 suggests that it does not comply with usability guidelines as well as its predecessors. Flat design's rejection of Skeuomorphism might have removed some important 2D techniques for determining distance and visual importance.

share|improve this answer

Your Answer


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.