White Text on Blue Background Contrast

White Text on Blue: A Common Pattern

White text on a blue background is one of the most common color combinations in web design, used for primary buttons, navigation bars, alerts, and call-to-action sections. However, not all blues provide sufficient contrast with white text.

Testing Popular Blues

/* PASS - These blues work with white text */
color: #ffffff; background: #1d4ed8;  /* Tailwind blue-700: 8.59:1 */
color: #ffffff; background: #1e40af;  /* Tailwind blue-800: 10.14:1 */
color: #ffffff; background: #0d6efd;  /* Bootstrap primary: 4.63:1 */
color: #ffffff; background: #1565c0;  /* Material blue-800: 7.11:1 */
color: #ffffff; background: #1976d2;  /* Material blue-700: 5.59:1 */

/* FAIL - These blues do NOT work with white text */
color: #ffffff; background: #3b82f6;  /* Tailwind blue-500: 3.45:1 */
color: #ffffff; background: #2196f3;  /* Material blue-500: 3.26:1 */
color: #ffffff; background: #60a5fa;  /* Tailwind blue-400: 2.27:1 */

The Blue-500 Problem

Many design systems default to a "500" shade as the primary blue. This medium blue typically has a contrast ratio of only 3-3.5:1 with white, which fails even the AA Large Text threshold at the boundary. The solution is to use a darker shade (600-800) for backgrounds behind white text.

Accessible Alternatives

If you want a vibrant blue background, use these strategies:

1. Darken the blue: Use shade 600 or 700 instead of 500
2. Add a dark overlay: Apply a semi-transparent black overlay
3. Use dark text: Switch to dark blue or black text on light blue backgrounds

Quick Reference

For white text (#ffffff) to pass AA Normal (4.5:1), the blue background must have a relative luminance below approximately 0.18, which corresponds to darker blues like #2563eb (blue-600) and below.