Lompat ke konten utama
←

Dasar Desain Visual

Pelajaran 5 dari 16

Kontras dan aksesibilitas

Rasio kontras dan ambang AA dan AAA

Setelah pelajaran ini kamu bisa menghitung rasio kontras dua warna dan menentukan apakah teks biasa atau teks besar lolos SC 1.4.3 dan 1.4.6.

±13 menitDiperiksa 27 Sep 2026

Materi

WCAG 2.2 mendefinisikan rasio kontras sebagai (L1 + 0,05) / (L2 + 0,05), dengan L1 luminans warna yang lebih terang dan L2 luminans warna yang lebih gelap. Angkanya berkisar dari 1:1, dua warna sama, sampai 21:1, hitam di atas putih. Urutan tidak boleh tertukar: pembilang selalu warna yang lebih terang.

Kriteria 1.4.3 tingkat AA meminta teks dan gambar teks punya rasio sekurangnya 4,5:1, dan teks besar sekurangnya 3:1. Kriteria 1.4.6 tingkat AAA menaikkannya menjadi 7:1 untuk teks biasa dan 4,5:1 untuk teks besar. Teks besar didefinisikan sebagai sekurangnya 18 point, atau 14 point tebal. Understanding 1.4.3 menyetarakannya dengan kira-kira 24px dan 18,5px, karena 1pt = 1,333px. Hiasan, logo, dan teks pada komponen yang tidak aktif dikecualikan.

Teks abu-abu #767676 (L ≈ 0,1812) di atas putih (L = 1)
rasio = (1 + 0,05) / (0,1812 + 0,05) ≈ 4,54
teks biasa: AA lolos (≥ 4,5), AAA gagal (< 7)
teks besar: AA lolos (≥ 3), AAA lolos (≥ 4,5)

Understanding 1.4.3 menegaskan bahwa ambang ini tidak boleh dicapai dengan membulatkan: rasio 4,499:1 tidak memenuhi 4,5:1. Jadi hasil hitungan dibandingkan apa adanya.

Latihan

0/3 lulus

Jawaban diperiksa di server. Lulus berarti kamu memahami contohnya, bukan penilaian seluruh pekerjaanmu.

Latihan 1 dari 3

Teks putih (L = 1) diletakkan di atas latar dengan luminans relatif 0,2. Berapa rasio kontrasnya? Tulis angka di depan “:1”.

Latihan 2 dari 3

Teks merah murni #FF0000 (L = 0,2126) di atas latar putih punya rasio kontras sekitar 4,00:1. Pernyataan mana yang benar menurut SC 1.4.3?

Pilih satu jawaban

Latihan 3 dari 3

Alat pemeriksa menampilkan rasio 4,49:1 untuk teks isi berukuran 16px. Rekan kerja membulatkannya menjadi 4,5 dan menyatakan lolos AA. Apa keputusan yang sesuai Understanding 1.4.3?

Pilih satu jawaban

Catatanmu

Memuat catatan…

tersimpan otomatis, ikut tercetak · 0/4.000

Luluskan semua latihan dulu untuk menandai pelajaran ini selesai.

Lanjutkan ke