Colours that are accessible

Colour diagram showing the three different types of colour vision deficiencyColour is an important part of designers’ creative work. When it comes to colour accessibility the creative path takes a few twists and turns. That’s because people who say they are ‘colour blind’ are not all the same. Most can see some colours, but not all of them. So how can designers choose colours that are accessible, especially in digital communications?

Adobe has a blog page that explains the importance of choosing colours. Four images show the three different versions of colour vision deficiency, which are:

    1. Protanopia: Referred to as “red weakness,” this variation of red/green color blindness results in individuals being unable to perceive red light.
    2. Deuteranopia: Also known as “green weakness,” this type of red/green color blindness renders people unable to perceive any green light.
    3. Tritanopia: People who suffer from blue/yellow color blindness have difficulty distinguishing between blue and yellow colors. This form of color blindness is far less common than its red and green counterparts.

Graphic designers will appreciate the colour wheels and ways to avoid a conflict of colours. Examples of good colour choices show that designs can still be attractive as well as functional.

Manisha Gupta says in her article Color choices that are accessible

“Color is a foundational element in any creative work. When I took the challenge to design the Color Accessibility feature for Adobe Color, it wasn’t a linear path. While I was conducting research and learning more about accessibility, I realized there was no single tool that holistically helps a designer make a choice of colors that are color-blind safe — a choice that impacts roughly 300 million people globally. This made the case for bringing accessibility into Adobe Color even more compelling, and it is one reason why Adobe wants accessibility to be part of every creative’s process right from the beginning of a project.”

You can try out the online Material Design accessible colour tool that provides information on colour contrasts for visual material. 

What is user experience?

Graphic of a male sitting behind a computer screen with the words web design on the wall behind him.Technology has advanced to a point where almost anyone can set up a website – no coding experience needed!  It’s easy to get carried away with glitz, glamour, flashing signs and a swinging carousel of images. This is where user experience, or UX, comes into play. And let’s not forget web accessibility. Many of us have something to do with a website. So whether we contribute to one, manage one, or are commissioning one, there are some basics to know.

First some statistics. Seventeen per cent of users will not return after just one bad experience. Forty-eight per cent of users are annoyed by sites that aren’t mobile friendly. 

The DreamHost blog has two articles, one explaining how UX works, and the other is about web accessibility. It’s a pity they weren’t joined up into one article. Accessibility is not an optional add-on. It should be considered from the outset of the initial design and be a continuous process for ongoing content. 

While the UX article focuses on “target audience” and forgets this audience might need accessibility features, it has some useful advice. No need to get too bogged down with detail here. It covers navigation, content, animation, and responsiveness.

The article, 10 ways to make your website accessible is a good start for anyone new to the concept. It covers many of the basics such as colour choice, adding descriptions to images, and text size. Avoid tables for presenting data because screen readers can’t read them unless they are coded correctly. An accessible site expands the potential audience and helps with search engine rankings.

See also Web accessibility techniques: A guide and the section on ICT guidelines on this website for more information. 

Editor’s note: We do our best with accessibility and rely on in-built coding with the free software we use to keep the site running. We receive no funding to run this service. However, we welcome feedback if you find specific difficulties with this website. 

Colour contrast checkers for web

The colours of the rainbow arranged as a wheelAlmost anyone can create a website or add content these days. It doesn’t have to be an IT specialist. One the most basic accessibility features is colour contrast. No matter what level of vision we have, we all need contrast. But how much contrast is enough? And what about colour combinations?

Vision Australia has a colour contrast analyser and instructions on how to use it. The analyser is a tool for checking foreground and background combinations. It also has a function to simulate certain vision conditions such as colour blindness. There is more information on their webpage. The contrast information is also useful for printed material.

For the more tech people, the Axess Lab website has links to seven free tools that help you measure color contrasts that meet the contrast requirements in the Web Content Accessibility Guidelines (WCAG). With almost everything in life being linked to the internet, it is important to make sure sites are fully accessible. Colour contrast is important for many with low vision, but accessibility does not have to equal boring. By going to the website you can see more on each of these seven free tools: 

Editor’s note: I recently saw a page with two sentences in large font, all upper case, in light green against a white background. Note that upper case is also difficult to read – it doesn’t make the information any clearer to the reader. Light green isn’t great either.

Don’t click here for web links

A graphic with six black hands with forefinger pointed each on a circular button.Writing “click here” to link to a web page or electronic document is intuitive for the writer. But not to all readers. This is particularly the case for people who use screen readers. Writing “click here” or “download here” requires the reader to make sense of the words before and after to get the context. This is workable when you can visually read the page. However, a screen reader is a machine and can’t do this for the user.

It’s hard for a user navigating the page audibly if the link text isn’t clear. They can’t be sure where the link will take them. When a link has a focus the link text is announced by the screen reader. If it isn’t created clearly it can be difficult to understand. Link text is clear when it makes sense on its own away from other text

Once you know how a screen reader works, it makes more sense. It makes even more sense when you hear a screen reader working. Online newspapers, such as The Conversation, are good at using clear link text.

CanAXESS blog has a seven minute video explaining why “click here” isn’t helpful and gives examples of how to avoid it.  The key information is in the first five minutes and the last two relate to the WCAG guidelines which don’t cover this very well.

 

AI, the web and picture descriptions

A laptop computer on a desk showing several picturesPeople who rely on screen readers or Braille displays like to use the internet in the same way as others. When it comes to images, this depends on remembering to use the alt-text feature to describe uploaded images. While many big websites do include alt-text, smaller ones often don’t – and there are a lot of bloggers. And social media is the biggest culprit.

There are applications designed to describe images, but they don’t do it accurately. The Chrome accessibility team at Google are working on this. The aim is to use machine learning to more accurately describe the millions of images that are yet to be described. The FastCo website has more information.

Applying alt-text to all your images means that screen readers don’t get the image filename or upload coding instead of something sensible. The added advantage is that when the image fails to load on, say, a phone, a sensible text appears instead of the image. Axess Lab has lots more information in a very readable format. 

What is design?

Diagram showing the four orders of design: symbols, products, interactions, systems.For most people the word “design” conjures up thoughts of creativity, products, architecture, graphics, or the way something looks or functions. When it comes to innovation it is more than this.  What do we mean by design? on the Design for Europe website discusses the concept of innovation. Design has moved from traditional artifacts to designing processes, and orchestrating experiences, and even transforming systems. Design is also about generating fit across different elements so that it solves a The "fit" triangle with problem, citizens, government making policy. problem, fits the user and fits the provider of the solution. Interesting article that lists four principles to help make things fit in the best way possible. Anyone who devises courses of action aimed at changing existing situations is a designer. Seems we are or have been a designer!