ボタンテキストと背景のコントラスト

ボタンのアクセシビリティとコントラスト

ボタンはすべての状態でアクセシブルでなければならない重要なインタラクティブ要素です：デフォルト、ホバー、フォーカス、アクティブ、無効。各状態でテキストとボタン背景間の十分なコントラストを維持する必要があります。

プライマリボタン

/* 合格 - 暗いボタンに白テキスト */
.btn-primary {
  background: #2563eb; /* blue-600 */
  color: #ffffff;      /* 5.38:1 - AA合格 */
}

/* 合格 - 明るいボタンに暗いテキスト */
.btn-primary {
  background: #dbeafe; /* blue-100 */
  color: #1e3a8a;      /* blue-900: 9.49:1 - AAA合格 */
}

/* 不合格 - 中間のボタンに白テキスト */
.btn-primary {
  background: #3b82f6; /* blue-500 */
  color: #ffffff;      /* 3.45:1 - AA通常不合格 */
}

すべてのボタン状態が合格する必要がある

.btn-primary {
  background: #2563eb; color: #ffffff; /* 5.38:1 - 合格 */
}
.btn-primary:hover {
  background: #1d4ed8; color: #ffffff; /* 8.59:1 - 合格 */
}
.btn-primary:focus {
  background: #2563eb; color: #ffffff; /* 5.38:1 - 合格 */
  outline: 2px solid #1d4ed8;
}
.btn-primary:active {
  background: #1e40af; color: #ffffff; /* 10.14:1 - 合格 */
}

無効ボタン

無効ボタンは「ユーザーインタラクションに利用できない」ため、WCAG 1.4.3コントラスト要件が免除されます。しかし、ユーザーはボタンが存在し無効であることを認識する必要があります：

/* 無効状態の最小推奨 */
.btn:disabled {
  background: #e4e4e7; /* zinc-200 */
  color: #a1a1aa;      /* zinc-400: bgに対して1.91:1 */
  cursor: not-allowed;
  opacity: 0.7;        /* 追加の視覚的手がかり */
}

アウトライン / ゴーストボタン

アウトラインボタンの場合、テキスト色はボタンボーダーではなくページ背景とのコントラストが必要です：

/* 白いページ背景の場合 */
.btn-outline {
  background: transparent;
  border: 1px solid #2563eb;
  color: #2563eb;  /* #ffffffに対して5.38:1 - 合格 */
}

アイコンのみのボタン

アイコンのみのボタン（テキストなし）でも、WCAG 1.4.11（非テキストコントラスト）のアイコンと背景間の3:1を満たす必要があります。スクリーンリーダーのために常にaria-labelを含めてください。