


(Image credit: Jay Wennington) ( View large version) Text overlaid on an image without a mask. Text overlaid on imagery is tricky because some or all of the image may not have sufficient contrast in relation to the text. Here are a few examples of color and size combinations that do and do not pass: This illustrates how contrast is based on the combination of color and size. To ensure text is readable it should pass accessibility guidelines based on the combination of text color, background color and text size as follows: “WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger).” While the following tips aren’t exhaustive, they do cover the majority of problems color-blind people experience when using websites. Relying solely on color for readability and affordance makes a website difficult to use, which ultimately affects readership and sales. This could include low-quality monitors, bad lighting, screen glare, tiny mobile screens and sitting far away from a huge television screen. These problems can also be exacerbated by the environments in which people use websites. In this article I provide 13 tips to improve the experience for color-blind people – something which can often benefit people with normal vision too. Designing for color-blind people can be easily forgotten because most designers aren’t color-blind. If your audience is mostly male this increases to 8%. There are many types of color blindness but it comes down to not seeing color clearly, getting colors mixed up, or not being able to differentiate between certain colors.Īccording to Colour Blind Awareness 4.5% of the population are color-blind. According to Colour Blind Awareness 4.5% of the population are color-blind.
