Low vision
Low vision and color accessibility covers every user that has a lower eyesight than average (glasses do not help or are not worn) and/or sees color differently. He may adjust the settings of his computer monitor, might use a screen magnifier or custom stylesheet, but is not using a screen reader. According to the EBU more than 4% of the European population is blind or partially sighted and according to Webvision ~8.5% of the US population is affected by color-blindness. Compared to a city that would be more than three times the population of New York City. This section focuses on the partially sighted that do not use a screen reader and the colorblind. There are different types color blindness:
| type | what is it | percentage |
|---|---|---|
| Deuteranopia | Red and Green appear similar, but same intensity. | ~1.5% |
| Deuteranomaly | Greens are muted. | ~5.4% |
| Monochromasy | All colors are affected, user see dimmed colors or only shades of gray and has a very poor vision. | <1% |
| Protanomaly | Reds are less intense and might appear black. | ~1% |
| Protanopia | Red and Green appears similar. Some colors appear more intense than normal. | ~1% |
| Tritanopia & Tritanomaly | Blue and Yellow appear similar. | <1% |
Basics
- Make sure that your images are of adequate resolution.
- Users will increase the general page size. Increasing the zoom factor is like decreasing the screen size, thus a responsive design is necessary.
- Always have in mind that some users cannot differentiate colors.
Graphical elements
Important graphical elements with high failure potential are images with text, maps, diagrams and graphs. Those should always be tested against the various types.
- For graphs and maps a legend/key tested against the various types should be provided. Colorbrewer is a tool that provides you with a color-blind friendly color palette.
- Not solely rely on colors, whenever possible also give other visual clues as the style, thickness, luminance/shades, contrast.
- Users should be able to zoom into the page to see details in visual elements. Your images should scale as well. So, make sure that your images are of adequate resolution. Find a good balance between loading time and resolution. Compress your images, i.e. with tiny png. It might also be helpful to lazyload your graphical resources and/or to use different image resolutions based on the viewport size.
- If you have a layer of text on-top of your images, make sure that the contrast does not solely rely on colors. Some contrasts might be perfect for us, but are a nightmare for color blind users:
Users with Deuteranopiahave difficulties with red on green and vice versa.
Users with Protanopiahave difficulties with red on green and vice versa.
Users with Tritanopiahave difficulties with a blue and yellow combination.
For users with Monochromacycolors with similiar brightness will blend.- Have a contrast of 4.5:1 on your colors. Jonathan Snook made a handy tool to check your color contrasts.
Typography
If you want users to actually read your content, good typography will be crucial. Beside this section, have a look at the Typography for Cognitive Accessibility.
- A common false belief is that full black on full white is the best contrast. Although the contrast is higher by using pure color combinations, this can be very tiring for the eye. Therefore, to reduce eye strain, use off-black against off-white. I.e. the text on this page is written in
#191919black on#F6F6F6white. 
Full contrast vs off-colors. High contrast, as black & white, can create a sense of vibration on the screen due to your monitors luminance and thus stress the eyes. - Some users use their own stylesheet to overwrite yours. It is important to allow that. That is one of the reasons why you should avoid using the
!importantkey in your CSS, which is difficult to overwrite. - The user should be able to resize the text to 200% of the original size. This should work anywhere without the text being cut off, overlapping or pixelating. You can test this by increasing your browsers zoom. On Firefox under
view > zoom. - While 12 pixels is a good reading size on printed documents, the font-size on screens should be higher since users usually sit further away from screens and because of irritations due to the screen luminance. As a rule of thumb: between 16-18 for desktop and 12-14 on mobile.
- Usually links are blue with a 4.5:1 contrast because almost all users will be able to differentiate blue. However, users with Tritanopia and those seeing only in Monochrome will still have troubles. That is why inline/in-text links should have an underline to help distinguish them from the rest of the text. Also, that is why no other underlining should be used on the page. However, this rule is not necessary on other elements, i.e. menu items do not have to be underlined or colored if it is obvious that the element is a menu.
- Make sure to have hover & focus states that differ the initial state of your interactive elements. Optimally not subtle and not only by color. Otherwise, the user might not get that he can operate the element. Example:
- skip code example to next item
.interactive-element { color: blue; text-decoration: underline; } .interactive-element:hover, .interactive-element:focus { color: deepskyblue; text-decoration-style: double; } - Due to resizing issues it is a good practice to have any text as real text, not within an image. The best option right now is to style your text with CSS.
Menu / Navigation
A menu serves multiple purposes. To navigate a website, of course, but also to give the user a sense of orientation. It is one of the websites key elements. Have a look at the navigation for Visual, Physical & Audio and Cognitive Accessibility
- Indicate the page the user is currently on. Have another indicator than just color. This website adds a background gradient on the current page and the current section in the table of content is highlighted by weight and size.
- Avoid absolute sizing of elements. Use relative sizing so that the website adjusts as the screen size changes.
Forms
The user should always know where he is and what he can do to achieve his goal. Similar to the navigation, forms, too, play a very important role on websites. That is why there are guidelines for Visual, Physical & Audio and for Cognitive Accessibility.
- Position highlights (as the focus outline) may be styled but should never be removed. They should stay prominent and obvious. It is important for the user to know where he is, blinking cursor lines are easily overlooked.
- Fields with errors should not only be highlighted with color. For example: You may add a cross or an exclamation mark to indicate an error and a check-mark for success.
- Add a summary of all errors on top of the page briefly explaining why there was an error and how to fix it. This way the errors cannot be overseen. Global error messages should have a
headingand alistof errors. Ideally, errors are linked to the corresponding field. - It has somewhat become a standard to add asterisks to required fields. You should still explain somewhere what they mean. You may instead just add the keyword “required” to the respective fields.
- If you use background colors to indicate errors, then make sure that everyone can see them. While black on red might be a bad idea, white on red has a very good contrast.
Users with Monochromasywill have difficulties to see this color contrast.
Users should not have any difficulty with this contrast.
Testing & resources
Found an error or have an addition? Please contribute to this project.
- You do not need to buy expensive low vision simulation goggles. Low vision actually really comes down to responsive designs and stylesheets that can be overwritten. Zoom your page by 200% and check for common issues.
- There is a lot of free tools to test your websites on color blindness. You should definitely grab one and use it. The most popular ones are Color Oracle (lacks of tests for Monochromasy) and Sim Daltonism (Mac only). There is also a popular webpage checker.
- References/Resources used to write this page: W3.org, Webaim. UX Stackexchange, Color-Blindness, somersault1824, colormatters uxmatters, uxmovements, Tigercolor, Pivots’ Blog, the quick guide to web typography and Reddit.
Open up the web for everyone!
Visual • Low Vision & Color • Physical & Audio • Cognitive
Selling Accessibility