Hello, and thank you very much for attending my talk today,
which is called "Don't Prioritize Color Over Content."
My name is Adam Saucier, and I'm a Senior Accessibility Engineer at TPGI.
I started in digital accessibility in 2013 when I was working as a web developer at an
advertising agency, building websites for a large health insurance company.
I then worked at a community college, managing their website and helping faculty members
create accessible course content, things like PDFs, videos, and other content.
I myself have a color vision deficiency, which does not have a cure.
The colorblind glasses that you might have seen advertised do not work and are similar
to accessibility overlays because they actually make the issue worse.
I remember being unofficially diagnosed with a color vision deficiency or color blindness
by my sister when we were both young, when she would make fun of me for picking the wrong color crayon out of the box.
This was followed by an official diagnosis some years later when my automatrist said,
"Yes, you are very colorblind."
There are approximately 350 million colorblind people in the world, give or take, making
the issue of a use of color a more impactful one than some might think.
The three types of color vision deficiencies are red-green, which is the most common, and
where certain shades of green look more red, or you can't even tell red and green apart
at all, blue-yellow, where it's difficult or impossible to tell blue and green, purple
and red, and yellow and pink apart, and complete color deficiency, where you can't see any
colors at all.
This one is very rare.
On this slide is an example of the color plate test, a very common method of testing for
color blindness when you go to an optometrist.
It's made up of a large circle, which itself is made up of smaller circles that are a bunch
of different colors and different hues of the same color.
If you clearly see a number two in this jumble of colors, you might not be colorblind.
If you do not see a number, then you might be colorblind.
I myself am not an optometrist, clearly, so if you are curious about whether or not you're
colorblind, you should go to your eye doctor and have a full test done.
Here is a classic angry girlfriend meme, because every presentation needs at least one meme.
The girl walking toward the camera has the text "pretty colors" overlaid on her.
The boyfriend who looks back longingly at her has the text "many designers" and his
upset girlfriend has the text "content."
The point here is that many designers think about how colors make something look nice
without considering the effect they might have on the content itself.
The WCAG Success Criterion 1.4.1 Use of Color is a level A criterion that affects not only
those who are colorblind, but also those with low vision who have a difficult time distinguishing
certain visual elements.
It's worth noting that this criterion did not change at all between WCAG 2.1 and 2.2.
Now before I go any further, I just wanted to warn you all that I am an untrustworthy
source of information.
According to Sarah Barreilles and her Broadway show The Waitress, one of the stars in the
show sings the lyrics "He could be colorblind.
How untrustworthy is that?" when referring to someone she might go on a date with.
So take everything I say here with a grain of salt.
I'm just joking here, Sarah Barreilles is an amazing singer and songwriter, and The Waitress
is a great musical.
I'll just have to ask her what she means by that line, if I ever come across her in real life.
The next few slides will show some examples of color being used as the only method of
showing information.
A simple example that you'll see in the next slide is a link that is distinguished from
its adjacent text with an underline, which is the default HTML style.
If this underline is removed and only the color is used, it can easily become a failure
of the success criterion and cause a serious issue for many users who won't be able to
tell between what text is a link and what text is not.
Here are a couple paragraphs just with lorem ipsum text.
The first paragraph contains a link that uses only color, but still technically passes criterion 1.4.1
because the contrast ratio between the link text and the non-link text is greater than 3 to 1.
But just because you can do something often doesn't mean that you should.
The link in the second paragraph has the same color text along with an underline, which
makes the difference much clearer.
There is a WCAG technique that even suggests to at least add an underline to the link when
it is hovered over if you still choose to use only color to distinguish the link.
Form field error validation is another classic example of using color as the only way to
present information.
Fortunately, its solution is incredibly straightforward.
As you'll hear quite a bit throughout the presentation, using text along with or instead
of color is often the best solution to making sure your design is accessible to those with
low vision or color vision deficiency.
The first example in this slide fails the success criterion 1.4.1 because a global error
message appears at the top of the form that says, "Please fix the errors below."
"Fields in error have a red border."
Other than the field also being empty, its dark red border is the only difference between
the field that has an error and the field that does not.
In the second example, which passes the success criterion, the field in error also has a text
message below it that says, "Please enter your first name."
This next example shows a star rating system on a shopping website that you might be familiar with.
It shows five possible stars, three and a half of which are filled with an orange color,
and the remaining one and a half are empty.
The contrast ratio between the fill color and its adjacent non-filled color is less than
three to one, so something more than just color needs to be used here.
The only other information presented in text is the total number of ratings for this product,
which is 32.
But that number does not tell users how many of the stars are actually filled versus not
filled, and therefore how many stars the rating has, whether it's a good product or
a decent product or a not so good product.
Many possible solutions to this problem are shown here.
The first example shows the same exact group of five stars, but the color of the filled
stars has been darkened quite a bit and therefore has more contrast between the filled stars
and the unfilled ones.
This increase in hue makes it easier to tell which stars are filled and which are empty.
Even more importantly, text has also been added below the stars that provides the number of
filled stars, 3.5.
The second example is taken straight from Google Reviews and has not been changed since the
number of filled stars, 4.8, is provided in text right before the stars themselves.
The third and fourth examples come from a section of a WCAG understanding document for
a different criterion, 1.4.11 non-text contrast, where the relationship between these two criterions
is discussed.
Both of these examples pass the use of color criterion because the black fill has a very
strong contrast against the not filled ones, and the border of the filled stars is thicker
than the non-filled stars in the final example, even though the yellow color of the filled
stars has very low contrast with just a white background.
The thickened border here acts as an additional visual identifier.
Now I'll move on to my personal favorite way to test the use of color in a design.
Making the page grayscale and checking if the content can still be understood visually.
While actual full color blindness or monochromacy is incredibly rare, you don't necessarily
need to have this condition to be affected by an over-reliance on colors in a design.
For example, my wife applies a color filter to her phone's display to make everything
monochrome or grayscale, which she says makes her less likely to get distracted by her phone
during the work day.
This means any content that relies on only color to make sense will also be lost on her.
This is a simple bar graph created in Microsoft Excel with five bars that are all different
colors and do not have a text label below each bar to show their meaning.
To the right of these bars is a legend that only refers to the color of each bar in order
to associate their meaning.
I don't think it's too unreasonable to say that this is not great design, but it is also
very common for a bar graph.
Here is the same bar graph as before, but it's now in grayscale, where all the bars
and their associated legend elements are just shades of gray.
While maybe it can be argued that since the order of each bar from left to right matches
the order of each item in the legend from top to bottom, the bars can be understood
without using color.
But that is not guaranteed to always be the case.
It probably rarely ever is.
And it also adds a lot of unnecessary cognitive load that users should not have to deal with
when they're just trying to get information from a bar graph.
Here is that same exact bar graph again, but instead of only being distinguishable by color,
the bars and legend now use distinct patterns to associate the meaning of each bar.
While the patterns might be difficult to see on this slide, they consist of dots, dashes,
horizontal and diagonal lines within each bar.
Their color here doesn't matter at all.
And here's that same bar graph once again, it's the last time, I promise, but in grayscale.
Ideally the legend icons here would be larger to more easily see the patterns inside of
them, but this is Microsoft Excel.
The point is that the bars can now be distinguished based on only their patterns, whether they
are filled with colors or just shades of gray.
Because once again, the patterns within the bars are the only things that matter.
Very nice.
Line graphs are another common place to see only color used in a legend to differentiate
each data point.
And that can be solved in a similar way as the bar graph example.
This example shows two possible solutions combined into one line graph.
Text labels that point at their respective lines and each line is composed of a different pattern.
If you only wanted to use the text labels pointing at the lines, that would be fine.
And if you only wanted to have the lines made up of different patterns and use a legend,
that would also be fine.
But it works here to use both.
This feels like a perfect time to show that meme of a young girl raising her shoulders
inquisitively and asking, "why not both?"
But I think I've already gone over the meme limit here.
Speaking of line graphs, this is a good example and possibly also a cruel joke.
It's from the Wikipedia page dedicated to congenital red-green color blindness.
This is a line graph on that page that shows the luminous efficiency function, which I'll
try to quickly explain.
Since color blindness affects the eye's sensitivity as a function of a wavelength, like the one
shown here, it shifts the response time of a person's eye to make it more or less sensitive
to the light from certain wavelengths.
People who are colorblind are less sensitive to lights at certain parts of this wavelength
and therefore have a harder time seeing the colors at these wavelengths correctly.
If that doesn't make much sense, I'm sorry, it doesn't to me either, but blame Wikipedia.
The reason this might be a cruel joke is because the lines of the graph use only color, red
and green.
This is the same line graph from Wikipedia shown in the previous slide, but as of a couple
months ago, it was fixed by a colorblind person to give the lines different patterns, dotted,
dashed and solid.
If only that person chose a better color for the green dashed line, which has an extremely
low contrast with its adjacent white color.
I'll now just quickly go back to the cognitive load that I mentioned in a previous slide.
The previous line graph showing the text labels pointing directly at each line is a great
example of data being easier to parse when text is used instead of colors or even patterns.
Often times, the simplest solution is the best one, and using text labels is really
as simple as it gets.
Even when patterns can make charts and graphs perceivable for more people, they still require
the user to look back and forth between the chart and legend, and they need to remember
what pattern and data points are associated.
This adds to cognitive load, and while sometimes necessary, if the text labels are too long
or complex to fit anywhere within the chart, it's still best to consider the text label
first and use that if possible.
While reading an article recently about the environmental impact of downloaded versus
physical versus cloud-based media, which is a very interesting but unrelated topic, I
came across a few different types of graphs and charts.
The next few slides will go over these real-world examples of the use of color on the web.
Keep in mind that these also have issues with text contrast and text alternatives, but try
to focus on just how colors are used visually to convey the information.
This first chart on the page was a very interesting one.
The caption directly below this graphic refers to multiple things, color and position, referring
to elements that are red on the left, or blue and on the right.
They're also labeled in text as upstream activities and downstream activities, ultimately making
the reference to colors unnecessary.
This would pass the criterion.
But the circles added to the image by the author are more of a concern.
Right below the graphic and its caption, the author states, "Last time we looked at all
the parts of game production circled in red.
This time, we're looking at the parts circled in blue."
This sentence does not reference these elements in any other way, such as using the text label
for each of the circled elements.
Since all the reader has to go by here is the color that the author used for each circle,
this would fail the criterion.
The next example has some type of bar graph/pi chart hybrid thing, where there is an x-axis
with number of hours playing game and game file size in gigabytes on the y-axis.
Three different sections fill the entire graph area, each with their own background color.
Cloud gaming, disk gaming, and download gaming.
Since each of these sections also has its own text label within it, it passes the use
of color criterion.
The text contrast is insufficient though, so that would need to be improved in order
to pass that criterion.
The final example from this article is a fairly standard bar graph with ten different groups
of vertical bars along the x-axis.
Each group has a text below it, but the little bars within each group, of which there are
six, are only distinguished with color based on a legend below the graph.
Some of these colors are extremely similar to each other.
Since the bars are also very close together and there is not much space for a text label
for each, a distinct pattern for each bar would be probably the best solution here.
If the graph was an interactive element and not entirely embedded in an image, there would
also be the option to make each bar hoverable with a mouse and focusable with a keyboard,
which would show a tool tip that exposes a label for each bar.
That would suffice as an additional visual indicator.
Providing an accessible alternative is often a good way to provide content for users where
a certain format is required, such as a complex chart or graph, but is overly difficult to
make fully accessible.
In the following example from Wikipedia, the content is provided in multiple ways.
One is very inaccessible since it is an image with embedded text that uses only color, but
most of the same information is provided in an unordered list and a data table.
Here is an interesting timeline graph contained in an embedded image on Wikipedia that shows
the lineup of a band from 1999 to 2023.
The Y axis has the name of each band member and the X axis has the years that the band
has been active.
A horizontal bar for each band member shows how long they are in the band for and the
instrument they played is shown by the color of the bar and referenced in a legend below
the graph.
The color issue could be easily solved by adding the band member's instrument next to
the name on the Y axis, but since the same information is already provided in an unordered
list above the graph, this might not be necessary.
This is the unordered list that I referred to in the previous slide that contains the
same exact information as the graph, showing the members separated by current and former
along with their instrument and years active in the band.
The information about the number of EPs and studio albums is also provided in a data table
in the discography section of the page.
The next slide will show an edited version of the band member graph that is accessible
for colorblind users and has all the information in one place, because why not?
Here is the same graph showing the members of the band throughout the years, but every
horizontal bar is the same color and the instruments are added as text next to each member's name
on the Y axis.
The type of album released in certain years, EP or studio album, is also labeled with text
pointing to each vertical line.
This is also referenced using only color in the original graph.
The best of both worlds are provided here, a simple unordered list and table that contains
all the same information and a graph with that same information that does not rely on
colors at all.
The next few slides will show a few more classic examples of color being used incorrectly on
the web.
This is an interactive seating chart for a theater.
All seats in the theater are represented by circles.
Any circles filled with black are available for purchase and the gray circles are unavailable.
There are also two seats somewhere in the theater that have been selected for purchase
already.
Can you find them?
If you were able to spot those seats, congratulations, you have the vision of Superman.
For me anyway, it was impossible to tell which seats had already been selected.
This slide shows the same exact seat selector, but with the selected seats contained in a
blue rectangle to more clearly point them out.
This quite clearly fails the use of color criterion and is just difficult
for people in general to use.
This is a much more accessible way to show a seating chart.
The only thing missing here is the legend that shows the meaning of each type of pattern,
whether it's filled, empty, or with dashed lines.
There are different colors being used here, but they do not mean much since each seating
section is also labeled with text over on the left side.
This is taken from an article called "Accessibility Theater" from a TPGI colleague, Doug Abrams.
This was another interesting example I came across in a native app.
It's in a travel booking app when a user is scheduling their stay.
Only color is being used to distinguish the different price ranges of certain dates, cheaper,
average, or higher than usual.
This is great information to know when trying to decide when to schedule a trip, but unfortunately
the only things providing this information are very similar background colors.
Using patterns within these dates might be a challenge since they might conflict with
the number itself.
In this case, the pattern would need to be very simple, and the number would need to
maintain strong contrast against it.
Next up, I'll go through a few more examples that I've come across either in the real world
or around places online, such as Reddit.
I want to point out just how common it is to come across designs where color is used
as the one and only way to understand information.
It goes far beyond just graphs, charts, and form fields.
This first example found on Reddit is a map of China's many counties, separated with different
colors that represent the predominant religion in that county.
Not only is color the only thing being used here, but some of the colors are extremely
similar and might be hard to tell apart even for people with no color vision deficiency
at all.
Since some of these counties are incredibly small, would using different patterns work
here?
I don't think so.
I would recommend adding text directly below the image with a heading for each religion,
followed by an unordered list containing the name of each county where that religion is
predominant.
It would be a very long list, so each one should be contained in a collapsible component
if vertical space is a concern.
Here's a screen from a toddler's lesson on YouTube, from a creator called Ms. Rachel,
with a Christmas tree that has four ornaments of different colors.
The question for the student is, which ornament is purple?
Now, I'm not a parent or a teacher, so I could be off base here, but it seems inconsiderate
at the least to ask this question.
Kids can be colorblind too, after all.
Why not ask about the color and the symbol on the ornament?
Each ornament already has a unique graphic on it.
Maybe something like, which ornament is purple and has a snowflake with six points?
Does that give away the answer too easily, or make it too difficult?
I'm not really sure, but if the child already has difficulty telling apart purple and blue,
the original question is already flawed.
Many of the comments on this thread mention that colorblind people just assume that the
one with the darker hue is purple, when they need to compare purple and blue.
I can tell from experience that this doesn't always work, but it is an interesting approach.
Here's something from Out in the Real World, on a real piece of paper.
It's a little word puzzle called Wave Words, where it asks the user, "What are these colorful
fish trying to spell out?"
Use the key below to reveal the answer.
Two rows of fish with the same exact shape but different colors each make up a letter
in the phrase, which has two words in it.
Below that is a key with many different colored fish and the letter they represent.
The problem here is that all the fish are exactly the same size and shape, meaning only
the color can be used to tell them apart.
The first solution I can think of is to use some different sea creatures with different
shapes.
Whales, dolphins, octopus, jellyfish, crabs, there's so many options here.
This is a companion planting chart, where 30 plants are shown with their relationships
to other plants.
Whether they grow well when planted next to each other, if their combination would help
with bug control, if they shouldn't be planted anywhere near one another, and so on.
There are many ways to present this information, but this designer chose to use a key where
colors represent their relationships with the main plant in question.
For example, in the broccoli section, the text for tomatoes is red, which means broccoli
and tomatoes should not be planted together.
For gardeners, this is pretty vital information that could lead to bad results in the food
they grow for themselves and their families.
Relying on just different colored text here can potentially have a very real impact.
Don't even get me started on screen reader interactivity here.
Unless a lot of visually hidden content is attached to the name of every plant in order
to tell assistive technology users how they relate to other plants, this chart could be
completely useless to these users.
And here's a table showing very similar information as the previous one, but this time it's presented
in a table with plant, companion, enemy, and additional info column headers.
Colors are not relied upon at all here, and the different associations between the plants
can be seen just from the table's structure.
Screen reader users can also understand this information in the table, assuming it's marked
up correctly.
This isn't a PDF, so odds are likely that it's not marked up with the correct tags,
but that's a different topic for a whole different presentation.
Moving into a slightly different topic for a little while, this slide shows two images
of the board game Ticket to Ride.
Colors are certainly a factor here, since players need to claim certain routes on the
board based on the color of their game piece.
But each route is also distinguished by a distinct shape.
Each card that the player uses to lay out their route has a shape in all four corners
that corresponds to each available route on the board.
This gives players an option to use color or shape to work out the route and play the
game.
Now we'll go a little bit beyond board games and go into traveling in the real world.
Public transportation is used by millions of people, so you would think that more focus
would be put on making sure their maps are accessible for as many riders as possible.
In some cases, this is true, thankfully.
But in the case of London's Tube map specifically, which will be shown in the next slide, this
is not the case.
Shown here is a very small piece of the London Tube map, along with a large version of the
map's legend.
Colorblind riders of the London Tube cannot easily tell the difference between the colors
and the legend, so you'll find it very difficult to know which line is which on the map.
That's a big problem.
While those who ride it every day will most likely adjust to this and remember which lines
go where after riding them so many times, it's still a big problem for visitors and
many other colorblind people who don't ride these rails every day and just need to get
from point A to point B.
Here's a small section of the London Tube map, the same section shown on the previous
slide where I at least as close as I could get to it, but this version is fully black
and white and uses only patterns in its legend to distinguish each line.
This is provided by Transport for London.
It has a legend very similar to the colored version than the previous one, but only different
patterns are used.
While this is still a complex map with many overlapping lines and different patterns,
it's definitely an improvement for colorblind travelers since it does not rely on color
at all.
In contrast to the London Underground map, the New York City Subway map uses numbers,
letters, shapes, and even lines with distinct patterns depending on whether it's a train,
bus, or commuter rail.
It can still be overwhelming for those of us who don't live in New York City and use
it every day, but that's more of a general problem.
You can be just as confused by this gigantic map and its legend whether you're colorblind
or not.
Isn't that fun?
In the final few slides for my presentation, we'll be looking at a couple of very popular
puzzle video games that use color.
One of them is an arcade and console game from 1996, and the other is a mobile game
from 2019.
You can probably guess which of the two has accessibility options that make it more playable
for those who cannot distinguish colors.
When I first tried playing Puzzle Fighter II as a kid, which is a puzzle game where
you need to clear the board by aligning gems of the same color to make them disappear,
sort of a spin-off, a puzzle version of Street Fighter II, the gems just weren't disappearing
even though I thought I was matching them up correctly.
I just took it as a sign that the game was broken and walked away frustrated.
There were plenty of other games to play.
After trying it again recently as an adult, I asked my wife if I was placing the correct
yellow pieces next to each other.
She said some were yellow and some were bright green.
Here's a zoomed-in example of the gems from Puzzle Fighter II.
All four different colored square gems are shown here, other than the one special circular
gem.
You can see how these gems look exactly the same aside from their different colors.
To my eyes, there are only three distinct colors here, red, yellow, and blue.
While the console version of this game has options for adjusting the difficulty of the
AI and how quickly the gems fall into the play area from the top, there are no options
to make the gems easier to tell apart for colorblind users.
Making them into differently shaped gems would be one very helpful option.
On the other hand, this newer game called Grindstone, another puzzle game where players
need to clear the board by matching items of the same color, has a lot of accessibility
baked right into its design.
Each monster has a very distinct design with different shapes and colors.
When a certain type of monster is chosen, the rest of the board becomes much darker,
only keeping monsters of that same type really noticeable and bright.
This not only helps colorblind players, but it's a nice option to make the game a little
bit easier to play in general for beginners or those who just want to play it more casually.
This design choice does not change the gameplay at all, and is an option that can be turned
off or set to a lower difference in contrast.
This slide shows the same screenshots from the previous one, but this time they're in
grayscale, just to show that each puzzle piece can still be distinguished even when color
is no longer a factor.
Making this game more accessible with this option does not make it any less fun or dangerously
addicting.
Many video game players like to argue about whether or not accessibility options should
be allowed within their video games.
As they say, they make the game too easy, or they conflict with the designer's true
intentions.
I find these arguments completely ridiculous.
First of all, they're usually options that can be turned on or off.
If you want a super difficult game, just don't use the options.
Also, as shown in this game, they can be baked straight into the design and still be a fantastic
game that all players can enjoy, whether or not they're colorblind or have other disabilities.
Now, because I can't possibly mention video games without bringing up the ultimate puzzle
game to ever exist, here is the original version of Tetris, designed and programmed in the
USSR in 1985 by Alexei Pajitnov.
He was using an Electronica 60 computer with a monochrome display, so his design needed
to work with visual means other than just colors.
What he ended up designing was Tetris, where various shapes called Tetraminos need to fit
together to clear lines, while more randomly fell from the top of the screen at increasing
speeds.
I'm assuming most people here have at least heard of Tetris by now, if not played it,
for hundreds and hundreds of hours.
The Tetramino blocks in the original version are all made up of simple pairs of square
brackets.
Over the years, colors have been added to these blocks and the game has been modernized
in some ways, but never has color been a major part of the game, which has sold, by the way,
about 520 million copies.
So to wrap things up for my presentation, I'd like to summarize just a few things regarding
the use of color in design.
Of course, color should be used in your design, they just need to be considered and not be
the only thing that conveys content.
When designing your next project, consider how different shapes, patterns, or text labels
can be used alongside colors.
When creating content, remember not to use instructions like "click the green link"
or "the field of the red border" is an error.
For many more examples of this, refer to the article on the TPGI blog titled "Well Color
Us Surprised, This SC Can Be a Tricky Customer" from the great TPGI colleague Ian Lloyd.
Thank you very much, and I'd like to answer any questions that you might have.