Diperbarui 31 Juli 2010 oleh Dani Iswara
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. :)
22 tanggapan untuk “Cek Kontras Warna Blog dengan Ekstensi Firefox”
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
Eldo,
paparan kontras warna ini mungkin ngga perlu lagi jika banyak pengguna sudah memanfaatkan fitur aksesibilitas di perambannya masing-masing.
Makasi Mas Eldo. :)
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.
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. :)
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? :)
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.
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…
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. :)
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 :)
iskandaria,
perangkat ini lumayan membantu. Kadang suatu nilai seni belum tentu humanis. :)
Ekstensi ini sering nge-hang ditengah jalan makanya tidak pernah saya gunakan :(
Cahya,
yang colorChecker? Kenapa nge-hang ya? Mungkin nanti ada yang lain laporan masalah hang. Saya biasanya make yang punya JuicyStudio di Fx lawas.
kalo plugin untuk opera ada ga mas ? kalo ga ada terpaksa saya
harus make mozilla dulu dong??
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.
Hmm…, karena tidak bisa jalan pas diloading, aneh juga sih, hasil analisis-nya ga keluar-keluar Bli…
Cahya,
konflik dengan pengaya lain? Kok saya ngga/belum pernah nemu masalah dengan pengaya ini ya?
[…] Berbeda hanya pada warnanya? Bagaimana dengan pengguna yang menyandang gangguan kontras warna? Cek kontras warna konten Web. […]
[…] Kaca pembesar saya tidak bisa membantu. Warna teksnya terlalu sulit dibaca. […]
[…] warna kemerahan dan teks di latar gelap. Terutama bagi pengguna dengan gangguan kontras warna. Coba cek kontras warna dengan ekstensi Firefox (Dani Iswara […]
[…] lolos tes kontras warna. […]
[…] lolos tes kontras warna. […]
[…] 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 […]