Section 4 Action Summary

Section summary and checklist of the 10 action items

Ensure that color is not used as the only visual means of

ONE-LINE conveying information, indicating an action, prompting a
SUMMARY OF response, or distinguishing a visual element. You can still
THIS SECTION
use color and color-coding, just not as the sole means of
differentiating multiple things.

BEST Check for color independence as you’re designing, and do so

01
PRACTICE by using the grayscale test.
Turn the design grayscale, then ask yourself and/or others with
fresh eyes, “Is there anything that you can’t identify, or tell the
difference between, with the hues gone?”.
Why? If you wait until the end of the project to check for color
independence, you may run into a domino-effect that bloats the
effort of fixing the issues, and/or it might be too late to make the
needed changes and still meet the project deadline or stay within
budget. The grayscale test simulates complete color-blindness
(the worst form of a color deficiency in the vision) and allows you
to design for that worst-case scenario from the beginning of your
design process.

BEST For error message styling: Indicate errors by adding/changing

02
PRACTICE something structural (e.g. add an icon, indent/offset the field)
as opposed to swapping a current color (e.g. gray field border
changes to red).
ƒ Tip 1: Work in black-and-white first (don’t add any red until
you’re done). Why? This will ensure we don’t rely on color to
visually convey that there is an error.
ƒ Tip 2: Use a thicker border around the field with an error. Why?
If the border is red, but not structurally different in any other way,
the design will be reliant on color to convey meaning.
ƒ Tip 3: Place the error message and any helper text below the
field label and above the input field (and ensure the error
message includes instructions on HOW the user can fix/get
out of the error). Why? This way screen readers will read the error
message or helper text before getting to the input field.

© Liz Brown | The Accessibility How-To Guide for UX Designers | Access full course via: linktr.ee/LizBrownUX 01
 ƒ Tip 4: Use line, shape, or iconography to call visual attention
to the area of the error message. Why? We can’t rely on color to
make the error visually obvious, so we need to add something else
to do the job.

When turned grayscale, the error state looks the same as the normal The thick border and added
state, and the error text looks like helper text. icon now make this design
independent of color. But the
error text isn’t very helpful — it
should tell the user how to fix
the issue.

Put the error message and any Now the icon looks weird The icon was removed and a
helper text directly below the placed there. red vertical line was added.
field label so screen readers will
read them before getting to the
corresponding input field.

Now when turned grayscale,

we see the error state is now
distinguishable even if you
couldn’t see color. This passes.

© Liz Brown | The Accessibility How-To Guide for UX Designers | Access full course via: linktr.ee/LizBrownUX 02
 BEST For current menu items (and other “selected” states): Style the

03
PRACTICE currently selected menu item with a color independent indicator
(not just a color change), or use relative luminance.
ƒ Tip: Turn your design grayscale. Is the current menu item still as
clearly distinguishable as before? It should be. Why? Usability for
all. The current/selected item should be distinguishable by everyone,
even those with vision impairments.
ƒ Preferred method: Use a non-color indicator such as shape, line,
text treatment, size, etc., instead of changing only its color. Note 1:
This can be done in addition to a color change. Note 2: Single-pixel
underlines are not sufficient. Why? A non-color indicator creates a
current state that’s visible by all and more usable for all.
ƒ Alternative method: Use relative luminance (where the currently
selected state has a minimum 3:1 contrast ratio with the non-
selected state of the other menu items). Why? This heightened
contrast between the currently selected and not-selected items will
make their difference more visible, even in grayscale.

Fail (in color). Fail (in grayscale).

Pass (in color). Pass (in grayscale).

© Liz Brown | The Accessibility How-To Guide for UX Designers | Access full course via: linktr.ee/LizBrownUX 03
 BEST For links that have surrounding text, underline them; for links

04
PRACTICE that are standalone, use bold.
Tips for links surrounded by other text:
ƒ Tip 1: Turn the design grayscale. Are the links obvious or do they
blend in with the non-clickable text? They should be obvious
Why? Some users explore by clicking on everything, others simply
look and scroll. We can’t expect everyone to click around as they
explore, so by making interactive elements obvious at a glance the
interface is easier and quicker to use.
ƒ Tip 2: Don’t want to underline all links that are surrounded by
other text? Alternative #1: Use bold or some other non-color-
related text styling that’s obvious. Alternative #2: Use relative
luminance (where the link color has a minimum 3:1 contrast
ratio with the surrounding text color, and both have a minimum
4.5:1 contrast ratio with the background color, and the text links
acquire an underline or other text styling on hover and a different
styling on keyboard focus). Why? An underline is the best method,
but these alternatives help color-blind users, or those with vision
impairments (even situational ones) identify the text that’s clickable
within a block of text.
ƒ Tip 3: Use text styling (aka text decoration), such as underline, in
addition to relative luminance (plus an underline on hover and
focus) for even better accessibility, and usability for all.

