The Web Content Accessibility Guidelines (WCAG) 2.0 contain recommendations from the World Wide Web Consortium (W3C) for making the web more accessible to users with disabilities, including color blindness and other vision deficiencies.
There are three levels of conformance defined in WCAG 2.0, from lowest to highest: A, AA, and AAA. For text and images of text, AA is the minimum level that must be met.
AA compliance requires text and images of text to have a minimum color contrast ratio of 4.5:1. In other words, the lighter color in a pair must have four-and-a-half times as much luminance (an indicator of how bright a color will appear) as the darker color. This contrast ratio is calculated to include people with moderately low vision who don’t need to rely on contrast-enhancing assistive technology, as well as people with color deficiencies. It’s meant to compensate for the loss in contrast sensitivity often experienced by users with 20/40 vision, which is half of normal 20/20 vision.
Level AAA compliance requires a contrast ratio of 7:1, which provides compensation for users with 20/80 vision, or a quarter of normal 20/20 vision. People who have a degree of vision loss more than 20/80 generally require assistive technologies with contrast enhancement and magnification capabilities.
Text that acts as pure decoration, nonessential text that appears in part of a photograph, and images of company logos do not strictly need to adhere to these rules. Nonessential or decorative text is, by definition, not essential to understanding a page’s content. Logos and wordmarks may contain textual elements that are essential to broadcasting the company’s visual identity, but not to conveying important information. If necessary, the logo may be described by using an alt attribute for the benefit of a person using screen-reader software. To learn more, check out accessibility specialist Julie Grundy’s blog post on Simply Accessible, where she goes into the best practices around describing alt attributes.
Text size plays a big role in determining how much contrast is required. Gray text with an RGB value of (150,150,150) on a pure white background passes the AA level of compliance, as long as it’s used in headlines above 18 points. Gray text with an RGB value of (110,110,110) passes the AA level at any text size, and will be AAA compliant if used as a headline above 18 points (Fig 3.1). A font displayed at 14 points may have a different level of legibility compared to another font at 14 points due to the wide diversity of type styles, so keep this in mind, especially when using very thin weights.
Personally, I recommend that all body text be AAA compliant, with larger headlines and less important copy meeting AA compliance as a bare minimum. Keep in mind that these ratios refer to solid-colored text over solid-colored backgrounds, where a single color value can be measured. Overlaying text on a gradient, pattern, or photograph may require a higher contrast value or alternative placement, such as over a solid-colored strip, to provide sufficient legibility.
These compliance ratios are often what folks mean when they claim that achieving accessible design by “ticking off boxes” can only come at the cost of stifled creativity or restricted color choices. But that simply isn’t true. Experimentation with a color-contrast checker proves that many compliance ratios are quite reasonable and easy to achieve—especially if you are aware of the rules from the beginning. It would be much more frustrating to try to shift poor color choices into something compliant later in the design process, after branding colors have already been chosen. If you fight your battles up front, you’ll find you won’t feel restricted at all.
If all this talk of numbers seems confusing, I promise there’ll be no real math involved on your side. You can easily find out if your color pairs pass the test by using a color-contrast checker.
One of my favorite tools is Lea Verou’s Contrast Ratio (Fig 3.2). It gives you the option of entering a color code for a background and a color code for text, and it calculates the ratio for you.
Contrast Ratio supports color names, hex color codes, RGBA values, HSLA values, and even combinations of each. Supporting RGBA and HSLA values means that Verou’s tool supports transparent colors, a handy feature. You can easily share the results of a check by copying and pasting the URL. Additionally, you can modify colors by changing the values in the URL string instead of using the page’s input fields.
Another great tool that has the benefit of simultaneously showing whether a color combination passes both AA and AAA compliance levels is Jonathan Snook’s Colour Contrast Check (Fig 3.3).
At the time of writing, Colour Contrast Check doesn’t support HSL alpha values, but it does display the calculated brightness difference and color difference values, which might interest you if you want a little more information.
If you need help choosing accessible colors from the start, try Color Safe. This web-based tool helps designers experiment with and choose color combinations that are immediately contrast-compliant. Enter a background color as a starting point; then choose a standard font family, font size, font weight, and target WCAG compliance level. Color Safe will return a comprehensive list of suggestions that can be used as accessible text colors (Fig 3.4).
Adjustment tools #section4
When faced with color choices that fail the minimum contrast ratios, consider using something like Tanaguru Contrast Finder to help find appropriate alternatives (Fig 3.5). This incredibly useful tool takes a foreground and background color pair and then presents a range of compliant options comparable to the original colors. It’s important to note that this tool works best when the colors are already close to being compliant but just need a little push—color pairs with drastically low contrast ratios may not return any suggestions at all (Fig 3.6).
There’s more where that came from!#section5
Check out the rest of Color Accessibility Workflows at A Book Apart.
19 Reader Comments
Do the WCAG recommendations also apply when using mobile devices? The rendering and resolution would surely be affected with regard to colour contrast on many handheld devices.
We know text size and spacing is already measured for mobile performance – Google even has its own tool. Perhaps Google will also stamp its foot down to help compliance with colour contrast?
Geri, I think accessibility is a sadly neglected area in web development despite all the good work of the Web Accessibility Initiative; thanks for highlighting this issue. I would like to suggest another tool that I find very helpful – Paletton (http://paletton.com) offers a range of Vision Simulations. The Color Table – Color Combinations feature is also very helpful.
Thank you Geri for the links and tools. Design accesibility is a topic we should all be mindful of and be enforcing. This is very useful.
The correlation between text size and color is fairly evident but is there also any correlation or importance attached to font type?
Great article – thanks for sharing your valuable collection of tools.
However: My biggest problem regarding accessibility is often not the design process itself, but convincing the client from the advantages of it.
A healthy young man without any disabilities is quite often more focused on his own perception of his website rather than anybody else’s.
Quite often I heard something like “Old people are not our target group”…
Has anybody useful thoughts about that?
Great article, it definitely gave me something to think about.
I’ve had great results using demographic surveys and Google analytics to create personas. I write the surveys in HTML and distribute them with Amazon Mechanical Turk.
There is a nice plugin for the Chrome browser called NoCoffee Vision Simulator that allows you to view sites while emulating various vision problems:
To Georg: I try to sell accessibility as a “best practice” and naturally build it in to whatever I am designing/developing. It should be part of your process rather than an add-on or afterthought.
I also bring up the fact that we will all get older and most of us will encounter some difficulties using computers or devices in the future, be they visual impairments or motor/coordination issues.
Making a responsive website is a form of accessibility and I’m sure your client wants to be able to use their site on a phone as well as a desktop.
The purpose is to allow the greatest number of users to be able to access your site, regardless of ability or technology used.
This is a good article and the tool references are great. Thank you. The point that appropriate contrast provides little interference with artistic range is spot on. Good work.
I disagree with your suggestion to use the Level AAA contrast ratio. When WCAG 2.0 was created there was not enough appreciation of the impact of a condition called Photophobia. During our research on the Low Vision Task Force we were able to verify that this condition effects a large group of people with low vision. See, https://www.w3.org/TR/low-vision-needs/#light-sensitivity. This population includes many if not most people with blind spots like macular degeneration.
This makes high contrast a two edged sword. Sufficient contrast is good for almost every person with low vision, but high contrast can produce too much light and cause pain to people with photophobia. I would suggest the 4.5:1 ratio in general.
The ultimate solution would be to enable users to select colors. That doesn’t mean to provide a color picker on each page. All the developer needs to do is not get in the way. The biggest current barrier is sprites used in the background image. This prevents removing the background image and replacing background color with one that can support high contrast for people who need it and moderate contrast for people who experience pain from high contrast.
Great research article. I’ve been looking for a tool like the contrast finder mentioned here.
Great post. Thanks very much for the informaition.
Thanks for writing this! I hadn’t previously known about the tool that Lea Verou built and I love it because it’s so straightforward and simple.
An amazing post about tools. I love the way you explain the color accessibility, contrast checkers & its workflow. Yahoo customer care is always ready to solve your yahoo related problems in just a few minutes. https://yahoocustomerservice.co/yahoo-customer-support/
nice post thank you for sharing .
Ladki patane ke tarike
Great post. thank you for sharing .
Definitely going to take a look into colour safety!
A debt of gratitude is in order for a brilliant offer. Your article has importations your diligent work and experience you have in This field. Splendid understanding.I adore it.
Cheap and Best call girls in Chandigarh
I’m in the same boat with trying to convince the client; they recently asked me, “Is it essential that our website be accessible? Who enforces it?” Sigh. The tips above are helpful; I’ll use those and maybe it will help. We are all getting older.
Also, ALA folks — looks like spam is getting into the comments, see above …
Got something to say?
We have turned off comments, but you can see what folks had to say before we did so.
More from ALA
Personalization Pyramid: A Framework for Designing with User Data
Mobile-First CSS: Is It Time for a Rethink?
Designers, (Re)define Success First
Breaking Out of the Box
How to Sell UX Research with Two Simple Questions