Contrast & Accessibility — UI/UX

Kontras Warna dan WCAG Kontras adalah perbedaan luminance antara foreground (teks) dan background. Kontras yang cukup sangat penting untuk readability dan acces

Kontras Warna dan WCAG

Kontras adalah perbedaan luminance antara foreground (teks) dan background. Kontras yang cukup sangat penting untuk readability dan accessibility.

WCAG Contrast Ratios

Web Content Accessibility Guidelines (WCAG) menetapkan standar:

Level Normal Text (< 18px) Large Text (≥ 18px bold / 24px)
AA (minimum) 4.5:1 3:1
AAA (enhanced) 7:1 4.5:1

Contoh Praktis

<title id="contrast-t">Tiga swatch menunjukkan teks dengan contrast ratio lolos AAA, barely AA, dan fail.</title>Kontras teks dan background — passes & fails WCAGAa Rp 50kratio ~10:1✓ AAA#374151 / #ffffffAa Rp 50kratio ~4.6:1⚠ AA barely#6B7280 / #ffffffAa Rp 50kratio ~2.6:1✗ FAIL#9CA3AF / #ffffff
WCAG AA butuh minimum 4.5:1 untuk teks normal. Tes warna sebelum ship.
/* ✅ Kontras baik (AAA pass) */
.good { color: #374151; background: #ffffff; } /* Ratio ~10:1 */

/* ⚠️ Hati-hati — abu-abu sedang, barely AA */
.careful { color: #6B7280; background: #ffffff; } /* Ratio ~4.6:1 */

/* ❌ Kontras buruk (AA fail) */
.bad { color: #9CA3AF; background: #ffffff; } /* Ratio ~2.6:1 */

Cara Mengecek Kontras

  1. Browser DevTools — Chrome DevTools menampilkan contrast ratio saat inspect warna
  2. WebAIM Contrast Checker — tool online untuk cek ratio
  3. Figma plugins — Stark, A11y

Tips Praktis

  1. Body text minimal 4.5:1 — ini non-negotiable
  2. Placeholder text boleh lebih rendah kontrasnya (tapi input text harus tinggi)
  3. Colored backgrounds — pastikan teks di atasnya masih terbaca
  4. Jangan hanya andalkan warna untuk menyampaikan informasi — tambahkan ikon atau teks juga (untuk color-blind users)

Perhatikan Stripe — mereka sangat teliti dengan kontras. Setiap teks terbaca jelas, bahkan teks abu-abu sekunder mereka masih memenuhi AA.

Yang akan kamu pelajari