Advanced · Level 15: AccessibilityAdvanced55 menitBahasa Indonesia

Color Contrast

Memeriksa agar text, error, focus, dan action tetap terbaca pada surface tempat user benar-benar melihatnya.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan contrast sebagai hubungan foreground dan background, bukan warna tunggal
Membedakan text normal, text besar, dan UI state yang perlu diperiksa
Memperbaiki satu kombinasi text atau action yang sulit dibaca
Menyusun pemeriksaan contrast yang tidak hanya mengandalkan feeling visual

CSSColor ContrastVisual AccessibilityAccessibility Review

Isi lesson

6 blok

1.
Contrast adalah informasi yang harus tetap terbacaBelum selesaiWajib
2.
Perbaiki text pendukung dan action courseBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Tool memberi angka, bukan keputusan product lengkapBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Contrast adalah informasi yang harus tetap terbaca

Wajib

Contrast membandingkan warna foreground dengan background yang benar-benar berada di belakangnya. Text meta yang tenang, error merah, button primary, disabled state, badge, link, dan focus ring semuanya dapat gagal bila warnanya terlalu dekat dengan surface. Jangan menilai satu token warna secara terpisah. Periksa kombinasi yang muncul pada light surface, dark surface, hover, focus, error, dan theme lain yang didukung product. Untuk text normal, target awal yang praktis adalah rasio 4.5:1; text besar memiliki pengecualian, tetapi jangan memakai pengecualian itu untuk menyamarkan body copy yang tetap sulit dibaca.

Bagian ini memengaruhi progres lesson.

Perbaiki text pendukung dan action course

Wajib

css

.course-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
}

.course-meta {
  color: #475569;
}

.course-action {
  background: #075985;
  color: #ffffff;
}

.course-error {
  background: #fff1f2;
  color: #991b1b;
}

Warna bukan dipilih karena terlihat lebih gelap atau lebih cantik, tetapi karena text masih terbaca pada background-nya. Contoh ini membuat meta text, action, dan error memiliki pasangan foreground-background yang jelas. Saat token digunakan kembali pada surface lain, ukur ulang; warna yang lolos di white card belum tentu cukup pada tint, image, atau dark theme.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Fix course contrast states

Perbaiki warna text pendukung, action, dan error pada card course agar lebih mudah dibaca pada surface yang dipakai.

Tujuan awal: Fokus di tab CSS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

8 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Saat memeriksa contrast error message, pasangan yang harus diuji terlebih dahulu adalah

Progres lesson naik setelah jawaban benar.

Catatan penting

Opsional

Tool memberi angka, bukan keputusan product lengkap

Contrast checker berguna untuk menemukan rasio, tetapi ia tidak memahami apakah text itu penting, apakah state hanya dibedakan lewat warna, atau apakah focus ring tertutup background. Gunakan angka untuk memulai review, lalu baca UI sebagai user: apakah label, error, action, dan status masih jelas pada semua state yang relevan?

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Contrast adalah hubungan foreground dan background pada UI nyata.
Text normal, action, error, link, dan focus indicator perlu diperiksa pada state serta theme yang dipakai.
Rasio awal yang praktis untuk text normal adalah 4.5:1, bukan alasan untuk mengabaikan keterbacaan visual.
Jangan menyampaikan informasi penting hanya lewat perubahan warna.
Berikutnya, form error memerlukan label, description, pesan yang jelas, dan jalur kembali ke field yang perlu diperbaiki.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Contrast adalah informasi yang harus tetap terbaca.

Memuat progres Review module