Artikel
Mengekstrak palet warna yang boleh diakses daripada imej
Gambar foto atau aset jenama sering mengandungi benih sistem warna yang lengkap. Mengekstrak benih itu, membentuknya kepada palet yang berguna, kemudian mengesahkannya berbanding piawaian kebolehaksesan memerlukan tiga langkah berbeza. Artikel ini merangkumi setiap satu mengikut urutan: cara pengekstrakan palet berfungsi di bawah tudung, cara memilih dan melaraskan warna untuk kegunaan praktikal, cara menyemak kontras berbanding ambang WCAG, dan cara menangkap pasangan yang runtuh bagi pengguna buta warna.
Cara palet diekstrak: pensampelan piksel dan pengkuantitian warna
Setiap imej digital ialah grid piksel, masing-masing membawa nilai warna dalam ruang seperti RGB. Pengekstrak palet tidak memeriksa setiap piksel secara individu: foto 2 megapiksel mengandungi 2 juta titik data, yang akan lambat diproses dan akan mengembalikan ribuan warna yang sedikit berbeza daripada set yang berguna. Sebaliknya, alat ini mengambil sampel grid piksel pada selang tetap, mengumpul subset yang mewakili. Subset itu kemudian dimasukkan ke dalam algoritma pengkuantitian warna. Pendekatan paling biasa mengumpulkan warna serupa menggunakan kaedah pengelompokan, kadang-kadang dipanggil pemotongan median atau pembahagian k-means. Algoritma meletakkan setiap piksel yang disampel ke dalam salah satu daripada bilangan tetap baldi berdasarkan persamaan warna, kemudian mengira warna purata setiap baldi. Hasilnya ialah senarai kecil, biasanya 4 hingga 16 warna, yang bersama-sama mencakup ton visual dominan dalam imej. Warna yang muncul hanya di kawasan kecil terpencil mungkin terlepas, yang merupakan tingkah laku yang dijangka bukannya kecacatan.
Daripada warna dominan mentah kepada palet yang berguna
Output mentah pengekstrak palet ialah senarai warna yang disusun mengikut kekerapan, tetapi kekerapan sahaja tidak menjadikan palet. Foto hutan akan mengembalikan beberapa warna hijau yang terlalu serupa untuk digunakan dalam UI sebagai aksen berbeza. Kerja praktikal ialah memilih dan melaraskan. Mulakan dengan mengenal pasti satu warna sebagai utama anda: warna yang paling tersendiri dan paling tidak neutral. Daripada warna yang tinggal, cari paling banyak dua yang berbeza dengan warna utama dan antara satu sama lain. Itu menjadi aksen anda. Segala-galanya lagi, termasuk ton tak tepu yang sering dikembalikan pengekstrak dari bayangan dan ton pertengahan, boleh berfungsi sebagai neutral untuk latar belakang dan sempadan. Setelah anda mempunyai struktur kasar ini, anda hampir pasti perlu melaraskan nilai individu. Alat color-converter membolehkan anda memeriksa setiap warna dalam hex, RGB, dan HSL. HSL amat berguna di sini: anda boleh mengekalkan rona tetap dan mengalihkan kecerahan atau ketepuan untuk mewujudkan keluarga yang lebih ketat atau longgar tanpa meninggalkan keluarga warna yang sama.
Menyemak kontras: ambang WCAG untuk teks yang boleh dibaca
Setelah anda mempunyai warna calon untuk teks dan latar belakang, anda perlu menyemak sama ada kombinasi itu boleh dibaca. Garis Panduan Kebolehaksesan Kandungan Web (WCAG) mentakrifkan nisbah kontras untuk tujuan ini. Nisbah membandingkan luminans relatif dua warna: nilai 1:1 bermakna tiada kontras langsung (warna sama atas warna sama), dan 21:1 ialah maksimum (hitam atas putih). WCAG 2.1 Tahap AA memerlukan nisbah sekurang-kurangnya 4.5:1 untuk teks badan bersaiz normal, dan 3:1 untuk teks besar (18pt atau 14pt tebal). Tahap AAA menetapkan ambang lebih tinggi iaitu 7:1 dan 4.5:1 masing-masing. Anda tidak perlu mengira luminans secara manual. Penemuan utamanya ialah pasangan warna yang kelihatan baik kepada anda di bawah pencahayaan baik mungkin jatuh di bawah 4.5:1 pada skrin, dan garis panduan itu wujud tepat untuk kes tersebut. Selepas mengekstrak dan melaraskan warna, uji setiap pasangan teks-atas-latar belakang yang anda rancang untuk digunakan. Warna kelabu pertengahan yang dibaca dengan baik atas putih mungkin gagal sepenuhnya atas latar belakang beige cerah daripada palet yang diekstrak.
Buta warna: mensimulasikan cara pasangan kelihatan kepada pengguna yang terjejas
Kira-kira 1 dalam 12 lelaki dan 1 dalam 200 wanita mengalami sejenis kekurangan penglihatan warna. Jenis yang paling biasa ialah deuteranopia (sensitiviti berkurangan terhadap hijau), diikuti oleh protanopia (sensitiviti berkurangan terhadap merah). Tritanopia (sensitiviti berkurangan terhadap biru-kuning) lebih jarang. Bagi setiap jenis, sistem visual memetakan panjang gelombang tertentu kepada warna yang dilihat sama yang dilihat oleh penonton tidak terjejas sebagai berbeza. Masalah praktikal untuk palet ialah dua warna yang kelihatan jelas berbeza di bawah penglihatan normal boleh runtuh kepada ton yang sama bagi pengguna buta warna, menjadikannya tidak berguna untuk menyampaikan perbezaan, contohnya menggunakan hanya merah dan hijau untuk menandakan kejayaan dan ralat. Menjalankan simulasi buta warna menunjukkan cara palet kelihatan apabila saluran yang terjejas dimampatkan. Pasangan yang runtuh kepada warna kelabu atau coklat yang hampir sama ialah yang perlu dipertimbangkan semula: sama ada tingkatkan perbezaan kecerahan antara mereka supaya kontras kekal walaupun tanpa perbezaan rona, atau tambah isyarat sekunder (bentuk, label, corak) supaya warna bukan satu-satunya isyarat.
Lakukan secara tempatan: color-palette, color-blindness, dan color-converter
Ketiga-tiga langkah yang diterangkan dalam artikel ini boleh diselesaikan tanpa menghantar imej atau warna jenama anda ke mana-mana pelayan. Alat color-palette berjalan sepenuhnya dalam pelayar: anda menjatuhkan imej, ia mengambil sampel piksel secara tempatan dan mengembalikan warna dominan sebagai nilai hex. Tiada fail yang dihantar. Alat color-converter menerima kod hex dan menunjukkan warna yang sama dalam RGB dan HSL supaya anda boleh membuat pelarasan yang disasarkan pada kecerahan atau ketepuan sambil kekal dalam keluarga rona yang sama. Kedua-dua hex dan nilai yang ditukar hanya wujud dalam halaman. Alat color-blindness berfungsi secara terbalik: anda menjatuhkan imej dan ia merender simulasi deuteranopia, protanopia, dan tritanopia bagi imej tersebut, dikira dalam pelayar. Untuk menyemak palet dan bukan foto, eksport atau ambil tangkapan skrin swatch anda sebagai imej dahulu, kemudian jatuhkannya ke dalam simulator. Menggunakan ketiga-tiga alat secara berurutan, ekstrak daripada imej, laraskan dalam color-converter, kemudian eksport imej swatch dan sahkan dalam color-blindness, merangkumi aliran kerja penuh yang diterangkan di atas. Imej anda kekal pada peranti anda sepanjang masa, yang penting jika foto sumber mengandungi jenama yang belum diterbitkan atau identiti pelanggan yang belum dikeluarkan.
Alat dalam artikel ini
- Pengekstrak palet warnaEkstrak warna dominan daripada imej sebagai petak HEX. Salin mana-mana warna. Tiada muat naik.
- Simulator buta warnaSimulasikan protanopia, deuteranopia, tritanopia dan akromatopsia pada imej. Tiada muat naik.
- Penukar WarnaTukar warna antara HEX, RGB, HSL, HSV dan CMYK. Penyemak kontras WCAG disertakan. Tiada muat naik.
- Penjana Skema WarnaJana palet pelengkap, analog, triadik, tetradik dan monokromatik daripada warna asas. Tiada muat naik.
Soalan lazim
Berapa banyak warna yang biasanya dikembalikan oleh pengekstrak palet?
Kebanyakan alat mengembalikan antara 5 hingga 16 warna secara lalai, walaupun banyak yang membolehkan anda menetapkan kiraan. Mengembalikan lebih sedikit warna bermakna algoritma mesti mengumpulkan lebih banyak piksel bersama, yang boleh menggabungkan ton berbeza tetapi serupa. Mengembalikan lebih banyak warna boleh menghasilkan pendua hampir yang sukar digunakan secara tersendiri. Untuk palet UI, 6 hingga 8 warna biasanya merupakan titik permulaan praktikal.
Bolehkah palet yang diekstrak daripada imej secara automatik lulus kontras WCAG?
Tidak secara automatik. Warna dominan dalam gambar foto sering merupakan ton pertengahan dengan luminans sederhana, yang cenderung menghasilkan nisbah dalam julat 2:1 hingga 3:1 antara satu sama lain. Memenuhi ambang 4.5:1 untuk teks badan biasanya memerlukan mencerahkan nilai latar belakang atau menggelapkan nilai teks melebihi apa yang disediakan oleh pengekstrakan mentah. Pengekstrakan memberi anda titik permulaan; semakan kontras memberitahu anda berapa banyak pelarasan diperlukan.
Adakah nisbah kontras WCAG mengambil kira buta warna?
Sebahagiannya. Formula luminans WCAG berdasarkan kecerahan relatif, bukan rona, jadi pasangan kontras tinggi yang memenuhi 4.5:1 secara amnya akan kekal dapat dibezakan walaupun oleh pengguna buta warna kerana perbezaan kecerahan dikekalkan. Walau bagaimanapun, dua warna dengan luminans serupa tetapi rona berbeza, seperti merah dan hijau pada kecerahan yang sama, boleh lulus semakan kontras berasaskan luminans sambil masih tidak dapat dibezakan oleh pengguna deuteranopia. Menjalankan simulasi buta warna ialah cara yang betul untuk menyemak pembezaan peringkat rona secara berasingan daripada nisbah kontras.