When designing websites, apps, presentations, documents, or any type of visual content, choosing the right color combinations is crucial for readability and accessibility. Using colors that don’t have enough contrast can make text difficult or impossible to read, especially for people with visual impairments. One particularly problematic color combination is blue text on a red background.
The Science Behind Why Blue on Red is Hard to Read
To understand why blue on red is a poor text and background color combination, we need to look at some basic color theory and how our eyes perceive color contrasts. The main factors that determine readability are:
- Luminance contrast: The relative lightness or darkness between text and background colors.
- Color contrast: How different the hues are and whether they clash.
Blue and red are primary colors that are located opposite each other on the color wheel. This means they have very little in common visually. When placed side-by-side, they create a vibrating, flickering effect that leads to eye fatigue.
Additionally, blue and red have fairly similar luminance. Red is inherently a brighter, lighter color than blue. So when used as a background, the red overwhelms the darker blue text, making it fade into the background.
Finally, red and blue stimulate different color receptors in our eyes, making them difficult to focus on simultaneously. Red is detected by the L cones in our retina, while blue is detected by the S cones.
WCAG Guidelines for Color Contrast
The Web Content Accessibility Guidelines (WCAG) provide standards for text and background color contrast ratios to ensure content is legible for all users. WCAG requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (over 24px or 19px and bold).
The contrast ratio between blue (#0000FF) and red (#FF0000) is just 2.5:1. This fails both the standards for normal and large text. Here is a color contrast matrix showing ratios for common color pairings:
| Text Color | Background Color | Contrast Ratio |
|---|---|---|
| White (#FFFFFF) | Black (#000000) | 21:1 |
| Yellow (#FFFF00) | Blue (#0000FF) | 8:1 |
| Green (#00FF00) | Purple (#800080) | 5.5:1 |
| Blue (#0000FF) | Red (#FF0000) | 2.5:1 |
As shown, the blue on red combination fails to meet even the minimum 3:1 ratio for large text. This makes it a poor choice for any body text.
How Other Color Combinations Compare for Readability
When choosing text and background colors, it’s helpful to look at other pairings for comparison. Here are some examples with better contrast ratios than blue on red:
- White Text on a Black Background: This provides the highest possible contrast of 21:1, making it very readable.
- Yellow Text on a Dark Blue Background: 8:1 contrast ratio, commonly used in infographics and data visualizations.
- Green Text on a Purple Background: 5.5:1 ratio, provides enough contrast for most body text.
- Black Text on a White Background: This classic text and paper color combination has a contrast ratio of 20:1.
In nearly all cases, darker colored text on a lighter background is more readable than lighter text on a darker background. Light text on dark backgrounds can work if the contrast ratio is high enough, but requires more precise color selection.
Use Color Contrast Checkers
To ensure your chosen text and background colors meet accessibility standards, you can use online color contrast checkers. These tools calculate the contrast ratio based on the hex color codes you input. Some useful contrast checkers include:
Many of these checkers will also suggest alternative colors with better contrast. This makes it easy to test out different color combinations.
When Blue Text on Red May be Acceptable
Although generally inadvisable, there are some cases where blue text on a red background may be acceptable:
- If the blue text is very dark and the red background is very light, the contrast ratio may reach 3:1.
- For very large decorative text, such as headings or logos.
- For short highlighted text, but not paragraphs or body copy.
- In certain user interfaces or data visualizations, but color should not be the sole way to convey meaning.
However, maximum readability and inclusiveness should always be the goal. So alternatives like darker blue on light red are preferable whenever possible.
Tips for Choosing Color Combinations
Here are some best practices for choosing accessible, easy-to-read text and background color pairings:
- Aim for at least 4.5:1 contrast for body text.
- Avoid red text on a blue background or vice versa.
- Use dark text on a light background for maximum readability.
- Perform color contrast checks and consider alternatives.
- Make sure colors meet WCAG 2.0 Level AA standards.
- Ask people with visual impairments to test your color scheme.
- Provide options to switch color themes or modes.
Choosing the right colors can seem complex, but a little knowledge of color theory, accessibility guidelines, and contrast checking tools goes a long way. Keeping inclusivity and readability front of mind will lead you to make good design choices.
Conclusion
Blue text on a red background is a low contrast color combination that can impede readability, especially for those with visual impairments. The similar luminance and lack of visual compatibility between these opposing hues on the color wheel results in vibration, lack of focus, and eye strain.
WCAG accessibility standards require at least a 3:1 contrast ratio for large text and 4.5:1 for normal text. With only a 2.5:1 ratio, blue on red fails to meet these minimums. While there are some exceptions, it’s best practice to avoid blue text on red backgrounds.
Choosing color combinations like darker blue on lighter red, dark text on light backgrounds, and performing color contrast checks will all improve accessibility. Keeping readability and inclusiveness as top priorities will lead to better designs.