Fail (in color). Fail (in grayscale).

Pass (in color). Pass (in grayscale).

© Liz Brown | The Accessibility How-To Guide for UX Designers | Access full course via: linktr.ee/LizBrownUX 04
 BEST For progress trackers / progress indicators (and other similar

05
PRACTICE UI elements): Start by designing all three states for the steps in a
progress tracker (past, current, and future) in one shade to avoid
using color to convey meaning, and then make them visually
unique using non-color styling, and finally add color as the
secondary visual cue.
Deeper perspective: The point of a progress tracker is to offer a big
picture view (situational awareness). If some steps are faint colored
or disabled-looking then it’s offering only a partial view, nulling the
overarching benefit of displaying a progress tracker.
Helpful mindset: “If it’s too light for everyone to see, then some
people aren’t seeing it. If it looks like it’s not there, then it might
as well not be there, so just delete it. Don’t want to delete it? Then
make it more contrasting.”
ƒ Step 1: Make everything one color (like black or dark gray) and
don’t change the color at all until you’re done with the structure.

ƒ Step 2: Design 3 distinct states: Past, Current, Future. Style each

to be visually different from the other two, without using color.
Styling ideas for your inspiration:
ƒ Future steps: hollow-fill (vs. the others that have a solid fill).

ƒ Future steps: A dotted or dashed stroke around the (hollow) circle.

ƒ Past steps: Use a checkmark in place of the step number.

ƒ Current step: A thick line under the step label.

ƒ Current step: A down-pointing arrow below the step label, or attached
to the bottom of the circle.

© Liz Brown | The Accessibility How-To Guide for UX Designers | Access full course via: linktr.ee/LizBrownUX 05
 ƒ Current step: Add a second ring around the circle.

ƒ Any steps: Change the size of the circles.

ƒ Any steps: Change the shape of the circles — hexagons, squares, etc.
(ensure the new shape is in-line with the brand’s personality).
ƒ Any steps: A hollow-fill, with varying thicknesses for the stroke.

ƒ Step 3: Add enhancements to further differentiate the 3 states.

Such as:
ƒ Change the font weight (one example: regular for Past and Future, and
extra bold for current).
ƒ If each step is clickable, make them look clickable, such as underlining
the step labels (Note: in the code, the distance between the text and
its underline can be increased, which improves readability).
ƒ Make the connector line thicker between the Past and Current steps.
ƒ Make the connector line from the Current step to all the Future steps
dotted or dashed.

ƒ Step 4: Finish by designing it with color! (Don’t forget to test the

colors’ contrast ratios with their background colors.)

Example 1 (on a light background):

Example 2 (on a dark background):

© Liz Brown | The Accessibility How-To Guide for UX Designers | Access full course via: linktr.ee/LizBrownUX 06
 BEST For bar charts (and other similar data visualizations): Use
PRACTICE pattern fills for bar charts and other similar data visualizations.

06 ƒ Step 1: Look at your chart in grayscale and see if you can still
interpret the data. Why? This will show you what areas of your
chart need differentiating.
ƒ Step 2: Use different pattern fills (when there is an area large
enough for a pattern fill to be seen), which can be done in
addition to using color. Make sure the color of each pattern has
a 3:1 (or greater) contrast ratio with the background color of
its bar. Why? This way it will not matter which colors a person is
unable to tell apart (e.g. red-green, blue-yellow, brown-orange) –
they can rely on the different patterns to differentiate the bars from
one another, and correlate each patterned bar to its corresponding
pattern in the legend (don’t forget to add the patterns to the legend
too!)
ƒ Step 3: After adding patterns, turn the chart grayscale again.
Can you clearly tell which bar corresponds to which legend
item? If you can’t quickly tell the differences, people with
vision impairments won’t be able to either. You may need to
pick different patterns. Why? Sometimes patterns that are too
lightweight or too heavy will need to be swapped for a different
pattern that looks more (1) identifiable, and (2) unique from the
other patterns used.

Fail (in color). Fail (in grayscale).

Pass (in color). Pass (in grayscale).

© Liz Brown | The Accessibility How-To Guide for UX Designers | Access full course via: linktr.ee/LizBrownUX 07
 Fail (in color). Fail (in grayscale).

Pass (in color). Pass (in grayscale).

BEST For data visualizations: Use interactivity in data visualizations to

PRACTICE allow users to pinpoint specific numbers, and to view individual

07 graph elements isolated.

