how to design for colorblind user ?
TRANSCRIPT
www.tmasolutions.com
How to design for Colorblind User
Sourse: Smashing Magazine
Content
2
Are you Color blind ?
What Is Color Blindness?
10 Tips for Designing for Color Blind Users
Tooling
Examples
Are you color blind? (1/2)
3
If you can realize the number inside
circle, you have normal eyes. If not,maybe you’re colorblindness.
4
Are you color blind? (2/2)
5
“ There are many types of color blindness but itcomes down to not seeing color clearly, gettingcolors mixed up, or not being able to differentiatebetween certain colors.”
What is Color Blindness? (1/4)
6
MEN WOMEN8% 0.5%
> 13 million people
What is Color Blindness? (2/4)
7
What is Color Blindness? (3/4)
8
Mark Zuckerberg
Bill Clinton
What is Color Blindness? (4/4)
Lots of famous leaders and creativeshave been color blind, including MarkTwain, Bill Clinton, Mark Zuckerberg(rumor has it that Facebook first usedblue as its highlight color because it waseasiest for the founder to see) and even— although this claim is hotly disputed— Vincent Van Gogh.
9
1. Text Readability
2. Text Overlaid On Background Images
3. Color Filters, Pickers And Swatches
4. Link Recognition
5. Color Combinations
6. Form Placeholders
7. Primary Buttons
8. Alert Messaging
9. Required Form Fields
10. Graphs
12 Tips for Designing for Colorblind Users
10
This illustrates how contrast is based onthe combination of color and size.
1. Text Readability
To ensure text is readable it should pass accessibility guidelines based on the combination of text color, background color and text size as follows.
11
Text overlaid on an image without a mask
Text overlaid on an image with a mask.
2. Text Overlaid On Background Images
Text overlaid on imagery is tricky because someor all of the image may not have sufficientcontrast in relation to the text.
Reducing the background opacity increases thecontrast, making the text easier to read.
Alternatively, you can style the text itself to havea solid color or a drop shadow, or anything elsethat matches your brand guidelines.
12
3. Color Filters, Pickers & Swatches (1/2)
The screenshot below shows the color filter on Amazon as seen by someone with and without protanopia (red–green color blindness). Without descriptive text it is impossible to differentiate between many of the options available.
Amazon shows descriptive text when the user hovers, but hover isn’t available on mobile.
13
Gap solves this problem by adding a text label beside each color as shown below:
3. Color Filters, Pickers & Swatches (2/2)
14
4. Link Recognition
Links should be easy to spot without relying oncolor. The screenshot below simulates the visionof somebody with achromatopsia (can’t see color)viewing the UK Government Digital Service (GDS)website. Many of the links are hard to see. Forexample, did you notice that “GDS team, Userresearch” (located under the heading) are links?
To find a link, users are left having to hover withtheir mouse waiting for the cursor to change to apointer. On mobile, they are left to tap on texthoping it will make a page request.
The links above with icons are easier to see. Forthose without, it would be a good idea to add anunderline, which is exactly what GDS does withinthe body of its articles:
15
• green/red
• green/brown
• blue/purple
• green/blue
• light green/yellow
• blue/grey
• green/grey
• green/black
AVOID
5. Color Combinations (1/2)
In the physical world you can’t always control which colors appear next to one another: a red apple may have dropped and nestled itself into some green grass. However, we can control the colors we use to design our website. The following color combinations should be avoided where possible:
16
5. Color Combinations (2/2)
17Apple’s registration form uses a placeholder without a label Made.com uses labels with good contrast
6. Form Placeholders
Using a placeholder without a label is problematic because placeholder text usually lacks sufficient contrast. Apple has this problem with their registration form, as shown below:
Increasing the contrast is not advisable because it will then be hard to tell the difference between placeholder text and user input.
It’s better to use labels – a good practice anyway – with sufficient contrast, which is exactly what Made.comdoes as shown below:
18
7. Primary Buttons
Often, primary buttons use color alone to present themselves as such, and Argos does just this on its login screen:
The Argos login screen relies on color to emphasize the primary button. (View large version) Instead, consider using size, placement, boldness, contrast, borders, icons and anything else that will help – within the bounds of your brand guidelines. As an example, Kidly uses size, color and iconography:
19
Alert messaging with text prefixes and icons.
8. Alert Messaging
Success and error messages are often colored green and red respectively. Most color-blind people don’t suffer from achromatism, and so will naturally associate different colors with different messages. However, using prefix text such as “Success” or, my preference, an icon makes it quick and easy to read as shown below:
20
9. Required Form Fields
Denoting required fields with color is a problem because some people may not be able to see the differences.
21
Instead, you could consider:• Marking required
fields with an asterisk.• Even better, marking
required fields with “required.”
• Where possible, remove optional fields altogethe
9. Required Form Fields
22
Graphs viewed with normal vision
10. Graphs (1/2)
Color is often used to signify differentsegments of a graph. The image belowdemonstrates how people with differentvision would see this. The color-blind-friendly graph is on the right.
Using patterns and, where possible, placingtext within each segment makes graphs easyto understand. When text doesn’t fit – as isoften the case with a small pie chartsegment – using a key will suffice.
23
Graphs viewed with protanopia Graphs viewed with achromatopsia
10. Graphs (2/2)
24
• Photoshop
• Check My Colours
• WebAim’s color contrast checker
Tooling
25
Tooling - Photoshop
26
Tooling – Check My Colours
Examples
28
Examples
29
Examples
30
Examples
31
THANK YOU!
Tel::
Fax:Email: