Rule 1.4.3

Hi All, 

A good conversation during the workshop today. 

When reviewing Emma's work on the tests for 1.4.3 Contrast Minimum, we 
discussed briefly about testing background gradients and images. Charu and 
I wrote an internal newsletter article to assist our testers with testing 
contrast when background gradients and images are used. Let me share with 
you some excerpts from the guidance we gave to our testers. Charu and I 
are discussing re-writing and publishing to an external blog post.
If the foreground text (or images of text) or background vary in relative 
luminance due to colors, patterns, gradients or images, then the contrast 
ratio between the text (or images of text) and the background behind the 
text must maintain a contrast ratio of at least:
4.5:1 for plain text less than 18 pt and bold text less than 14 pt. 
3:1 for plain text 18 pt or greater and bold text 14 pt or greater.
In short, the contrast ratio must be maintained and tested with foreground 
text (or images of text) and the background directly behind the text (or 
images of text).

It is best to avoid text on background images or color gradient in your 
content. If that is not avoidable, you must follow the guidance to 
manually check the color contrast using the Colour Contrast Analyser tool 
by testing both the solid foreground text against the lightest background 
color that it touches and against the darkest part of the background that 
it touches. Both color combinations would have to pass for the text size 
used/tested to meet the color contrast requirements. 

The following example shows, in several figures, testing of solid white 
foreground text on a background with a color gradient as shown in Figure 
13. To accurately conclude if the color contrast ratio of the solid white 
text with varying yellow to red gradient meets contrast requirements, you 
should check the contrast ratio of the white text with the prominent 
pixels of both the lightest part of the gradient as well as the darkest 
part of the gradient. 

The following example describes how to accurately determine if text on a 
background image passes or fails the contrast minimum requirements.  
Figure 4 shows black text over a background image with various colors. On 
testing individual prominent pixels from the background image we see 
varying results. Listed below are the steps on how to perform the test. 
For text over a background image:
Press F11 or use the pen in the tool to pick the most prominent pixel of 
the foreground text where the text intersects the background image.
Press F12 or use the pen to select the most prominent pixel of the 
background image.

For example, in Figure 9, when you compare the prominent pixels of the 
black text where it intersects the dark pink background image with the 
dark pink background pixels, the tool shows that the contrast ratios fails 
both WCAG 2.0 level AA and Level AAA for normal text, it also fails level 
AAA for large text but passes level AA for large text as shown in Figure 
10. 

When you compare the black foreground color with the light pink background 
pixels in the image, you will get different results. The tool shows that 
the contrast ratios pass WCAG 2.0 level AA for both normal and large text 
as well as level AAA for large text. However, it fails for WCAG 2.0 level 
AAA  for normal text as shown in Figure 11.

Conclusion: Even though results show that some combinations pass, the 
black text over the background image fails overall. The test should pass 
for all combinations to meet the contrast minimum requirements of CI 162 
checkpoint 1.4.3. 

Regards, 
Moe

Maureen Kraft
Transformation Lead, IBM Accessibility 
Littleton, MA / tel: 978-899-3114 
Search for accessibility answers 

… to know even one life has breathed easier because you have lived. This 
is to have succeeded. ~Ralph Waldo Emerson