Warna, Pola, dan Label Langsung
Kodekan rangkaian data agar dapat dibaca pengguna buta warna.
Warna, Pola, dan Label Langsung adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web Accessibility Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Warna Saja Menyesatkan Sebagian Mata
Sekitar 1 dari 12 pria tidak dapat membedakan warna tertentu dengan andal. Jika bagan Anda menyatakan merah berarti kerugian, pengguna tersebut sama sekali tidak melihat perbedaannya. 🎨
Aturan Dua Saluran
Kodekan setiap rangkaian dengan saluran kedua selain warna: pola, bentuk, atau label langsung. Warna menjadi tambahan, bukan satu-satunya petunjuk.
Pola Mengisi Kekosongan
Beri batang dan area pola yang berbeda, seperti garis-garis atau titik-titik. Isian tersebut membedakan rangkaian bahkan dalam skala abu-abu murni.
<rect fill="url(#stripes)" />Gunakan Bentuk Berbeda untuk Bagan Garis
Pada bagan garis, tandai titik dengan bentuk yang berbeda: lingkaran, persegi, atau segitiga. Setiap garis tetap dapat dibedakan tanpa mengandalkan rona warna.
Label Langsung Mengungguli Legenda
Legenda terpisah memaksa pengguna mencocokkan warna. Letakkan label langsung pada garis atau irisan agar namanya berada di samping data.
Pilih Palet yang Aman bagi Buta Warna
Beberapa pasangan rona, seperti merah dan hijau, paling sulit dibedakan. Palet color-blind-safe seperti Okabe-Ito menghindari benturan tersebut.
Kontras Tetap Penting di Sini
Rangkaian yang bersebelahan dan label teksnya memerlukan kontras yang memadai. WCAG meminta setidaknya rasio 3 banding 1 di antara bagian grafik yang bermakna.
Uji dalam Skala Abu-Abu
Pemeriksaan cepat: lihat bagan Anda dalam skala abu-abu. Jika Anda tidak dapat membedakan rangkaiannya, pengguna buta warna juga tidak dapat. Perbaiki sebelum dirilis.
filter: grayscale(100%);Pengodean Berulang adalah Tujuannya
Penumpukan petunjuk ini disebut pengodean berulang: warna ditambah pola ditambah label. Jika satu petunjuk hilang, bagan tetap mudah dipahami.
Jangan Membanjiri dengan Petunjuk
Keseimbangan itu penting. Menambahkan semua pola sekaligus membuat tampilan berisik. Tambahkan secukupnya agar setiap rangkaian berbeda dan bagan tetap tenang.
Ini Juga Membantu dalam Cahaya Buruk
Label langsung dan pola juga menyelamatkan bagan yang dilihat di bawah sinar matahari, pada layar murah, atau dicetak hitam putih. Semua orang diuntungkan. ☀️
Pemeriksaan Singkat
Mengapa warna saja merupakan cara yang buruk untuk membedakan rangkaian bagan?
Rangkuman: Lebih dari Satu Petunjuk
Anda telah mempelajari untuk tidak pernah mengandalkan warna saja: tambahkan pola, bentuk, atau label langsung, pilih palet yang aman, dan uji dalam skala abu-abu. 🖤
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Warna, Pola, dan Label Langsung” gratis?
Ya — teks lengkap “Warna, Pola, dan Label Langsung” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web Accessibility Academy, upgrade ke CoddyKit PRO. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Warna, Pola, dan Label Langsung”?
Kodekan rangkaian data agar dapat dibaca pengguna buta warna. Kamu berlatih Web Accessibility Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Web Accessibility Academy?
Tidak diperlukan pengalaman sebelumnya. Web Accessibility Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Warna, Pola, dan Label Langsung” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Web Accessibility Academy ini?
Ya. Setiap pelajaran Web Accessibility Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Setiap Grafik Membutuhkan Alternatif Teks
- Cadangan Tabel Data
- Warna, Pola, dan Label Langsung
- Grafik Interaktif yang Dapat Dinavigasi dengan Papan Ketik