Recraftory

Accessibility - Color Contrast

Kontras warna memastikan teks dan elemen UI dapat dibaca oleh pengguna dengan visibilitas rendah atau color blindness.

Rasio Kontras WCAG

LevelNormal TextLarge Text (18pt+ / 14pt bold)UI Components
AA4.5:13:13:1
AAA7:14.5:1

Contoh Kontras

/* ✅ 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 */
}

Jangan Gunakan Warna Saja untuk Informasi

<!-- 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>

Color Blindness Consideration

  • ~8% laki-laki dan ~0.5% perempuan punya some form of color blindness
  • Red-green adalah yang paling umum
  • Selalu gunakan pola, ikon, atau label tambahan

Tools untuk Cek Kontras

ToolFungsi
WebAIM Contrast CheckerCek rasio dua warna
axe DevToolsAudit otomatis di browser
LighthouseLaporan accessibility built-in
Stark (Figma/Sketch plugin)Simulasi color blindness

Dark Mode dan Kontras

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

Focus Indicator

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