Pemula · Kelas 9–12
Kontras
Perbedaan yang terlihat membantu membedakan elemen.
Laboratorium kontras
Kontras dapat memperjelas pesan; terlalu banyak perbedaan juga dapat membuat elemen saling bersaing.
Coba teks abu-abu pada latar terang, lalu gelapkan teksnya. Kontras juga dapat muncul dari ukuran, bentuk, tekstur, atau weight; tidak hanya warna.
Mengapa penting?
Pesan lebih mudah dipisahkan dari latar dan elemen pendukung.
Perbedaan terang–gelap membuat teks lebih terbaca.
Bandingkan dua pendekatan
Teks terlalu dekat dengan nilai latarnya.
Perbedaan terang–gelap membuat teks lebih terbaca.
Contoh untuk konteks ini. Pilihan terbaik bergantung pada pesan dan audiens.
Kesalahan yang sering terjadi
Menganggap dua hue berbeda pasti terbaca jelas.
Refleksi siswa
Apakah teks tetap terbaca saat warna diubah menjadi grayscale?
Detektif desain ↗03 / CANVA + FIGMA
Coba di karya sendiri
Bandingkan tiga warna teks pada latar yang sama. Periksa pada ukuran ponsel dan dengan alat pemeriksa kontras.
Canva
Buat dua salinan halaman di Canva. Terapkan perubahan pada bentuk atau teks di versi kedua. Bandingkan pada ukuran tampil sebenarnya.
Figma
Duplikasikan frame di Figma. Ubah properti layer yang terkait, gunakan guides atau auto layout jika membantu, lalu bandingkan kedua frame.
Latihan dilakukan mandiri di aplikasi pilihanmu. Tidak diperlukan koneksi akun.
Teori terkait
Sumber & bacaan
Figma · Graphic design principles ↗W3C · WCAG 2.2 Contrast (Minimum) ↗Rujukan diperiksa 1 Oktober 2026. Eksperimen dan brief dibuat khusus untuk belajar.
Teori desain adalah panduan untuk diuji dalam konteks, bukan hukum universal.