Accessibility is an important question. A common misunderstanding is that it is only about adapting for fellow humans with disabilities. That’s not right. An accessible web is good for everyone!
How little we’d like to admit it, our vision does deteriorate as we get older. Not to talk about how common different varieties of vision impairments are in the population in general.
Why is accessibility important?
Take a step back from your screen. Close your eyes a little, just enough so that your vision is impaired as your eye lashes get in the way.
How easy is it to use your website now? Can you read everything?
Didn’t it just get a whole lot more difficult?
From our web analysis, we can’t see how many people with disabilities are using our website and how they are doing. But let us instead estimate the effect of having poor color contrast:
- 15% of the world’s population have some kind of disability.
- Approximately 4% of the population have a vision impairment and 0.6% are blind.
- Between 7-12% of men and less than 1% of women have limited color vision (or are color blind).
- Impaired vision increases with age. Half over 50 years have some kind of vision impairment.
- Our population is aging. The fastest growing group is 60+.
- Over 40 a majority need some form of aids such as reading glasses to see small objects or text.
Yet, we still often design for perfect vision. Especially as we approach colors.
The most accepted guidelines for accessibility on the web, Web Content Accessibility Guidelines (WCAG) 2.0, has requirements on color contrast too.
In the public sector these requirements often are mandatory requirements and more and more businesses realize their importance.
When it comes to color, the most common level, WCAG 2.0 Level AA, says the following on color contrast:
The 4.5:1 ratio is used in this provision to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.
What’s the right color contrast for the web?
When you select colors, you need to have some knowledge about what contrast is legible for a majority.
Intuitively, we know that gray on black is difficult to read. Similarly, we quickly determine that white on yellow is tricky. But somewhere you are bound to find a moving limit where you won’t feel that there is “enough contrast”. This is where it is better to base your decisions on statistics rather than intuitive feel. Maybe your vision is better than average?
According to WCAG 2.0 AA you want a color contrast of at least 4.5:1. The simplest way to determine if your color contrast is good enough, is to use a tool. One of these is the WebAIM Color Contrast Checker.
Body text against a white background is one of the most common design decisions. Many services choose text that is far too light.
Let’s try three different example colors for text, against a white background (#FFFFFF).
- Dark grey text (
#333333) - Medium gray text (
#666666) - Light gray text (
#999999)
As you can see, and might have expected, light gray text doesn’t have enough contrast against a white background.
You can also use the tool to find a color at the limit. Opt to darken the color, and it will provide you with the color closest to the color contrast requirements.
At this point, you will notice that the color #757575 against a white background is the lightest text color we can use for both body and headline copy to meet the requirements of WCAG 2.0 level AA.
When testing your colors you might find that some colors work well for headlines but not for body copy.
Does your website have enough color contrast?
At your service is a range of simulators and tools to help us without vision impairments experience how others see our websites.
NoCoffee Vision Simulator
Can be used to simulate reduced color vision on websites through Google Chrome.
Chromatic Vision Simulator & VisionSim
Two different mobile apps (free) that can simulate different types of vision impairments.
Chromatic: iOS | Android
VisionSim: iOS
Summary
When selecting colors for a design, use the available tools to find the right color contrast between foreground and background colors.
Impaired vision is nothing absolute. As with most things, it’s a relative scale. Good color contrast and a methodology in color choices that consider vision impaired people benefits everyone.
Don’t forget to use simulators every now and then to remind yourself how others experience your website, service or app that you’re designing.
Test the contrast of your colors. You will quickly notice that tiny adjustments make considerable difference.
Foremost though, make sure to add these types of tests to your workflow. Once you are accustomed to checking the contrast, you will automatically start choosing colors that work better together.
