青背景に白テキストのコントラスト

青に白テキスト：一般的なパターン

青背景に白テキストは、プライマリボタン、ナビゲーションバー、アラート、CTAセクションに使用される最も一般的な色の組み合わせの一つです。しかし、すべての青が白テキストに十分なコントラストを提供するわけではありません。

人気の青色をテスト

/* 合格 - これらの青は白テキストで使える */
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 */

/* 不合格 - これらの青は白テキストで使えない */
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 */

Blue-500問題

多くのデザインシステムはプライマリブルーとして「500」シェードをデフォルトにしています。この中間の青は通常、白とのコントラスト比が3-3.5:1しかなく、AA大テキスト閾値の境界でも不合格です。解決策は、白テキストの背景により暗いシェード（600-800）を使用することです。

アクセシブルな代替案

鮮やかな青背景を使いたい場合、以下の戦略を使用してください：

1. 青を暗くする：500の代わりにシェード600または700を使用
2. 暗いオーバーレイを追加：半透明の黒オーバーレイを適用
3. 暗いテキストを使用：薄い青背景に暗い青または黒テキストに切り替え

クイックリファレンス

白テキスト（#ffffff）がAA通常（4.5:1）を通過するには、青背景の相対輝度が約0.18未満である必要があり、これは#2563eb（blue-600）以下の暗い青に対応します。