Ensure Enhanced Color Contrast for Text

Disabilities Affected: Visual

Success Criterion: 1.4.6

Level: AAA

This guideline requires a higher level of contrast between text and its background than the Level AA requirement (1.4.3). The contrast ratio must be at least 7:1 for normal text and 4.5:1 for large text (18pt or 14pt bold).

Why It Matters

While Level AA contrast (4.5:1 / 3:1) accommodates many users with low vision, some users require even higher contrast for comfortable reading. Meeting Level AAA ensures readability for a wider range of visual impairments.

Fixing the Issue

Use a contrast checking tool to ensure your foreground text and background color combinations meet the 7:1 ratio for normal text and 4.5:1 for large text. This often means using very dark text on a very light background or vice versa. Avoid combinations like medium gray on light gray, or light colors on white. Consider providing a high-contrast mode or theme switcher for users who need it, especially if the default design cannot meet AAA contrast for aesthetic reasons.

Good Code Example

CSS demonstrating color combinations meeting AAA contrast:

Markup

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

.aaa-normal-dark-bg {
   /* White (#FFFFFF) on dark gray (#333333) has ~11.9:1 contrast */
   color: #FFFFFF;
   background-color: #333333;
   font-size: 16px;
}

/* Example for large text (needs 4.5:1) */
.aaa-large-text {
  /* Dark gray (#555555) on white (#FFFFFF) has ~5.9:1 contrast */
  /* This passes for AAA large text (and AA normal text) */
  color: #555555;
  background-color: #FFFFFF;
  font-size: 18pt; /* Large text */
}

Bad Code Example

Color combinations that meet AA but fail AAA contrast:

Markup

/* Meets AA for normal text (4.7:1) but fails AAA (needs 7:1) */
.fail-aaa-normal {
  color: #555555; /* Dark Gray */
  background-color: #EEEEEE; /* Light Gray */
  font-size: 16px;
}

/* Meets AA for large text (3:1) but fails AAA (needs 4.5:1) */
.fail-aaa-large {
   color: #FF0000; /* Red */
   background-color: #FFFFFF; /* White */
   font-size: 24px; /* Large text */
   font-weight: bold;
}

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

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

Schedule Consult