Cek Kontras Warna Blog dengan Ekstensi Firefox

Noted: Thursday, April 1, 2010 at 04:39:31. Words count: 389.
Last updated: Saturday, July 31, 2010 at 09:30:07.

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.

Deretan huruf dengan kontras yang kurang.

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:

  1. Buka Firefox atau peramban Web berbasis Gecko lainnya yang kompatibel. Misalnya Flock 2.5.6 yang bermesin Firefox 3.0.16.
  2. Nonaktifkan tampilan gambar untuk memudahkan. Di Linux, ada di menu ‘Edit’ » ‘Preferences’ » tab ‘Content’. Hilangkan tanda centang di pilihan ‘Load images automatically’.
  3. Unduh ekstensi WCAG Contrast Checker dari situs resminya. Kompatibel untuk versi Firefox 1.5 – 3.7a1pre. Start ulang Firefox.
  4. Buka halaman Web yang akan dites.
  5. 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’.
  6. Klik kiri tab ‘Document’.
  7. Klik kiri tombol ‘Test WCAG 2’ atau ‘Test WCAG 1’.
  8. Jika ada peringatan seperti gambar 2 di bawah, klik baris berwarna merah untuk mengetahui area mana yang kontrasnya bermasalah.

Tes kontras warna menunjukkan kegagalan di area tertentu.

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.
    1. Klik kiri tab ‘Element’.
    2. Cek hasilnya untuk kondisi mata normal/’Normal vision’ dan ‘Discromatopsia’.

Selamat mencoba. Jadikan halaman Web lebih manusiawi. :)

Dani Iswara, [myfirstnamelastname]@gmail.com.

unEssential.

22 comments to "Cek Kontras Warna Blog dengan Ekstensi Firefox"

  1. Eldo

    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

  2. dani

    Eldo,
    paparan kontras warna ini mungkin ngga perlu lagi jika banyak pengguna sudah memanfaatkan fitur aksesibilitas di perambannya masing-masing.
    Makasi Mas Eldo. :)

  3. Anis Fahrunisa

    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.

  4. dani

    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. :)

  5. Anis Fahrunisa

    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? :)

  6. dani

    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.

  7. yos

    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…

  8. dani

    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. :)

  9. iskandaria

    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 :)

  10. dani

    iskandaria,
    perangkat ini lumayan membantu. Kadang suatu nilai seni belum tentu humanis. :)

  11. Cahya

    Ekstensi ini sering nge-hang ditengah jalan makanya tidak pernah saya gunakan :(

  12. dani

    Cahya,
    yang colorChecker? Kenapa nge-hang ya? Mungkin nanti ada yang lain laporan masalah hang. Saya biasanya make yang punya JuicyStudio di Fx lawas.

  13. ipul

    kalo plugin untuk opera ada ga mas ? kalo ga ada terpaksa saya
    harus make mozilla dulu dong??

  14. dani

    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.

  15. Cahya

    Hmm…, karena tidak bisa jalan pas diloading, aneh juga sih, hasil analisis-nya ga keluar-keluar Bli…

  16. dani

    Cahya,
    konflik dengan pengaya lain? Kok saya ngga/belum pernah nemu masalah dengan pengaya ini ya?

  17. Pakai hover, Jangan Lupa focus - Unessential Weblog

    […] Berbeda hanya pada warnanya? Bagaimana dengan pengguna yang menyandang gangguan kontras warna? Cek kontras warna konten Web. […]

  18. Aksesibilitas Web Frontal - Unessential Weblog

    […] Kaca pembesar saya tidak bisa membantu. Warna teksnya terlalu sulit dibaca. […]

  19. Tinjauan Blog Cekerholic.com - Unessential Weblog

    […] warna kemerahan dan teks di latar gelap. Terutama bagi pengguna dengan gangguan kontras warna. Coba cek kontras warna dengan ekstensi Firefox (Dani Iswara […]

  20. Alasan Prasyarat Tinjauan Blog - Unessential Weblog

    […] lolos tes kontras warna. […]

  21. Dibuka, Review Blog Manual - Unessential Weblog

    […] lolos tes kontras warna. […]

  22. Pengecualian Aksesibilitas Web – Unessential Weblog

    […] 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 […]

Leave comment


All XHTML markups will be held for moderation. Keep on topic, please.