Thread by @LareneLg

#GAAD morning, it's Day 2!

How'd everyone go with keyboard #a11y yesterday?

You may have found it slow to browse a site with just the keyboard. Yes, there is a learning curve, also, many users have software that gives them shortcuts!

Today is about colour and contrast 🖍 ->

In Australia, 8% of men, and 0.4% of women have some degree of colourblindness.

We cannot use only colour to provide meaning, or risk excluding nearly 1-2 in every 20 people from the web.

Here is a sign up form, it uses colour to show whether an input is valid or invalid. In this example, the password field is invalid, it has a red border, and the other fields have a green border.

I use colororacle.org to simulate types of colourblindness, just hit f5

There's more to do when making a form accessible to all users.

But at least for colourblindness, using icons and helpful error messages are a great solution.

A useful tip I learnt from @refactoringui is to design in greyscale, then add colour. 👍

Next, I'll talk about contrast

Contrast is the difference between luminance (light emitted) of one colour as compared to another. The contrast ratio of white text on a white background is 1:1, while black text on white is 21:1.

Web standards say accessible text/background contrast should be at least be 4.5:1

Sadly, 86% of the web fail to meet minimum contrast ratio requirements (google "@webaim million") as according to the Web Content Accessibility Guidelines (WCAG).

Let's take the form below. I'm testing contrast in @sketch using @getstarkco - you can also simulate colourblindness

Good #accessible contrast is essential for people wth ageing or low vision.

But it is great for all. It reduces eye strain, and is easier to see in all environments. Think, outside in the sun on your phone.

It's easier to fix contrast issues early, so test while designing 🎨

If you're working with HTML & CSS, you can also easily check for colour contrast issues using your developer tools, or by adding some useful browser extensions. These also test for other issues.

I'll be sharing these browser accessibility checkers, tomorrow 😉

Happy #a11y week!