Page tree
Skip to end of metadata
Go to start of metadata

Description

When using Compliance Deputy, you may notice some false positive when it comes to background color contrast ratios.  While it is always good to check each color contrast ratio error that is flagged, some may be caused by the CSS Background property short hand version.

 

Checkpoint:

Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text. (WCAG 2.0)

 

Message:

Content has invalid contrast ratio color=#333 background=#fff url(http://www.csulb.edu/misc/depot/assets/UT/bk_lightgray_gradient.gif) repeat-x;

Color Contrast Ratio Tool

WebAIM Color Contrast Checker


Fix

To fix this issue, remove the background color from the short hand version and add it as a separate background-color property.

 

Short hand background color:

#contain_content
{
      background: #fff url(http://www.csulb.edu/misc/depot/assets/UT/bk_lightgray_gradient.gif) repeat-x;
      /* background-color: #fff; */
      color:#333;
}
 

Fix - separate background color property:

#contain_content
{
      background: url(http://www.csulb.edu/misc/depot/assets/UT/bk_lightgray_gradient.gif) repeat-x;
      background-color: #fff; 
      color: #333;     
}
  • No labels