Contrast

Contrast measures the difference in brightness between two colors, expressed as a ratio from 1:1 to 21:1. In web accessibility, WCAG requires a minimum ratio of 4.5:1 for regular text and 3:1 for large text and interface components. Insufficient contrast is the most widespread accessibility error on the web.

For seven years, the WebAIM Million has ranked low contrast text at the top of accessibility errors detected on a million homepages. Seven reports, the same result. And most of the time, developers don't notice it to the naked eye.

#What ratios should you follow?

WCAG criterion 1.4.3 (level AA) sets two thresholds:

• Regular text: minimum ratio of 4.5:1
• Large text (≥ 24 px, or ≥ 18.5 px bold): minimum ratio of 3:1 minimum

The AAA level raises the bar: 7:1 for regular text, 4.5:1 for large text.

Since WCAG 2.1, criterion 1.4.11 extends the requirement to interface components (field borders, buttons, icons) and graphical objects that carry information: 3:1 minimum.

/* Field border: compliant */
input {
  border: 1px solid #767676; /* 4.54:1 on white background */
}
 
/* Border too light: non-compliant */
input {
  border: 1px solid #e5e5e5; /* well below 3:1 */
}

#The trap of "readable" gray

The gray #999999 on a white background gives a ratio of 2.85:1. Your eye reads it effortlessly. A verification tool rejects it. This gap between personal perception and regulatory threshold is the main cause of contrast errors.

Form placeholder fields are a typical case: the default help text in most browsers is too light to pass the AA test. If your placeholder conveys useful information, its contrast counts.

Another blind spot: dark mode. Colors that are compliant on a white background can fail on a dark background. Check each theme separately.

#How to verify

The ratio is calculated from the relative luminance of the two colors. No need to do it by hand: the WebAIM Contrast Checker or Chrome's inspector (click on a color in the Styles panel) displays the ratio in real time.

#In summary

Aim for 4.5:1 for text, 3:1 for interface components. Don't rely on your screen: test with a tool. And don't forget placeholders, borders, and dark mode.