Skip to main content

Set accessible text contrast ratios using CSS

Medium
accessibilityCSS

What​

This practice activates when text elements in a web page do not meet the WCAG contrast ratio requirements. It is recognized when colors for text and background do not provide at least a 4.5:1 ratio for normal text or at least a 3:1 ratio for larger or bold text.

Why​

Ensuring sufficient contrast is critical for users with visual impairments to comfortably read the webpage content. Low contrast can result in unreadable text and creates accessibility issues, which can lead to non-compliance with legal standards.

Fix​

Adjust CSS color values for text and background to comply with WCAG guidelines. Review text elements and increase the color contrast ratio by selecting darker text colors or lighter background colors as needed.

Examples​

Example 1:​

Positive​

The example uses color combinations that meet or exceed the WCAG contrast ratios for both normal and large text.

body {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

p {
  color: #222222;
  background-color: #F5F5F5;
  padding: 10px;
  font-size: 18px; /* Considered large text so a 3:1 ratio could suffice */
}

Negative​

The color choices in this example result in insufficient contrast, making the text difficult to read.

body {
  color: #CCCCCC;
  background-color: #FFFFFF;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

p {
  color: #BBBBBB;
  background-color: #FFFFFF;
  padding: 10px;
  font-size: 16px;
}