What should a well-designed high contrast function do?

Question

I want to make my website accessible for nearly everyone. I already have a function to increase font-size. Now I am doing the high contrast function.

However, how should such an interface for visually impaired look like? I already asked another person who is visually impaired and he said light text on dark background is better for him. And in regards to color: He likes dark green.

I would appreciate it if you could give me some other best practices to make the visit of my website a good experience for visually impaired.

Should I also change the font of my website? If yes, what type of font?

Answer 1

Do more research. Asking one person will only get you that person's preference - Ask lots more people and look for patterns in the results.

The RNIB (UK organisation for blind and partially sighted people) recommends yellow text on a black background but this may not sit well with your particular users.

Not only do you have to think about contrast but you have to think about colour combinations too. Colour blindness affects around 4.5% of the population of the world - That's 9 in every 200 users. Luckily there are tools like the Colour Contrast Analyzer to help you out with that.

Also, vision is not the only area to consider accessibility. If you have small controls that are placed close together that's going to be difficult for people with muscular or motor problems who find it difficult to control a mouse easily. Some people cannot use a mouse at all - does your product allow for keyboard controls? Does your product rely on audio cues? If so then you'll need a visual equivalent for deaf people.

Finally, the most tricky thing to cover is accessibility for people with cognitive difficulties: does your product make sense? Is there too much information presented in a disorganised way or is it broken into easily understandable chunks? Have you cut out all of the unnecessary form fields and other junk?

I made a low-level simulator if you want a small glimpse into the world of someone struggling with accessibility issues.

Answer 2

Think of high contrast text and using more than just color.

There are a lot of accessibility guidelines out there. I'll mention two examples that I have come across in projects before. Check the attached links for extra guidelines.

High contrast text

Check the Web Content Accessibility Guidelines for a lot of useful information on this topic, including contrast for text;

1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Source: Web Content Accessibility Guidelines (WCAG) 2.0

Use more than color

Imagine using green and red as indicators of positive and negative in your design. Users with color blindness can have trouble with these colours. Also use shape in combination with your colours for positive and negative. For example; use a triangle pointing up or a thumbs up for positive.

Here's another list of accessibility points to consider that includes the above mentioned point (number 11);

Accessibility Checklist

Answer 3

To add to the above answers.

Contrast is not the only thing to keep in mind:

1) Is your website ARIA friendly? Can it be easily browsed through a screen reader?

2) Is it responsive or developed in such a way that the website remains functional in extreme levels of zoom? A lot of visually impaired users tend to zoom (often extremely) while they browse the web. I have encountered users that browse in text-heavy sites with a zoom of 500%. Will your content still look the same?

GOV.UK has several posters that sum all the accessibility issues and suggested solutions quite nicely. Check it out!

Answer 4

You can inspire yourself by Microsoft Windows. Its High contrast color modes have these features: (I emphasized possible takeaways with bold.)

• user interface is drawn by pre-defined minimalistic set of colors. They are Text, Hyperlinks, Disabled Text, Selected Text, Button Text and Background. (Besides these colors, there is a possibility for one or two theme colors which do not affect usability of content - the are for example used as active and passive window frame color, but on the web page the mileage may vary. Unlike in standard color modes, each of the above colors can be customized by the user. Initially, few sets of colors are offered, some using white on black and some black on white.

• displaying of background images is suppressed. This is mostly visible on web pages displayed in the Internet Explorer, but actually it is system-wide.

• there is a simple way to switch high color scheme on and off (toggle). This is useful when one who usually works in High Contrast mode wants to check original look and then return. (Many reasons for this exist.) Also, all open applications get a system message when high contrast is turned on or off so they can repaint accordingly.