What is Colour Contrast?
Colour contrast is the difference in brightness between the foreground (text, icons) and the background. Good contrast ensures content is readable for everyone, especially users with visual impairments or color blindness.
Why Does it Matter?
Poor contrast can make text difficult or impossible to read, affecting millions of users worldwide. Ensuring good contrast helps everyone access your content clearly and comfortably.
Simple Rules to Follow
- Use Dark on Light or Light on Dark: Choose colors that stand out clearly from each other.
- Check Contrast Easily: Use free tools like WebAIM’s Contrast Checker.
- Keep it Simple: If in doubt, classic black-on-white or white-on-black combinations always work well.
Quick Tip
Aim for a contrast ratio of at least 4.5:1 for regular-sized text and 3:1 for larger text to meet basic accessibility guidelines (WCAG 2.1 AA).
Example:
- ✅ Good Contrast: Black text on a white background.
- ❌ Poor Contrast: Light grey text on a white background.
Action Item
Check your website now—does your text stand out enough?