無効なUI要素のコントラスト

無効状態とWCAG

WCAG 2.1達成基準1.4.3は、「非アクティブなユーザーインターフェースコンポーネントの一部であるテキストまたはテキストの画像」をコントラスト要件から明示的に免除しています。つまり、無効なボタン、入力、リンクは4.5:1閾値を満たす必要がありません。

ただし、ユーザーは無効な要素を識別する必要がある

無効な要素がコントラスト最小値から免除されているとはいえ、ユーザーは以下が必要です：

1. 要素が存在することを認識する
2. それが無効であること（スタイルが悪いだけではない）を理解する

推奨アプローチ

/* 無効ボタン - 表示されるが明確に非アクティブ */
.btn:disabled {
  background-color: #f4f4f5;  /* zinc-100 */
  color: #a1a1aa;              /* zinc-400 */
  border: 1px solid #e4e4e7;  /* zinc-200 */
  cursor: not-allowed;
}

/* これは避ける - 見えない無効状態 */
.btn:disabled {
  background-color: #fafafa;
  color: #e4e4e7;  /* ほとんど見えず、混乱を招く */
  cursor: default;
}

複数の視覚的手がかり

色だけに頼って無効状態を示さないでください。以下のインジケーターを少なくとも2つ組み合わせてください：

.btn:disabled {
  /* 1. コントラストの低減（色） */
  color: #a1a1aa;
  background: #f4f4f5;

  /* 2. カーソルの変更（インタラクション） */
  cursor: not-allowed;

  /* 3. 不透明度の低減（オプションの追加手がかり） */
  opacity: 0.6;
}

無効なフォーム入力

input:disabled {
  background-color: #f4f4f5;
  color: #a1a1aa;
  border-color: #e4e4e7;
  cursor: not-allowed;
}

/* disabled属性の代わりにaria-disabledの使用を検討 */
/* これにより要素がフォーカス可能なままスクリーンリーダーで利用可能 */
input[aria-disabled="true"] {
  background-color: #f4f4f5;
  color: #71717a;  /* わずかに暗い - まだ読みやすい */
  border-color: #e4e4e7;
  pointer-events: none;
}

ダークモードの無効状態

/* ダークモード */
.btn:disabled {
  background: #27272a;  /* zinc-800 */
  color: #52525b;       /* zinc-600 */
  border-color: #3f3f46;
  cursor: not-allowed;
}

aria-disabledの代替

HTMLのdisabled属性の代わりにaria-disabled="true"の使用を検討してください。aria-disabledアプローチは要素をタブ順序に残し、スクリーンリーダーユーザーがそれを発見し、なぜ利用できないかを理解できるようにします。