Cek Kontras Warna Blog dengan Ekstensi Firefox
Persepsi visual atau kemampuan penglihatan para pengguna Web tentu berbeda-beda. Sehingga kontras warna menjadi penting. Memanusiakan konten halaman Web menjadi tuntutan tersendiri.
Bagi pengguna peramban Web Firefox (Fx; fx), tersedia beberapa perangkat untuk menguji keadekuatan komposisi kontras warna. Ada yang harus dicek daring (dalam jaringan; ‘online’), ada yang bisa luring (luar jaringan; ‘offline’). Ada pengetesan dengan cara manual, ada juga yang otomatis.
Untuk Firefox lawas, versi 1.5-3.5, perangkat Colour Contrast Analyser dari Gez Lemon, pengelola JuicyStudio.com, cukup praktis digunakan. Tapi tampaknya perangkat tersebut belum cukup stabil untuk versi 3.6+. Alternatifnya bisa memakai beberapa perangkat daring lain. Itu pun mesti dilakukan pengujian komposisi warna dengan cara manual.
Menguji kontras warna halaman weblog
Untuk tulisan tidak penting kali ini, tes dilakukan dengan memakai pengaya/’add-ons’ Fx, dalam hal ini ekstensi WCAG Contrast Checker atau colorChecker karya Rumoroso. Perangkat ini berbasis Panduan Aksesibilitas Konten Web versi Konsorsium WWW (W3C), yaitu Web Content Accessibility Guidelines (WCAG) 1 dan WCAG 2. Ekstensi colorChecker bisa dikombinasikan dengan ekstensi ColorZilla karya orang yang sama.
Gambar 1. Teks yang ditandai mungkin tampak cukup sesuai untuk mata normal.
Teks pada gambar 1 di atas memakai komposisi warna latar #efefef dan warna huruf #ddd.
Cara pengetesan:
- Buka Firefox atau peramban Web berbasis Gecko lainnya yang kompatibel. Misalnya Flock 2.5.6 yang bermesin Firefox 3.0.16.
- Nonaktifkan tampilan gambar untuk memudahkan. Di Linux, ada di menu ‘Edit’ » ‘Preferences’ » tab ‘Content’. Hilangkan tanda centang di pilihan ‘Load images automatically’.
- Unduh ekstensi WCAG Contrast Checker dari situs resminya. Kompatibel untuk versi Firefox 1.5 – 3.7a1pre. Start ulang Firefox.
- Buka halaman Web yang akan dites.
- Klik kiri (untuk yang bukan kidal) ikon colorChecker di sudut kiri bawah peramban Web atau di status bar. Bisa juga menggunakan kombinasi tombol alt+c di papan ketik/’keyboard’.
- Klik kiri tab ‘Document’.
- Klik kiri tombol ‘Test WCAG 2′ atau ‘Test WCAG 1′.
- Jika ada peringatan seperti gambar 2 di bawah, klik baris berwarna merah untuk mengetahui area mana yang kontrasnya bermasalah.
Gambar 2. Hasil pengecekan kontras warna dengan bantuan WCAG Contrast Checker.
Alternatif solusinya:
- Ubah komposisi warna huruf dan/atau latar.
- Perbesar ukuran huruf.
- Coba kembali komposisi dengan memasukkan kombinasi properti warna latar/’background’ dan teks/huruf/’foreground’ yang sesuai di kolom perangkat tersebut.
- Klik kiri tab ‘Element’.
- Cek hasilnya untuk kondisi mata normal/’Normal vision’ dan ‘Discromatopsia’.
Selamat mencoba. Jadikan halaman Web lebih manusiawi. :)
Eldo on April 1, 2010 at 15:49:17 using Firefox 3.5.5 on Windows XP:
Betul Mas Dani, saya rasa juga demikian bahwa pengaturan kontras sangat perlu diperhatikan karena tidak semua pengguna / pembaca blog adalah orang yang memiliki mata normal tapi ada juga yang memiliki rabun warna. Alhasil dia ngga akan bisa lihat teks. Artikel yang bagus mas.. :)
Oya untuk pertanyaan Mas Dani di Kesalahan Fatal pada Template sudah saya jawab, semoga membantu.. :)
Btw, templatenya bagus sangat elegant dan minimalis
dani on April 1, 2010 at 16:22:41 using Namoroka 3.6.2 on Arch Linux:
Eldo,
paparan kontras warna ini mungkin ngga perlu lagi jika banyak pengguna sudah memanfaatkan fitur aksesibilitas di perambannya masing-masing.
Makasi Mas Eldo. :)
Anis Fahrunisa on April 1, 2010 at 21:27:40 using Firefox 3.6 on Windows XP:
wah…setelah dicek, blog punya saya banyak error-nya, Mas! Maklum dulu dibuatnya hanya buat nyenangin mata sendiri. :) Ternyata ekstensi Firefox ini (seperti yang pernah Mas Dani utarakan beberapa waktu lalu pada komentar di blog saya) jauh lebih komplet daripada acceskey (semoga tidak dejavu lagi :)).
Makasih Mas, atas informasinya. Sekarang saya akan coba memodifikasi ulang segi kekontrasan ini di blog saya. :)
Salam.
dani on April 1, 2010 at 22:30:27 using Flock Sulfur 2.5.6 on GNU/Linux:
Anis Fahrunisa,
kayaknya belum banyak yang nerapin tes ini. Atau memang diabaikan karena merasa ada yang lebih penting. Tulisan ini memang untuk wacana saja. Sebenarnya terinspirasi juga dari tulisan Mas Anis dulu itu. :)
Anis Fahrunisa on April 1, 2010 at 23:27:36 using Firefox 3.6 on Windows XP:
Saya sudah memodifikasi ulang kekontrasan di blog saya. Semuanya lulus. Tapi warna yang dihasilkan jada sangat tegas! Ketika saya menggunakan WCAG2 level AAA saya menemukan satu error :) Error yang sama juga saya temukan pada blog Mas Dani :). Apakah cukup dengan lulus tes pada level AA? Atau memang lebih baik pada level AAA pun diusahakan untuk lulus juga?
Oh iya, satu lagi! Kalo untuk mengecek kekontrasan gambar ada gak adds on-nya, mas? :)
dani on April 1, 2010 at 23:53:31 using Namoroka 3.6.2 on Arch Linux:
Anis Fahrunisa,
saya belum ngecek lagi lebih detail. Maklum, theme ini bakal selalu beta. :) Makasi masukannya, Mas Anis. Untuk halaman percobaan, saya pakai referensi format XHTML ini. Sebelumnya memang ada masalah kontras di teks warna merah dan hijau yang masih generik.
Teorinya, untuk klaim level AAA, biasanya disertai tes langsung ke sampel pengguna.
yos on April 2, 2010 at 10:47:00 using Firefox 3.6.2 on Windows 7:
mas dani sebelmunya salam kenal dulu ya dari yos, tadi abiz baca komntar mas dani di kafegue.com mas dani kelihtnya ngerti bgt struktur css dan html sebuah webnya, ada yang mau saya tanyakan mas,,,
ada ngga mas efek negatif penggunaan nilai minus (-) pada margin, padingg di css, masalahnya css saya banyak nilai minusnya,,,
itu saja mas yang mau saya tanyakan…
dani on April 2, 2010 at 11:18:52 using Namoroka 3.6.2 on Arch Linux:
yos,
[OOT] halo Mas Yos, salam kenal. Saya bukan desainer/pengembang Web. Mungkin kebetulan pernah/sempat baca topik tersebut. Terima kasih apresiasinya.
Untuk nilai minus pada CSS, sependek yang saya tahu, jika memang dibutuhkan untuk visualisasi, sepertinya tidak masalah. Kecuali hal itu dibuat sedemikian rupa sehingga hanya mesin telusur Internet/’search engine’ yang tahu, tapi manusia pengunjung normal tidak dapat melihatnya. :)
iskandaria on April 2, 2010 at 13:19:27 using Firefox 3.6.2 on Windows XP:
Saya sudah mengetes kombinasi warna blog saya dengan tools di atas. Ternyata beberapa agak “bermasalah”. Mulai dari warna judul blog dan sub judulnya (pada header) hingga komposisi warna pada sidebar.
Maksud hati mau nyeni, tapi ternyata kombinasi warnanya masih kurang pas :)
dani on April 2, 2010 at 15:52:44 using Namoroka 3.6.2 on Arch Linux:
iskandaria,
perangkat ini lumayan membantu. Kadang suatu nilai seni belum tentu humanis. :)
Cahya on April 2, 2010 at 18:31:16 using Firefox 3.6.2 on Windows Vista:
Ekstensi ini sering nge-hang ditengah jalan makanya tidak pernah saya gunakan :(
dani on April 2, 2010 at 22:41:23 using Namoroka 3.6.2 on Arch Linux:
Cahya,
yang colorChecker? Kenapa nge-hang ya? Mungkin nanti ada yang lain laporan masalah hang. Saya biasanya make yang punya JuicyStudio di Fx lawas.
ipul on April 3, 2010 at 10:07:14 using Opera 10.10 on GNU/Linux:
kalo plugin untuk opera ada ga mas ? kalo ga ada terpaksa saya
harus make mozilla dulu dong??
dani on April 3, 2010 at 11:03:50 using Namoroka 3.6.2 on Arch Linux:
ipul, maaf, saya tidak tahu, Mas Ipul. Sependek yang pernah saya
baca, di Opera ada toolbar/fitur web development tersendiri selain
DragonFly yang serupa Firebug. Juga ada bookmarklet untuk desain
Web. Entah jika ada fitur cek kontras warnanya.
Cahya on April 9, 2010 at 15:50:58 using Opera 10.10 on GNU/Linux:
Hmm…, karena tidak bisa jalan pas diloading, aneh juga sih, hasil analisis-nya ga keluar-keluar Bli…
dani on April 9, 2010 at 16:44:21 using Namoroka 3.6.3 on Arch Linux:
Cahya,
konflik dengan pengaya lain? Kok saya ngga/belum pernah nemu masalah dengan pengaya ini ya?
Pakai hover, Jangan Lupa focus - Unessential Weblog on April 19, 2010 at 18:12:50 via WordPress abc:
[...] Berbeda hanya pada warnanya? Bagaimana dengan pengguna yang menyandang gangguan kontras warna? Cek kontras warna konten Web. [...]
Aksesibilitas Web Frontal - Unessential Weblog on April 20, 2010 at 16:48:01 via WordPress abc:
[...] Kaca pembesar saya tidak bisa membantu. Warna teksnya terlalu sulit dibaca. [...]
Tinjauan Blog Cekerholic.com - Unessential Weblog on April 22, 2010 at 11:19:33 via WordPress abc:
[...] warna kemerahan dan teks di latar gelap. Terutama bagi pengguna dengan gangguan kontras warna. Coba cek kontras warna dengan ekstensi Firefox (Dani Iswara [...]
Alasan Prasyarat Tinjauan Blog - Unessential Weblog on April 24, 2010 at 15:53:24 via WordPress abc:
[...] lolos tes kontras warna. [...]
Dibuka, Review Blog Manual - Unessential Weblog on April 24, 2010 at 15:54:33 via WordPress abc:
[...] lolos tes kontras warna. [...]
Pengecualian Aksesibilitas Web – Unessential Weblog on July 16, 2010 at 16:08:32 via WordPress abc:
[...] Kontras suara serupa butir 1 di atas. Silakan baca kembali tulisan tidak penting saya di blog ini, Cek Kontras Warna Blog dengan Ekstensi Firefox. Rekomendasi kontras warna tidak berlaku bagi huruf yang berukuran besar, seukuran 18 [...]