Accessibility - Color Contrast

/* ✅ AA compliant — kontras tinggi */
.dark-on-light {
  background: #ffffff;
  color: #1a1a1a;       /* rasio ~16:1 */
}

.light-on-dark {
  background: #1a1a1a;
  color: #ffffff;       /* rasio ~16:1 */
}

/* ❌ Fail — kontras terlalu rendah */
.poor-contrast {
  background: #f0f0f0;
  color: #aaaaaa;       /* rasio ~2.5:1 */
}

<!-- Salah — hanya warna yang membedakan -->
<span style="color: red">Gagal</span>
<span style="color: green">Berhasil</span>

<!-- Benar — ikon + warna + teks -->
<span>
  <svg aria-hidden="true"><!-- ikon X --></svg>
  <span style="color: #d32f2f">Gagal: Tidak dapat terhubung ke server</span>
</span>

<span>
  <svg aria-hidden="true"><!-- ikon centang --></svg>
  <span style="color: #388e3c">Berhasil: Data telah disimpan</span>
</span>

@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #e0e0e0;
  }
}

/* Pastikan focus indicator memenuhi kontras 3:1 */
button:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}