Color Contrast: A Brief Introduction 

KATIE ALLEN: Welcome to our accessibility video "Color Contrast, 
A Brief Introduction." My name is Katie Allen, and I'm a program 
associate from the Vera Institute of Justice. If we don't use 
accessible color contrast in our materials, many survivors with 
disabilities will not be able to access our services. So in this 
video, I will share the importance of color contrast in creating 
accessible materials for reaching survivors with disabilities, some 
Web Content Accessibility Guidelines for color contrast, and some 
tools for checking the accessibility of your color contrast. 

So what is color contrast, and why does it matter for 
accessibility? Using color in presentations and documents can 
help make them more interesting and visually appealing. Color 
can convey and reflect cultural meaning and also agency 
branding. But what matters for accessible color contrast is the 
combination of foreground and background colors together. 

Color contrast is the difference between colors that are used 
together. So I have some examples on this slide. The first 
example shows colors that are very different from each other, 
dark blue text and yellow background. The second example 
shows colors that are very similar to each other, orange text on 
yellow background. 


The blue and yellow together have high color contrast. The more 
different colors are from each other, the higher their m and the 
more accessible their contrast is. The more similar colors are to 
each other, the lower their contrast and the less accessible their 
contrast is. So there are different ways that survivors see color in 
our materials. But who decides what accessible color contrast is? 

Section 508 of the Rehabilitation Act says that people with 
disabilities should have equal access to electronic and web-based 
information. The Web Content Accessibility Guidelines, or WCAGs 
are international accessibility guidelines that publish compliance 
standards for Section 508. So we want all of our electronic and 
web-based materials to meet the WCAG accessibility guidelines. 
And the WCAGs have criteria for color contrast accessibility. 

So here are the Web Content Accessibility Guidelines, the AA 
criteria for color contrast. For regular-sized text, the color of the 
text and the color of the background should have a contrast, ratio 
of at least 4.5 to 1. And I'll show you what that looks like in a 
moment. For large text and for images, the contrast ratio should 
be 3 to 1 with the background. 

So how do you know if the colors you want to use have accessible 
color contrast? Next, I'll demonstrate how to find out if two colors 
are accessible together using the WebAIM color contrast checker 
tool. So first, you want to find a color's Hex number. A Hex 
number is the combination of digits and letters assigned to each 


color based on its blend of red, green, and blue hues. You can 
use Hex numbers to determine if two colors have high enough 
contrast with each other. You can find a color's Hex number in 
Microsoft Office. And I'll use PowerPoint to demonstrate how to 
find a Hex number for purple. 

So first you would highlight the text. And I'm highlighting text 
that's purple that says, "I am purple." Then you go to the Font 
Color menu and click the dropdown arrow next to it. The color 
purple in this menu is highlighted. Then select the option More 
Colors. 

When you select More Colors, a color box appears. You want to 
select the second tab that shows RGB Sliders, which we have 
selected here. The color purple that we chose is Hex color number 
2730A0. 

Once you know your Hex number, you can use the WebAIM Color 
Contrast Checker Tool to determine if the colors you are using 
have accessible contrast with each other. So you can copy the 
Hex number 2730A0 from the Colors box in PowerPoint and paste 
it into the WebAIM Color Contrast Checker Tool. And we'll do that 
now. 

So you want to place the Hex number into the foreground color 
box in the tool. The background color box in this example is white 
so you can leave that as Hex number for white, which is FFFFFF. 


So when you add the Hex numbers to the foreground and 
background color boxes in the tool and hit Enter on your 
keyboard, it will generate the color contrast ratio. 

So the color contrast of our purple color and white is 10.41 to 1 
which is very accessible. These results tell you whether the color 
contrast meets the Web Content Accessibility Guidelines 
standards for normal text, large text, and graphical objects, 
which are images. The contrast ratio of our purple color, 2730A0, 
and white, FFFFFF, passed both AA and AAA Web Content 
Accessibility Guidelines. 

So now I'll show an example of inaccessible color contrast. What 
happens if we change the background color slightly from white to 
gray? You can use the color slider to change the background color 
from white to gray, or you can type it here. We're going to type 
the Hex number for gray, which is 828282. 

So the color contrast changes. The color contrast between 
2730A0 and gray, 828282, are not accessible. They failed both 
the AA and AAA standards. The contrast ratio now is 2.7 to 1, 
which is too low. So remember, the higher the contrast ratio is 
the higher the color contrast and the more accessible the color 
contrast is. So in our example, the purple and white color 
contrast ratio, which was 10.41 to 1, is much higher than the 
gray and purple color contrast ratio, which was 2.7 to 1. 


I'll wrap up the video by showing you the Microsoft Office 
Accessibility Checker Tool. You can use this tool in Microsoft 
Word, PowerPoint, and Outlook, and it can help you identify a 
variety of accessibility issues in your document. But it's not a 
comprehensive tool. It won't identify all of the access issues. 

The Microsoft Office Accessibility Checker Tool can let you know 
whether you had low color contrast in your document. And you 
can find the Accessibility Checker in the Tools menu under Check 
Accessibility. And I'll show you this now in PowerPoint. So we'll go 
to Tools, Check Accessibility. 

The results appear in a sidebar window of your document, 
message, or presentation. These results tell us that we have 
hard-to-read contrast in our presentation. They also tell us where 
the color contrast issue is on slide two. And it also tells you why 
you should fix the issue. 

So if you click on the location, slide two, it takes you to where the 
color contrast issue is and tells you why you should fix it. It says, 
"Text becomes difficult to read when its color is too similar to the 
color behind it. Increasing contrast makes text easier to read, 
especially when viewing documents in bright light." 

So to recap, color is not inherently inaccessible, but we can 
choose to use color accessibly or inaccessibly. High color contrast 
is more accessible than low color contrast. You can find Hex 


numbers in Microsoft Office and other programs. You can use Hex 
numbers and the WebAIM Color Contrast Checker Tool to 
determine color contrast. You can use the Microsoft Office 
Accessibility Checker Tool to find inaccessible color contrast in 
your document. And you can reference the Web Content 
Accessibility Guidelines to learn more about how to use color 
accessibly. 

Thank you for watching. You can find out more on our website at 
www.endabusepwd.org. This video on color contrast is part of a 
Disability and Deaf Resource Center series of how-to videos to 
help your agency increase accessibility of services, outreach, and 
programs to reach survivors with disabilities. This how-to video 
series includes videos about how to improve accessibility of 
outreach, educational, training, and intake materials. We also 
have videos about general accessibility guidelines to help ground 
this work. 

The Vera Institute of Justice Center on Victimization and Safety 
created this video series with a grant from the Office of Violence 
Against Women at the Department of Justice. The Center on 
Victimization and Safety at the Vera Institute of Justice works to 
ensure that victims services effectively identify, reach, and meet 
the needs of marginalized crime survivors. 

We work with survivors to build and strengthen the capacity of 
communities, organizations, and providers to respond effectively 


to and prevent sexual violence, domestic violence, and other 
forms of abuse against people with disabilities and D/deaf people. 
Ending abuse of people with disabilities is a team effort, so please 
contact us for support. The End Abuse email address 
cvs@vera.org. The End Abuse phone number is 212-376-3096. 
The End Abuse toll free phone number is 855-274-8222.