WCAG Color Contrast Guidelines

The Web Content Accessibility Guidelines (WCAG) are a set of universal guidelines created to help improve online web accessibility. WCAG is used internationally and should be understood by all web developers. WCAG has specific accessibility guidelines for color contrast on web pages. Color contrast refers to the contrast of color between the background and foreground content on a webpage. 

If you are a developer concerned with creating accessible online content, it is essential for you to understand these guidelines. WCAG guidelines outline several success criteria for achieving quality color contrast on web pages. Understanding and referencing these specific guidelines is a great way to improve both web accessibility and user experience on your websites. 

To check the contrast ratio of two colors using the Web Content Accessibility Guidelines (WCAG) 2.0 standards, you can use the following code snippet:
 
const checkContrast = (color1, color2) => {
  const c1 = color1.replace('#', '');
  const c2 = color2.replace('#', '');
  const r1 = parseInt(c1.substr(0, 2), 16);
  const g1 = parseInt(c1.substr(2, 2), 16);
  const b1 = parseInt(c1.substr(4, 2), 16);
  const r2 = parseInt(c2.substr(0, 2), 16);
  const g2 = parseInt(c2.substr(2, 2), 16);
  const b2 = parseInt(c2.substr(4, 2), 16);
  const l1 = 0.2126 * r1 + 0.7152 * g1 + 0.0722 * b1;
  const l2 = 0.2126 * r2 + 0.7152 * g2 + 0.0722 * b2;
  const contrast = l1 > l2 ? (l1 + 0.05) / (l2 + 0.05) : (l2 + 0.05) / (l1 + 0.05);

  return contrast;
}

The Importance of Color Contrast For WCAG Compliance

There are several reasons why having color contrast that is WCAG compliant on your website is important. Having quality color contrast will improve the user experience for every user that visits your website. However, compliant color contrast will have a profound benefit to users with disabilities and impairments. Users with certain types of color blindness or similar conditions often experience low contrast in their vision. This can make seeing content on web pages challenging, especially when content has poor color contrast. 

Differentiating colors can be more difficult for users with visual impairments. This includes online features such as edges and borders. This is why it is important for developers to ensure their websites include high-quality color contrast. Website designs and content that fail to meet the minimum color contrast requirements provided by WCAG must be avoided. Content that falls below this threshold will likely be unviewable for many users and creates an inaccessible online environment. 

Good Contrast

Color contrast describes the perceived difference in brightness between two colors. In order to measure the contrast between two colors, the difference in brightness is expressed as a ratio. The ratio of two colors can range from 1:1 to 21:1. A ratio of 1:1 would be used the describe the same color twice, while 21:1 would describe opposite colors (such as black and white). There are multiple success criteria for contrast described in WCAG guidelines. 

The first is the minimum contrast ratio. The level AA minimum contrast requirement is a contrast ratio of at least 4.5:1. There are several exceptions to this rule, including large text and company logos. However, it is always best to seek a ratio of at least 4.5:1. It is also important to note that this is a minimum requirement under WCAG guidelines. Text with a 4.5:1 ratio will often still be challenging to read for many users. 

The level AAA success criterion is known as enhanced contrast. This follows the same structure as the level AA success criterion but instead requires a more strict 7:1 ratio for normal text and 4.5:1 for large text. This higher level of contrast is recommended by the WCAG, but still higher than the minimum requirement.  

Bad Contrast

Bad contrast could be used to describe any text or website feature that falls below the 4.5:1 ratio threshold outlined by the WCAG level AA success criterion. Not only would this content fail to meet the minimum requirements outlined in the WCAG, but it would also be inaccessible to most users. By understanding the WCAG guidelines, developers can avoid bad color contrast fairly easily.