Making Brand Colors WCAG Accessible

Brand Colors and Accessibility

Brand colors often fail WCAG contrast requirements because they were chosen for visual appeal rather than accessibility. The challenge is adjusting these colors to meet contrast thresholds while preserving brand recognition.

Common Brand Color Problems

Many recognizable brand colors fail accessibility checks:

/* Well-known colors that fail AA on white */
/* (hypothetical similar colors) */
color: #1da1f2; background: #ffffff;  /* ~3.36:1 - FAILS */
color: #ff6900; background: #ffffff;  /* ~3.01:1 - FAILS */
color: #7289da; background: #ffffff;  /* ~3.52:1 - FAILS */

Strategy 1: Darken for Text, Keep Original for Decoration

The simplest approach separates color usage:

:root {
  --brand-primary: #3b82f6;      /* Original brand blue */
  --brand-primary-text: #1d4ed8; /* Darkened for text - 8.59:1 */
}

/* Use original for backgrounds and decorations */
.badge { background: var(--brand-primary); color: white; }

/* Use darkened version for text */
.brand-link { color: var(--brand-primary-text); }

Strategy 2: Create an Accessible Color Ramp

Generate a full color scale from your brand color, then select the shade that meets your contrast target:

:root {
  --brand-50:  #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5fa;  /* Original brand color */
  --brand-500: #3b82f6;
  --brand-600: #2563eb;  /* AA text on white: 5.38:1 */
  --brand-700: #1d4ed8;  /* AAA text on white: 8.59:1 */
  --brand-800: #1e40af;
  --brand-900: #1e3a8a;
}

Strategy 3: Adjust the Brand Color Itself

If the brand guidelines allow flexibility, adjust the color's lightness in HSL space:

/* Original: too light for text */
color: hsl(217, 91%, 60%);  /* #3b82f6 - 3.45:1 vs white */

/* Darkened: meets AA */
color: hsl(217, 91%, 53%);  /* ~#2563eb - 5.38:1 vs white */

/* Further darkened: meets AAA */
color: hsl(217, 91%, 44%);  /* ~#1d4ed8 - 8.59:1 vs white */

Documentation

Always document your accessible color variations alongside the original brand colors. This prevents future team members from accidentally using the non-accessible original for text.