Artikel
Mengekstrak palet warna yang aksesibel dari gambar
Foto atau aset merek sering mengandung benih dari sistem warna yang lengkap. Mengekstrak benih tersebut, membentuknya menjadi palet yang dapat digunakan, lalu memverifikasinya terhadap standar aksesibilitas memerlukan tiga langkah yang berbeda. Artikel ini membahas masing-masing langkah secara berurutan: cara ekstraksi palet bekerja di balik layar, cara memilih dan menyesuaikan warna untuk penggunaan praktis, cara memeriksa kontras terhadap ambang WCAG, dan cara menangkap pasangan yang tidak dapat dibedakan oleh pengguna buta warna.
Cara palet diekstrak: sampling piksel dan kuantisasi warna
Setiap gambar digital adalah kisi piksel, masing-masing membawa nilai warna dalam ruang seperti RGB. Ekstraktor palet tidak memeriksa setiap piksel secara individual: foto 2 megapiksel mengandung 2 juta titik data, yang lambat untuk diproses dan akan mengembalikan ribuan nuansa yang sedikit berbeda daripada kumpulan yang berguna. Sebagai gantinya, tool menyampel kisi piksel pada interval teratur, mengumpulkan subset yang representatif. Subset tersebut kemudian dimasukkan ke dalam algoritma kuantisasi warna. Pendekatan yang paling umum mengelompokkan warna-warna serupa menggunakan metode pengelompokan, kadang disebut median-cut atau partisi gaya k-means. Algoritma menempatkan setiap piksel yang disampling ke dalam salah satu dari sejumlah bucket berdasarkan kemiripan warna, kemudian menghitung rata-rata warna setiap bucket. Hasilnya adalah daftar kecil, biasanya 4 hingga 16 warna, yang bersama-sama mewakili nada visual dominan dalam gambar. Warna yang hanya muncul di area kecil yang terisolasi mungkin terlewat, yang merupakan perilaku yang diharapkan bukan kekurangan.
Dari warna dominan mentah ke palet yang dapat digunakan
Output mentah dari ekstraktor palet adalah daftar warna yang diurutkan berdasarkan frekuensi, tetapi frekuensi saja tidak membuat palet. Foto hutan akan mengembalikan beberapa hijau yang terlalu mirip untuk digunakan dalam UI sebagai aksen yang berbeda. Pekerjaan praktisnya adalah memilih dan menyesuaikan. Mulailah dengan mengidentifikasi satu warna sebagai warna primer Anda: yang paling khas dan paling tidak netral. Dari warna yang tersisa, cari paling banyak dua yang kontras dengan warna primer dan satu sama lain. Warna-warna tersebut menjadi aksen Anda. Semua yang lain, termasuk nada yang didesaturasi yang sering dikembalikan ekstraktor dari bayangan dan mid-tone, dapat berfungsi sebagai netral untuk latar belakang dan border. Setelah Anda memiliki struktur kasar ini, Anda hampir pasti perlu menyesuaikan nilai individual. Tool color-converter memungkinkan Anda memeriksa setiap warna dalam hex, RGB, dan HSL. HSL sangat berguna di sini: Anda dapat mempertahankan hue dan menggeser lightness atau saturation untuk membuat keluarga yang lebih ketat atau lebih longgar tanpa meninggalkan keluarga warna yang sama.
Memeriksa kontras: ambang WCAG untuk teks yang dapat dibaca
Setelah Anda memiliki warna kandidat untuk teks dan latar belakang, Anda perlu memeriksa apakah kombinasinya dapat dibaca. Web Content Accessibility Guidelines (WCAG) mendefinisikan rasio kontras untuk tujuan ini. Rasio membandingkan luminansi relatif dua warna: nilai 1:1 berarti tidak ada kontras sama sekali (warna yang sama pada warna yang sama), dan 21:1 adalah maksimum (hitam di atas putih). WCAG 2.1 Level AA memerlukan rasio minimal 4,5:1 untuk teks tubuh berukuran normal, dan 3:1 untuk teks besar (18pt atau 14pt tebal). Level AAA menetapkan ambang yang lebih tinggi yaitu 7:1 dan 4,5:1. Anda tidak perlu menghitung luminansi secara manual. Wawasan utamanya adalah bahwa pasangan warna yang terlihat baik untuk Anda dalam pencahayaan yang baik mungkin berada di bawah 4,5:1 di layar, dan pedoman tersebut ada justru untuk kasus itu. Setelah mengekstrak dan menyesuaikan warna, uji setiap pasangan teks-di-atas-latar-belakang yang ingin Anda gunakan. Abu-abu mid-tone yang terbaca baik di atas putih mungkin gagal sepenuhnya di atas beige muda dari palet yang diekstrak.
Buta warna: mensimulasikan tampilan pasangan bagi pengguna yang terdampak
Sekitar 1 dari 12 pria dan 1 dari 200 wanita memiliki beberapa bentuk defisiensi penglihatan warna. Jenis yang paling umum adalah deuteranopia (sensitivitas berkurang terhadap hijau), diikuti oleh protanopia (sensitivitas berkurang terhadap merah). Tritanopia (sensitivitas berkurang terhadap biru-kuning) lebih jarang. Untuk setiap jenis, sistem visual memetakan panjang gelombang tertentu ke warna yang dirasakan sama yang dilihat pengamat tidak terdampak sebagai berbeda. Masalah praktis bagi palet adalah bahwa dua warna yang terlihat jelas berbeda dalam penglihatan normal dapat menjadi satu nada yang sama bagi pengguna buta warna, membuatnya tidak berguna untuk menyampaikan perbedaan, misalnya hanya menggunakan merah dan hijau untuk menandakan keberhasilan dan kesalahan. Menjalankan simulasi buta warna menunjukkan bagaimana palet terlihat ketika saluran yang terdampak dikompresi. Pasangan yang menjadi abu-abu atau coklat yang hampir identik adalah yang perlu dipertimbangkan ulang: tingkatkan perbedaan lightness di antara keduanya agar kontras tetap ada bahkan tanpa perbedaan hue, atau tambahkan isyarat sekunder (bentuk, label, pola) agar warna bukan satu-satunya sinyal.
Melakukannya secara lokal: color-palette, color-blindness, dan color-converter
Semua tiga langkah yang dijelaskan dalam artikel ini dapat diselesaikan tanpa mengirim gambar atau warna merek Anda ke server mana pun. Tool color-palette berjalan sepenuhnya di browser: Anda menjatuhkan gambar, tool menyampel piksel secara lokal dan mengembalikan warna dominan sebagai nilai hex. Tidak ada file yang dikirimkan. Tool color-converter menerima kode hex dan menampilkan warna yang sama dalam RGB dan HSL sehingga Anda dapat membuat penyesuaian yang tepat pada lightness atau saturation sambil tetap dalam keluarga hue yang sama. Baik hex maupun nilai yang dikonversi hanya ada di halaman. Tool color-blindness bekerja dengan cara sebaliknya: Anda menjatuhkan sebuah gambar dan tool ini merender simulasi deuteranopia, protanopia, dan tritanopia dari gambar tersebut, dikomputasi di browser. Untuk memeriksa sebuah palet alih-alih foto, ekspor atau ambil tangkapan layar dari swatch Anda sebagai gambar terlebih dahulu, lalu jatuhkan itu ke simulator. Menggunakan ketiga tool secara berurutan, ekstrak dari gambar, sesuaikan di color-converter, lalu ekspor gambar swatch dan verifikasi di color-blindness, mencakup alur kerja lengkap yang dijelaskan di atas. Gambar Anda tetap di perangkat Anda sepanjang waktu, yang penting jika foto sumber mengandung branding yang belum dipublikasikan atau identitas klien yang belum dirilis.
Alat dalam artikel ini
- Ekstrak palet warnaEkstrak warna dominan dari gambar sebagai swatch HEX. Salin warna mana pun. Tanpa unggah.
- Simulator kebutaan warnaSimulasikan protanopia, deuteranopia, tritanopia, dan akromatopsia pada gambar. Tanpa unggah.
- Konverter WarnaKonversi warna antara HEX, RGB, HSL, HSV, dan CMYK. Pemeriksa kontras WCAG disertakan. Tanpa unggah.
- Generator Skema WarnaBuat palet komplementer, analog, triadik, tetradik, dan monokromatik dari warna dasar. Tanpa unggah.
Pertanyaan yang sering diajukan
Berapa banyak warna yang biasanya dikembalikan oleh ekstraktor palet?
Sebagian besar tool mengembalikan antara 5 dan 16 warna secara default, meskipun banyak yang memungkinkan Anda mengatur jumlahnya. Mengembalikan lebih sedikit warna berarti algoritma harus mengelompokkan lebih banyak piksel bersama, yang dapat menggabungkan nada yang berbeda namun serupa. Mengembalikan lebih banyak warna dapat menghasilkan duplikat yang hampir identik dan sulit digunakan secara berbeda. Untuk palet UI, 6 hingga 8 warna biasanya merupakan titik awal yang praktis.
Bisakah palet yang diekstrak dari gambar secara otomatis lulus kontras WCAG?
Tidak secara otomatis. Warna dominan dalam foto sering berupa mid-tone dengan luminansi sedang, yang cenderung menghasilkan rasio dalam kisaran 2:1 hingga 3:1 satu sama lain. Memenuhi ambang 4,5:1 untuk teks tubuh biasanya memerlukan mencerahkan nilai latar belakang atau menggelapkan nilai teks di luar apa yang diberikan oleh ekstraksi mentah. Ekstraksi memberikan titik awal; pemeriksaan kontras memberi tahu Anda seberapa banyak penyesuaian yang diperlukan.
Apakah rasio kontras WCAG mempertimbangkan buta warna?
Sebagian. Formula luminansi WCAG didasarkan pada kecerahan relatif, bukan hue, sehingga pasangan kontras tinggi yang memenuhi 4,5:1 umumnya tetap dapat dibedakan bahkan oleh pengguna buta warna karena perbedaan lightness dipertahankan. Namun, dua warna dengan luminansi serupa tetapi hue berbeda, seperti merah dan hijau dengan kecerahan yang sama, dapat lulus pemeriksaan kontras berbasis luminansi tetapi tetap tidak dapat dibedakan oleh deuteranope. Menjalankan simulasi buta warna adalah cara yang tepat untuk memeriksa diferensiasi tingkat hue secara terpisah dari rasio kontras.