Color Contrast

Problem

Users with low vision or color blindness can’t read text against backgrounds with insufficient contrast. Light gray text on white backgrounds, or subtle color variations become invisible to many users, making content inaccessible regardless of how well-written it is.

Solution

Test color combinations against WCAG standards, aiming for at least 4.5:1 contrast ratio for normal text and 3:1 for large text. Use contrast checking tools during design and automate validation in your build process to prevent violations from shipping.

Example

This example compares accessible and inaccessible color contrast ratios for text and backgrounds.

/* Good: Dark text on white background provides 7:1 contrast ratio */
.text {
  color: #1a1a1a;       /* Nearly black text */
  background: #ffffff;  /* White background */
}

/* Bad: Light gray on white has only 2.5:1 contrast - fails WCAG AA standards */
.low-contrast {
  color: #999999;       /* Light gray text - hard to read */
  background: #ffffff;  /* White background */
}

Benefits

• Makes text readable for users with low vision or color blindness.
• Required for WCAG compliance and reduces legal accessibility risks.
• Improves readability for all users in various lighting conditions.
• Can be automatically validated with tools during development.
• Benefits users on low-quality displays or in bright sunlight.

Tradeoffs

• May limit color palette choices and design aesthetic options.
• Can conflict with brand guidelines that use low-contrast colors.
• Requires testing and validation throughout the design process.
• Large text requirements differ from normal text, adding complexity.
• Some design trends favor subtle, low-contrast aesthetics that fail standards.