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?

2 Answers 2


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.


Four long years have passed... but this is still a very relevant question.

I can empathize with the confusion in this context.

What I've picked up on in my experience is applications installed within an operating system need only to produce appropriate results when the host (the OS) is set to an accessibility mode. Thus, by default, anything goes. It's presumed an individual with special needs will enable the appropriate settings in the OS and then all apps will make necessary adjustments as well.

That said - with Android on Samsung phones, especially - I've designed various skins for the apps rather than just let the OS try and guess what looks nice. I think that's probably optional, but I always want that control.

Websites do not have such luxury yet. Perhaps someday every browser will be able to detect if accessibility settings are enabled in the OS and trigger an appropriate CSS. But for now... it's critical that we ensure the UI is compliant for everyone.

Note, also, that it's not just about color but also scale. The required contrast ratios are reduced as things become larger. Text, for instance... contrast ratio for 14px text is higher than 16px text.

I apply that same logic to icons; treating a 20px icon the same as 20px text.


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.