This presentation is going to cover the Web Content
Accessibility Guidelines double A color contrast requirements.
For color contrast to be accessible to people with all
disabilities. The visual presentation of text and images
of text has a contrast ratio of at least 4.5. To one, except for
the following cases, large text. So large scale texts and images
of large scale texts have a contrast ratio of at least three
to one. Incidental text or images of texts that are part of
an inactive user interface components that are pure
decoration that are not visible to anyone, or that are part of a
picture that contains significant other visual content
have no contrast requirements. Additionally, logo types, or
text that is part of a logo or brand name, has no contrast
requirements, the ratios in mcag 2.0 contrast is a measure of the
difference in perceived luminance or brightness between
two colors. This brightness difference is expressed as a
ratio ranging from one to one white on white, or 21, to one
which is black on white. To give a frame of reference on a white
background, we have three examples. We have some red text
that has a ratio of four to one, we have some green text, which
has a ratio of 1.4 to one, and then some blue text that has a
ratio of 8.6 to one. So how exactly are we going to test
color contrast? Well, we recommend that you do this
manually, there is a free tool out there called the color
contrast analyzer that can be downloaded at the link provided
on the screen. That link is www.tpgi.com forward slash color
dash contrast dash checker to quickly test font colors and
backgrounds. So if the colors fail, be sure to change the font
color or the background color. Typically the fastest method is
to change the font to black or white, most Microsoft generated
links will actually fail color contrast. So instead, you could
try using this color instead. This is hashtag 2039 a three. So
let's take a look at using the color contrast analyzer. The
first thing that I'm going to do is open up a document within
Word and let's do some sample text. And let's give them some
different colors. Next, I'm going to launch my color
contrast analyzer tool. And this will allow me to test the
colors. So with this tool, we have both the foreground color
or font color, and the background color. And what I'm
going to do is simply grab this little eyedropper tool, and I'm
going to bring it over to my red text here and click in the right
text. And then I'm going to just verify in my sample preview
window that I am testing the right colors. And it looks like
we are read on a white background. And what we have
here is we have a fail on regular text, and a pass on
large texts for double A standards. So what this means is
that this font color fails for 12 Point and below font. But it
does pass large text. So if this was a heading, it would be
accept let's test another color. Let's test the yellow. Excuse
me, I'm gonna grab the Eyedropper Tool, select the
yellow, and we can easily tell that this fails our color
contrast requirements. Let's try the green use my Eyedropper
Tool, and I'm using the foreground color and it just to
be sure we've got white, we're gonna use the background color
eyedropper tool.
And this green font actually passes both regular text and
large text I wanted to also do a quick run through color and
meaning. So color should not be used as the only visual means of
conveying information indicating an action, prompting a response
or distinguishing a visual element. So here is an example
of color and meaning. In this table of school assignments. The
only indication that an assignment is missing or late is
a background color. This is inaccessible to someone who is
blind and it may be confusing or inaccessible to someone who is
colorblind or overrides page colors is phase one, point 4.3.
Now one way to address this is to add a second column for the
status of the assignment missing complete or late. You can still
use color to reinforce information as long as color is
not the only way this status is presented. In fact, it makes the
information more accessible to users who can see the color
difference. What about charts and bar graphs? I wanted to give
you an accessible example first, this is a bar chart, which
represents the amount of students serves this graph
represents alternate media for 2022. And it shows the amount of
students served and the number of book requests for free
previous semesters now, what makes this bar graph accessible
is that we have labels, we have the numbers. With each of the
data points, we're using patterns on our bars. And we're
not relying on color and meaning specifically, we also have a
data table if needed. And then finally, we want to ensure that
alternate text is added to our chart. So this is an accessible
example of using a bar graph. Here's another one for pie
charts and data tables. In this example, I have a pie chart that
represents first, second, third and fourth quarter. We have all
of our labels, and each of the pie slices has a different
pattern. Additionally, we have a data table with all of our data
presented in a easy to consume method. You just learned about
the web content accessibility guideline color contrast
requirements. Thank you for watching.