Text must meet WCAG AA contrast ratio: 4.5:1 for normal text, 3:1 for large text. Low-contrast text is unreadable for users with low vision, color blindness, or anyone using a screen in bright sunlight — affecting up to 8% of male users (color blindness alone).
Low-contrast text is unreadable for users with low vision (285 million people worldwide), color blindness (8% of men, 0.5% of women), and anyone using a screen in bright ambient light. Failing WCAG AA contrast requirements also creates legal liability under ADA and European Accessibility Act compliance.
BeforeMerge scans your pull requests against this rule and 3+ others. Get actionable feedback before code ships.
Color contrast is the ratio between the luminance of foreground text and its background. When contrast is too low, text becomes difficult or impossible to read for users with low vision, color blindness, cataracts, or anyone in challenging viewing conditions (bright sunlight, glare, cheap monitors).
WCAG defines two levels: AA (minimum) requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). AAA (enhanced) requires 7:1 and 4.5:1 respectively. Most legal requirements reference AA as the baseline.
This is not a niche concern. Color vision deficiency alone affects approximately 300 million people worldwide. Add low vision, aging eyes, and environmental factors, and you are excluding a significant portion of your user base with every low-contrast design choice.
All text must meet WCAG AA contrast ratios: 4.5:1 for normal text (under 18px bold or 24px regular) and 3:1 for large text. This applies to text on backgrounds, placeholder text, disabled states, and text on images.
/* Light gray text on white background — contrast ratio ~1.5:1 */
.subtitle {
color: #aaaaaa;
background: #ffffff;
}
/* Placeholder text barely visible — contrast ratio ~2:1 */
input::placeholder {
color: #cccccc;
}
/* Trendy but unreadable — light blue on white ~1.9:1 */
.link {
color: #87ceeb;
}/* Dark gray on white — contrast ratio ~7.5:1 */
.subtitle {
color: #595959;
background: #ffffff;
}
/* Placeholder meets 4.5:1 — contrast ratio ~4.6:1 */
input::placeholder {
color: #767676;
}
/* Accessible link color on white — contrast ratio ~4.5:1 */
.link {
color: #0969da;
}Use automated tools to audit contrast:
For Tailwind projects, check that you are using color tokens from the palette rather than arbitrary values.