Ensure Sufficient Color Contrast for Text and UI Components (Minimum)

Disabilities Affected: Visual

Success Criterion: 1.4.3

Level: AA

This guideline requires sufficient contrast between text color and its background color. The minimum contrast ratio should be 4.5:1 for normal-sized text and 3:1 for large text (18pt or 14pt bold) and graphical objects/UI components.

Why It Matters

People with low vision or color blindness may struggle to read text or identify interface components if the contrast between the foreground and background is too low. Sufficient contrast ensures readability for a wider range of users, including those viewing screens in bright environments.

Fixing the Issue

Use online contrast checking tools to verify that your color combinations meet the minimum requirements. Adjust text or background colors as needed. Ensure that text placed over images or gradients has sufficient contrast across its entire area, potentially by adding a solid background behind the text or using text shadows/outlines carefully. Remember that focus indicators, borders on inputs, and icons also need sufficient contrast against their adjacent background. Logos and decorative elements are generally exempt.

Good Code Example

This CSS demonstrates text and background colors with sufficient contrast:

Markup

/* Example for normal text (needs 4.5:1) */
.normal-text {
  /* Black text (#000000) on white background (#FFFFFF) has 21:1 contrast */
  color: #000000;
  background-color: #FFFFFF;
  font-size: 16px; /* Assuming this is normal size */
}

.normal-text-dark-bg {
   /* White text (#FFFFFF) on dark blue (#000080) has ~10.8:1 contrast */
   color: #FFFFFF;
   background-color: #000080; /* Dark Blue */
   font-size: 16px;
}

/* Example for large text (needs 3:1) */
.large-text-heading {
  /* Dark gray (#555555) on light gray (#EEEEEE) has ~4.7:1 contrast */
  /* This passes for large text, and also for normal text */
  color: #555555;
  background-color: #EEEEEE;
  font-size: 24px; /* Qualifies as large text */
  font-weight: bold;
}

Bad Code Example

This CSS shows color combinations with insufficient contrast:

Markup

/* Insufficient contrast for normal text (needs 4.5:1) */
.low-contrast-normal {
  /* Light gray text (#AAAAAA) on white background (#FFFFFF) has ~1.7:1 contrast */
  color: #AAAAAA;
  background-color: #FFFFFF;
  font-size: 16px;
}

/* Insufficient contrast for large text (needs 3:1) */
.low-contrast-large {
  /* Orange text (#FFA500) on white background (#FFFFFF) has ~2.9:1 contrast */
  /* Fails even for large text */
  color: #FFA500; /* Orange */
  background-color: #FFFFFF;
  font-size: 18pt; /* Qualifies as large text */
}

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A practical guide for healthcare leaders navigating WCAG compliance.

Learn More

Need help with digital accessibility?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult