Why is color contrast important in software design?

Designers and product managers often ask me why color contrast and the ability to zoom in is important in software design. There are two groups of people who benefit from color contrast.

1. Color blindness. 1 in 12 men are color blind. 1 in 200 women are color blind. Any design that adjoins two different colors with the same or similar value can be tricky for color blind users to navigate. Additionally, the use of color only as an indicator of system status becomes meaningless. For example, red for alert and green for ok. If those two colors appear the same to a user, the meaning is lost. Therefore, any time a design uses color for meaning, it should be accompanied by a symbol or text that also provides meaning. A red exclamation for alert and a green checkmark for ok will provide a way to convey meaning without color alone.

2. Low vision. Around 3-3.5% of the world population has low vision.  Low vision users can be aided by increased color contrast in addition to the ability to zoom in or magnify their view of software on a screen. Zooming and contrast can be enhanced by peripheral hardware and software, but at a minimum, software should have a certain amount of contrast built in as well as the ability to adjust the zoom.

Further reading:
http://designshack.net/articles/accessibility/design-for-everyone-considering-accessibility-in-visual-projects

Why is the the ability to navigate by keyboard important?

I often have designers and developers asking me why it is important to be able to navigate a web page with a keyboard only and why it is bad to require users to hover over something with a mouse.

Let me be clear that I'm not against adding motion or delightful visual effects when the mouse moves around the page. However, there needs to be a clear and easy path for users to interact with all features using a keyboard. Here is why:

1. Power users. People who use a web app heavily for productivity don't want to move their hand back and forth from a keyboard to a mouse. Doing everything with a keyboard is preferred. If that functionality is available and intuitive, it will be used. In addition to the ability to navigate by keyboard, these users require the ability to see where their cursor focus is on screen at all times.

web page on a tablet

2. Navigating via tablet. Today, a lot of users will access a web page on a tablet device. Tablets have touch screens that are not able to simulate a hovering action as the mouse can. As such, all controls need to be visible and able to be activated by a touch, which is interpreted the same way as the click of the mouse or hitting the enter key.

3. Minor ailments. A lot of users suffer from minor ailments including arthritis, carpel tunnel syndrome, diminished dexterity or temporary injuries like sprained wrists. For these users, long periods of mousing can be excruciating. Making things available via keyboard allows these users to continue being productive while healing from and avoiding aggravating their injuries. In addition to the ability to navigate by keyboard, these users require the ability to see where their cursor focus is on screen at all times.

using a switch

4. Profound motor disabilities. People with conditions like MS, Parkinsons, ALS, muscular dystrophy or who are missing a limb or digits still have a need to participate in our digital society. Creating web applications that are navigable via keyboard allows them to access information and services using a keyboard or a switch, which is a large button that can be plugged in as an alternative to a mouse pointer and used to toggle between web page controls. In addition to the ability to navigate by keyboard, these users require the ability to see where their cursor focus is on screen at all times.

navigating with a screen reader

5. Profound visual impairment. Users with profound visual impairment will typically use screen reading software to navigate a web page. Because they cannot see a pointer on screen, they need to be able to toggle through controls on a page using the keyboard. Additionally, all "active" elements like buttons, links and form fields need proper text labeling or alternatives, so they know what to expect when they activate the element. This is especially important with icons which need to be described to the screen reading software.