ƒ Use interactivity to allow users to click/tap/hover on
individual data points (bar, node, region) and get its exact
value (number, label). Or for simple data visualizations, display
the value next to each data point by default. Why? Certain areas
are likely to call viewers’ attention and they will want to know the
exact value for that area. Also, this is an accessible alternative for
graphs that use a pale grid in the background that’s too faint to be
contrast compliant (the grid is used to line up the top of each bar or
point on each line with the values on one or more axes).
ƒ Use interactivity to show a line/area/region isolated on click/
tap/hover. Why? This makes it easier to see individual parts of
the data viz without the “visual background noise” of other data
elements that may be overlapping or difficult to distinguish.

© Liz Brown | The Accessibility How-To Guide for UX Designers | Access full course via: linktr.ee/LizBrownUX 08
 BEST For line graphs (and other similar data visualizations): Use
PRACTICE dashed/dotted line styles, and/or varying line widths, for line

08 graphs and other similar data visualizations.

ƒ Use different dashed/dotted line styles, and/or line widths,
for line graphs. Different line widths work when there is a
limited number of lines in the chart allowing for the line widths
to be obviously different from one another. Don’t forget to apply
the same line styles in the legend. Why? The line styles are what
people with vision-impairments can rely on to differentiate the lines
from each other and correlate each line to an item in the legend.
ƒ Still use color-coding for the lines (in addition to the dashed/
dotted line styles). Why? This helps those who CAN perceive
colors (full colors or even just shades).
ƒ Before deeming your graph “finished”, turn it grayscale and
have someone who has never seen the graph before look at
it. Can they tell the lines apart, correlate each one to the right
legend item, and overall interpret the data? If not, ask what
they had a hard time with (remembering that usability and
accessibility issues are the chart’s fault, not the viewer’s). You may
need to use different line styles that are (1) quick to identify at
the size they are scaled to, and (2) more unique from the other
line styles.

Fail (in color). Fail (in grayscale).

Pass (in color). Pass (in grayscale).

© Liz Brown | The Accessibility How-To Guide for UX Designers | Access full course via: linktr.ee/LizBrownUX 09
 BEST For data visualizations: Use other non-color indicators, like

09
PRACTICE shapes, labels, or icons, to make data visualizations color
independent (when pattern fills or line styles are not feasible).
ƒ Use different shapes for graph elements. Such as the points
on lines in line graphs, nodes in node graphs, bubbles in bubble
charts, or rectangles in org charts, gantt charts, or bar/column
charts. Think beyond primary shapes. For example, think about
how many variations you can make from a rectangle — one
clipped corner, one rounded corner, a column with a picket fence
top, scalloped top, triangle top.
ƒ Add labels (or icons with a legend) on the data viz when
possible. Such as next to each line, pointing to each pie slice, or
hovering over each bar. These can be visible by default for simple
data visualizations, or triggered on hover/click for more data-
heavy visualizations.

BEST For any colored UI elements: Combine multiple color

10
PRACTICE independence tactics for a more failproof design that’s more usable
for all.
For example, you could combine all of these tactics:
ƒ Non-color styling: e.g. different patterns, dashed line styles,
shapes, text styles, border/line thicknesses, iconography, labels,
size.
ƒ Relative luminance: where each color has a 3:1 contrast
ratio with the other colors of the color-coded part of the data
visualization. A monochromatic color scheme (all shades of 1
color) can make this easier to achieve when you have a lot of
colors.
ƒ Non-color styling on hover and keyboard focus (if
applicable): e.g. a text link gains an underline on hover and an
outline glow on keyboard focus.
ƒ Color for color-coding: still use color as a secondary visual cue
because it helps people without vision impairments.

Copyright © Liz Brown. No re-posting, re-using, selling, or editing.

All rights reserved. ƒ Do not distribute, post, transmit, amend, sell, re-purpose,
ƒ This document is copyright protected and for your reproduce, duplicate, or re-use any part of this document
personal use only. without direct written consent from the author.
ƒ As a condition of use, you agree to retain all copyright ƒ Any violations may result in civil and/or criminal liabilities.
and notices and to not modify or re-post any of the
material in any manner.

© Liz Brown | The Accessibility How-To Guide for UX Designers | Access full course via: linktr.ee/LizBrownUX 10
 Limitation of liability. Use at your own risk.
ƒ This document is for educational purposes only, ƒ All effort has been made to present accurate, up to
and does not constitute legal, financial, medical, or date, reliable, complete information. The author takes
professional advice. no responsibility or liability for any errors or omissions.
ƒ Under no circumstances will any blame, legal The information is provided on an “as is” basis with no
responsibility, or liability be held against the author for guarantees or warranties of any kind whatsoever, expressed
any damages, reparation, or monetary loss due to the or implied.
information contained within this document and/or its ƒ The author is not responsible for your use of the information
use, directly or indirectly. contained in, or linked to, this document, which has been
derived from various sources. Please consult a licensed
professional before attempting any techniques outlined.

© Liz Brown | The Accessibility How-To Guide for UX Designers | Access full course via: linktr.ee/LizBrownUX 11