ブランドカラーのWCAGアクセシビリティ対応

ブランドカラーとアクセシビリティ

ブランドカラーは視覚的な魅力のために選ばれることが多く、アクセシビリティを考慮していないため、WCAGコントラスト要件に不合格になることがよくあります。課題は、ブランド認知を維持しながらコントラスト閾値を満たすようにこれらの色を調整することです。

一般的なブランドカラーの問題

多くの有名なブランドカラーはアクセシビリティチェックに不合格です：

/* 白背景でAAに不合格のよく知られた色 */
/*（仮想的な類似色）*/
color: #1da1f2; background: #ffffff;  /* ~3.36:1 - 不合格 */
color: #ff6900; background: #ffffff;  /* ~3.01:1 - 不合格 */
color: #7289da; background: #ffffff;  /* ~3.52:1 - 不合格 */

戦略1：テキスト用に暗くし、装飾にはオリジナルを維持

最もシンプルなアプローチは色の使用を分離します：

:root {
  --brand-primary: #3b82f6;      /* オリジナルのブランドブルー */
  --brand-primary-text: #1d4ed8; /* テキスト用に暗くした色 - 8.59:1 */
}

/* 背景と装飾にはオリジナルを使用 */
.badge { background: var(--brand-primary); color: white; }

/* テキストには暗くしたバージョンを使用 */
.brand-link { color: var(--brand-primary-text); }

戦略2：アクセシブルなカラーランプを作成

ブランドカラーからフルカラースケールを生成し、コントラスト目標を満たすシェードを選択します：

:root {
  --brand-50:  #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5fa;  /* オリジナルのブランドカラー */
  --brand-500: #3b82f6;
  --brand-600: #2563eb;  /* 白背景でAAテキスト: 5.38:1 */
  --brand-700: #1d4ed8;  /* 白背景でAAAテキスト: 8.59:1 */
  --brand-800: #1e40af;
  --brand-900: #1e3a8a;
}

戦略3：ブランドカラー自体を調整

ブランドガイドラインが柔軟性を許可する場合、HSL空間で色の明度を調整します：

/* オリジナル：テキストには明るすぎる */
color: hsl(217, 91%, 60%);  /* #3b82f6 - 白に対して3.45:1 */

/* 暗くした：AAを満たす */
color: hsl(217, 91%, 53%);  /* ~#2563eb - 白に対して5.38:1 */

/* さらに暗くした：AAAを満たす */
color: hsl(217, 91%, 44%);  /* ~#1d4ed8 - 白に対して8.59:1 */

ドキュメント化

アクセシブルなカラーバリエーションを常にオリジナルのブランドカラーとともに文書化してください。これにより、将来のチームメンバーがアクセシブルでないオリジナルをテキストに誤って使用することを防ぎます。