Making Accessible Designs

All elements have a contrast ratio of 4.5:1 (7:1 AAA) other than:
Large scale text and images can be 3:1 (4.5:1 AAA).


Purely decorative, logos, or inactive elements that don’t matter, have no contrast ratio requirements.

Designing for color contrast is straightforward in many situations. Contrast checkers take the background color and the foreground color, and give you a ratio. However, there are more complex situations which need special testing methods. The challenges we most often run into are text over images, text over gradients, and moving or dynamic components.

contrast checker example
 

Text over images and gradients share the same main problem. Any automated contrast checker doesn't sample from images or gradients, it will always use the background value. Even when manually checking it can be difficult to determine what point to sample from. Text over images have the added problem of often changing as the client updates content. Text and the images themselves may change with new marketing campaigns, news or events. So even if you manually check contrast, it may be invalidated later by those changes. Dynamic and moving components have the added problem of many states which may have different contrast ratios. This makes it difficult to know or predict where to sample foreground and background colors from.

 

The simplest and most robust solution for text over images is to make sure the text works over a background of the same color. This means white text on a white background should have a passing contrast ratio.

 

text over image example
Text Over Image - Design

 

text over image testing set up
Text Over Image - Testing Set Up With White Background

 

The design will still be accessible in a worst case scenario where you have a 1:1 contrast ratio. This, of course, means you need something between the background and foreground. It can be an overlay, text-shadow, gradient, outline or combination. But, it needs to create enough contrast on a background of the same color.

 

This often applies to dynamic and moving components as well. If you're not sure of the content, or it has many states it is easiest to test for a worst case scenario.    

 

For text over gradients the most comprehensive approach is to test against the most similar value of the gradient. This only applies to areas where the text and gradient line up. Don't check margins and padding where text will never occur. If the gradient is blue to white with blue text, the text should pass against the blue of the gradient. Even if in the current mockup or prototype it doesn't seem like a problem it may become one later. It's hard to predict on every device, resolution and browser exactly where things will line up. Add to that the possibility that the text could be changed and it's easier to be sure the entire gradient and text work together.

 

gradient testing example
Text Over Gradient - Technically this passes, however if the text or width ever change it will fail

 

Often a given component may need some combination of all these testing methods. A slideshow with text over an image with a gradient has all three of the problems discussed. The general idea here is to devise a test that doesn't rely on the content staying static. Test for the worst case rather than the specific scenario presented by the design.

 
http://webaim.org/resources/contrastchecker/
http://gmazzocato.altervista.org/colorwheel/wheel.php