Tips and Tools for Creating Accessible Color Schemes

Jennifer Dillon and Heather Wozniak
Disabilities and Computing Program, UCLA Office of Information Technology
Originally presented to UCLA Campus Web Publishers on April 19, 2011

Presentation Slides in PDF

Choosing accessible colors for your website’s text is important.  The readability of your site affects all users, not just those with vision impairments. It’s a basic usability issue.  The only people for whom the color choices don’t matter are those using screen readers.

Some of your site visitors may have more specialized visual requirements than others.  People with low vision make up an increasing proportion of the computer using population.  As we age, the acuity of our vision often decreases, and we don’t even think of it as a disability.  Studies estimate that about 17% of people over 45 have low vision.  There are also people who are colorblind (about 8% of the population), use computers intensively throughout the day, and browse the web on mobile devices.  These people should be able to read and understand your content without having to strain their eyes.

The Web Content Accessibility Guidelines (WCAG) 2.0, drafted by the World Wide Web Consortium (W3C), provide recommended standards for contrast between foreground and background colors: between your text and the background behind it.  Complying with these standards will ensure that your content is easily readable by virtually all users.

The minimum recommended contrast ratio is 4.5:1.  This will meet the WCAG “AA” level of compliance.  The enhanced contrast ratio is 7:1.  This will meet the WCAG “AAA” level of compliance.  In studies, the 4.5:1 ratio was found to be readable by people with mild to moderate vision impairments.  The 7:1 ratio was found to be readable by people with more severe loss of vision or color contrast sensitivity, up to 20/80 vision.  People with vision loss beyond that typically use adaptive software to enlarge the text or enhance the contrast.  So the 7:1 ratio should target all users whose vision doesn’t require adaptive techniques.

The guidelines also state that you should not rely on color alone to convey important information or prompt an action.  There should be another indicator (such as icons to accompany color coding, or an underline on linked text) so that people who cannot easily distinguish colors will be able to understand and use your content.

There are a few exceptions to the contrast guidelines.  Text that is extremely large, such as a headline or banner, can have a lower contrast ratio of 3:1.  Text that is “incidental,” meaning it is used as decoration or is part of a picture but is not the main content, does not need to meet these requirements.  And logotype–text that appears in a logo or brand name–does not need to meet them either.  However, if you want your logo to be easily distinguishable and readable, it ought to meet the minimum ratio.

To learn how you can choose high contrast color combinations for your designs, it is important to understand the difference between color value and hue.  The hue is the “color” of a color–red, orange, green, blue, etc.  The value is the relative lightness or darkness of a color.  When we talk about contrast ratio we are referring to the difference in value, not hue.

Color blocks illustrating the concept of "hue"Color blocks illustrating the concept of "value"

Pairing different hues does not necessarily create sufficient color contrast.  When you strip out the color information and compare the values, there may not be much difference.  Pairing different values creates contrast.

Color blocks illustrating the pairing of green and red hues

Color blocks illustrating lack of contrast between red and green when converted to grayscale.  The ratio is 1.37:1

Color blocks illustrating different values of red and greenColor blocks illustrating the increase in contrast when different values of red and green are used.The UCLA graphic identity colors can be tricky to work with.  Pairing UCLA Blue (#536895) with white results in a ratio of 5.55:1.  It meets the minimum standard but not the enhanced.  Pairing UCLA Gold (#FFB300) with white yields a ratio of 1.79:1–it’s almost completely unreadable.  And pairing UCLA Blue with UCLA Gold results in a contrast ratio of 3.09:1–a little more readable, but still not complying with the minimum recommended standard.

Color blocks illustrating commonly used UCLA pairs and their lack of contrast.So how can you achieve the recommended standards but still comply with the UCLA graphic identity?  Utilize different values of the UCLA graphic identity colors.  This will allow you to choose accessible color combinations for your text that complement the UCLA brand.    Reserve UCLA gold for non-text elements like bullets, arrows, and borders, since it is hard to make it readable unless you are contrasting it with black.

Color blocks illustrating different values of UCLA graphic identity colors.You should also be cautious about using text on top of images.  Be sure to sample some of the color of the background image and compare it to the text to determine the contrast ratio.  When using transparent overlays, make the background image opaque enough for the text to stand out.

Carefully consider the colors you use for links, in their normal and in their active (hover/focus) states.  Links should be a different color from the main text, but they should also meet the contrast guidelines, which may make them appear similar to the main text.   Underline links to distinguish them from the main text.  This will also help you meet the WCAG guideline which states that color should not be the only indicator of possible action.

The UCLA Mobile Web Framework documentation and collaboration site (mwf.ucla.edu) is an example of a high contrast, UCLA-branded site.

There are several tools that can help you check the contrast ratio of your colors and find higher contrast colors to work with:

If you have further questions about this topic, or would like to request a web accessibility and usability evaluation, please contact the Disabilities and Computing Program staff at dcp@oit.ucla.edu.  We provide accessibility evaluations and consulting to UCLA departments and groups free of charge.

Comments are closed.