Tools and info to get your website accessible and WCAG Compliant: [ Ссылка ]
Unlock the WCAG walkthroughs for level AA compliance, get accessibility web development training, and additional tools training in the Accessibility Academy: [ Ссылка ]
Are you a digital agency? Join our Partner Agency Program! [ Ссылка ]
Online ADA
Advancing Digital Accessibility
Transcription Below:
Hi guys. Josh with Online ADA here once again and
today we're covering article 1.4.1,
the use of color.
This is a level A requirement.
Let's jump right into the description.
Color is not used as the only visual means of
conveying information.
Indicating an action,
prompting response, or distinguishing a visual
element.
There's a note to this one.
This success criterian addresses color perceptions
specifically.
Other forms of perception are covered in
guideline 1.3, including programmatic
access to color
and other visual presentation coding.
Now, there is always gonna be some overlap between the
articles of the WCAG accessibility guidelines.
And,
this one was
a
very niche use case. They're trying to
specifically help out folks who have
color blind disabilities
and
this overlaps with
the sensory characteristics article that we also
covered
in a previous video.
The big takeaway here is that you don't wanna use
just color to indicate
information, or to convey information.
A really good example of this is using a bar
chart
to convey information that might be complex, or
simple, it doesn't really matter, but you have these
different bars that have different levels and
they're typically only coated
with different colors. But in this article
it's saying that it's important to use something
like a pattern as well as the color,
because someone who is color blind may not be
able to distinguish the difference between
these bars.
And it's also a good idea to use something like a
legend and all of your tables to properly
associate the pattern and the color
with the information in the,
or in the bar chart.
Another use case for this is gonna be something
like a progress bar,
where,
maybe you have a color, a green bar that's going
across
and then you have the different steps
lined up.
And rather than just using green
bar,
the green bar, to go across, you will also have
something like a dashed arrow. Like a black arrow
or something in there that's
conveying the same information
but not just using color.
That's gonna go a long ways towards providing the
same information
to users who can't distinguish that color.
This would
probably be more effective if you had green and
red, like two colors that means different things
in the same circumstance. So
maybe a green bar indicating progress, red meaning
you haven't gotten there yet, or black, or
something.
The arrow is doubly effective in that case,
because now you can see exactly what the progress
is as opposed to wondering which one is which.
So,
as always, when you are
using color to convey information, it's always a
good idea to use text
cues whenever you can, especially if you have a
button,
you need to have some sort of text label for it.
Whether it's a green button for submit or red for
cancel.
They need to have the relevant text cues as well.
And
especially something like a progress bar or a bar
chart, it should also be described in text.
That's also covered in this article.
Ensuring that information
conveyed by color differences is also available
in text.
And that's the understanding 1.4.1,
article G 14.
There's lots of good information in the WCAG
quick reference guide.
It outlines all sorts of
examples of where code is not meeting compliance
and a lot of good examples of different use cases
for these articles as well. So there's lots of
good information there.
I encourage you to check it out
It's the W3C
WCAG
guideline quick ref.
Thanks for joining me in this article and I will
see you in the next one.
![](https://s2.save4k.ru/pic/g1zj4wDSMD0/maxresdefault.jpg)