暗い背景のエラーテキストと警告テキスト

暗い背景のステータス色

エラーメッセージ、警告、成功インジケーターは通常、赤、黄、緑を使用します。これらの色はライト背景と比較してダーク背景では異なる動作をし、多くの一般的なステータス色はダークモードでコントラスト要件に不合格となります。

赤 / エラー色

/* 暗い背景 #18181b の場合 */
color: #ef4444;  /* red-500: 4.52:1 - AA合格 */
color: #f87171;  /* red-400: 5.98:1 - AA合格 */
color: #fca5a5;  /* red-300: 9.02:1 - AAA合格 */
color: #dc2626;  /* red-600: 3.41:1 - AA通常不合格 */
color: #b91c1c;  /* red-700: 2.50:1 - 不合格 */

黄 / 警告色

/* 暗い背景 #18181b の場合 */
color: #facc15;  /* yellow-400: 11.59:1 - AAA合格 */
color: #fbbf24;  /* amber-400: 10.76:1 - AAA合格 */
color: #eab308;  /* yellow-500: 9.33:1 - AAA合格 */
color: #f59e0b;  /* amber-500: 8.26:1 - AAA合格 */
color: #ca8a04;  /* yellow-600: 5.88:1 - AA合格 */

緑 / 成功色

/* 暗い背景 #18181b の場合 */
color: #22c55e;  /* green-500: 6.83:1 - AA合格 */
color: #4ade80;  /* green-400: 9.05:1 - AAA合格 */
color: #86efac;  /* green-300: 12.44:1 - AAA合格 */
color: #16a34a;  /* green-600: 4.45:1 - AA通常不合格 */
color: #15803d;  /* green-700: 3.18:1 - 不合格 */

重要なポイント

暗い背景では、ステータス色の明るいシェード（300-400）が合格し、暗いシェード（600-700）が不合格になる傾向があります。これはライトモードの逆で、暗いシェードの方がよく機能します。ダークモードテーマはステータス色を明るいバリアントにマッピングすべきです。

推奨パターン

/* ステータス色 - ライトモード */
.error { color: #dc2626; }    /* red-600: 白に対して4.63:1 */
.warning { color: #ca8a04; }  /* yellow-600: 白に対して4.58:1 */
.success { color: #16a34a; }  /* green-600: 白に対して4.52:1 */

/* ステータス色 - ダークモード */
.error { color: #f87171; }    /* red-400: #18181bに対して5.98:1 */
.warning { color: #fbbf24; }  /* amber-400: #18181bに対して10.76:1 */
.success { color: #4ade80; }  /* green-400: #18181bに対して9.05:1 */