Fixing Color Contrast Issues

Contrast Ratio Requirements

• Normal text: Minimum 4.5:1 (AA)
• Large text (18pt+): Minimum 3:1 (AA)
• UI components: Minimum 3:1

Common Problem Areas

• Light gray text on white backgrounds
• Placeholder text in form fields
• Links that blend with body text
• Buttons with low-contrast text
• Text on images without solid backgrounds

How to Fix

1. Click on a contrast issue in AccessCheck to see the failing colors and ratios
2. Choose new colors by darkening text or lightening background
3. Update your CSS

Before: .text-muted { color: #999999; } (Only 2.85:1)

After: .text-muted { color: #767676; } (4.54:1)

Tips

Design with accessibility first, use contrast checker plugins, and test in grayscale.

Updated on: 28/01/2026