Kontras Warna Halaman Web
Posted: April 26, 2009 at 03:46:06 by Dani Iswara. Words count: 457.
Last updated: June 4, 2009 at 23:41:20.
Use of Color: 1.4.1 Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)Contoh sederhananya pada suatu pengisian formulir web: "Kotak/kalimat berwarna merah wajib diisi!" Jika pengguna tidak mengalami gangguan penglihatan warna (buta/buta parsial terhadap warna), mungkin tidak masalah. Hal yang sama sebenarnya juga berlaku pada 'captcha' ('capture characters') yang bukan berupa teks, tapi hanya berbasis grafis saja (tanpa dilengkapi pilihan suara/audio).
Rasio Kontras Warna
Beberapa hal terkait 'contrast ratio':- Berupa perbandingan 1 to 21 (sering ditulis 1:1 hingga 21:1). Ada perangkat uji untuk mengukur hal ini.
- Karena penulis tidak dapat mengontrol bagaimana teks disajikan di peramban pengguna (misal: 'font smoothing' atau 'anti-aliasing'), maka kontras untuk teks dievaluasi tanpa 'anti-aliasing'.
- Jika
background-color(pada penulisan Cascading Style Sheets [CSS]) tidak ditentukan, akan diasumsikan latar berwarna putih. - Garis tepi (
border) di sekitar huruf dapat mempengaruhi kontras. - WCAG hanya menilai kode warna yang dipakai penulis/pengelola. Bukan yang ditentukan oleh pengguna atau modifikasi peramban.
Kontras Warna, Estetika, Kesehatan
Selain faktor aksesibilitas, kontras pada konten juga bisa dilihat dari sisi estetika dan fisiologis. Kontrasnya mungkin memang sudah sesuai dengan rekomendasi W3C-WCAG 2.0. Tapi belum tentu lolos jika dilihat dari kacamata seni bahkan kesehatan. Kombinasi warna mencolok mungkin tepat digunakan pada tombol yang menggoda pengguna untuk segera melanjutkan dengan klik, 'call to action'. Atau pada area halaman web tertentu yang menawarkan iklan. Di sisi lain, warna yang terlalu kontras pada huruf dan latar justru akan lebih cepat melelahkan otot mata jika digunakan pada keseluruhan konten. Lihat Gambar 1 dan 2.
Gambar 1. Teks berkode warna fff (putih) dikombinasikan dengan latar berkode warna 000 (hitam).
Gambar 2. Teks berkode warna 333 (varian abu/hitam) dikombinasikan dengan latar berkode warna 000 (hitam).
- Luminosity Colour Contrast Ratio Analyser oleh JuicyStudio.com. Tersedia juga ekstensinya untuk Firefox.
- Color Contrast Checker oleh WebAIM.org.
- AccessColor Tool oleh AccessKeys.org.
- Colour Contrast Check oleh snook.ca.
- Techniques for Accessibility Evaluation and Repair Tools.
- Testing The Readability of Web Page Colors. Kerja sama Adaptive Technology Resource Centre, University of Toronto, Toronto, Canada dan School of Occupational Therapy, Hadassah-Hebrew University, Jerusalem, Israel.
- Sekilas WCAG 2.0.
Comment by gdenarayana on May 6, 2009 at 21:43:28
using Firefox 3.0.1 on Windows XP
wah yang ini penting bli, saya dulu pernah samarkan antara background dengan warna font tulisannya padahal background di content udah putih tapi tetep ndak lolos dengan kriteria utk user lainnya.
dulu pake fujitsu itu, wah saya jadi tau klo mesin juga ndak bisa diakalin, yah terpaksa background saya normalkan lagi semuanya, yang wajar aja biar ndak buat susah semua orang :)
mau cek2 dulu URL contras ratio diatas.
suksma bli :)
Comment by Dani Iswara on May 6, 2009 at 23:16:27
using Konqueror 4.1 on SuSE
gdenarayana,
ntahlah ternyata ada yg mikirin best practices sedemikiannya.. :) yg saya tulis ini jg banyak dari kesalahan sendiri..jd mohon maklum kalo blm bisa memenuhi apa yg saya tulis sendiri, bli.. :)
Comment by nomercy on May 6, 2009 at 23:54:13
using Firefox 3.0.10 on Linux Mint 6
hebatnya kalau dokter yg ngebahas ... top markotop *sambil acungkan jari jempol*
oya mas Dani, tolong dong kasih masukan mengenai theme blog saya apakah ada hal-hal yg salah atau kurang baik ... bolehkan minta sarannya?
Comment by Dani Iswara on May 7, 2009 at 08:40:37
using Firefox 3.0.10 on Gentoo
nomercy,
wah makasi, pak..tapi saya masi bercermin dari kesalahan sendiri nih..kapan-kapan akan saya follow-up tantangannya.. :)
Comment by rismaka on May 7, 2009 at 13:49:57
using Firefox 3.0.10 on Windows XP
Saya juga ikutan donk mas. Kasih saran juga ya buat themes blog saya yg udah errror dimana2 klo dilihat dari W3C-WCAG 2.0-nya :)
Comment by Dani Iswara on May 7, 2009 at 14:53:58
using Firefox 3.0.10 on Gentoo
rismaka,
boleh mas, silakan liat dulu rujukan berikut: universal design award, setelah memenuhi sebagian besar kriterianya--utk kriteria yg tdk bisa dipenuhi, boleh diberi alasan yg jelas kok, lalu bisa kita review bareng-2.. :)
Comment by uwiwu on May 11, 2009 at 15:13:10
using Firefox 3.0.10 on Windows XP
yah! dan! makin panjang nih masa testing web....stop penjelasan ini! jangan edukasi para klien nanti mereka jadi bawel
Comment by Dani Iswara on May 11, 2009 at 15:37:00
using Firefox 3.0.10 on Gentoo
uwiwu/uwiuw,
kayaknya sih ngga banyak konsumen yg bakal peduli, kan masi banyakan pengen yg fancy.. :)
Comment by Cahya on July 29, 2009 at 08:38:45
using Firefox 3.5.1 on Windows Vista
Bli, kemarin dapatnya seperti ini di CSS filenya:
body {
margin:0 auto;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color:#000000;
background: #000000 url(images/bg_repeat.jpg) repeat-y center top;
Terus gimana?
Comment by Dani Iswara on July 29, 2009 at 12:30:52
using Firefox 3.5.1 on Gentoo
Cahya,
color ama background-nya serupa warnanya. sekalian aja misal warna latar dipakein putih (#fff).
kalo mo coba-coba online (bukan di localhost), bisa instal ekstensi web developer-nya fx. trus bisa di-oprek dari sana CSS dan (X)HTML-nya. :)
Comment by Cahya on July 29, 2009 at 14:54:41
using Firefox 3.5.1 on Windows Vista
Saya ganti backgroudnya jadi #FFFFFF, semoga itu bermanfaat, saya udah pakai plug-in web developer sih (cuma ga tahu banyak apa fungsinya) :D
Comment by dani on July 29, 2009 at 18:16:47
using Firefox 3.5.1 on Gentoo
Cahya,
coba maenin css halaman web pake web dev itu. :)
Comment by Cahya on July 30, 2009 at 00:42:09
using Firefox 3.5.1 on Windows Vista
Wah, ilmu saya belum sampai ke sana Bli, mungkin nanti saya beli buku panduan ringan tentang mengedit CSS dulu.
Masalah kan ga seperti XHTML, kita bisa tahu misalnya kekurangan komponen tittle pada sebuah bagian yang seharusnya mengandung itu.
Tapi kalau CSS masih jauh dari jangkauan pemula :D
Comment by Dani Iswara on July 30, 2009 at 06:01:01
using Firefox 3.5.1 on Gentoo
Cahya,
gemana kalo coba dari tutorial CSS di w3schools.com
Comment by Cahya on July 31, 2009 at 06:02:39
using Firefox 3.5.1 on Windows Vista
Nyerah deh, akhirnya saya ganti dengan CSS yang lebih ramah, buat gambar header sendiri yang lebih ringan (harap rendingnya lebih baik, tapi ga tahu kalau kecepatan loading halaman).
Belajar CSS 24 jam, ga bisa masuk, kayaknya terlalu maksa, he he, akhirnya saya buat validasi pake "Good Mood Validation" (icon-nya sudah tak pasang di blog) biar ga ada yang protes :D
Comment by Dani Iswara on July 31, 2009 at 08:59:03
using Firefox 3.5.1 on Gentoo
Cahya,
saya yakin Cahya bisa belajar cepat. tapi bersabarlah. :D
masalah ikon dan penanda valid lainnya, para ahli berpendapat :"tidak perlu." kalo pun valid, ya sebaiknya memang demikian. :)
Comment by Dhany on January 18, 2010 at 17:37:03
using Firefox 3.5.7 on Windows XP
Bli, kalo ada waktu mau minta tolong buat diagnosiskan blog saya dong. Dari sisi standar dan dari aspek kesehatan. Dua hal ini baru saya temukan di bli Dani.
Apa aja yang situ mau bilang.
Saya yakin banyak sekali kurang2nya, tapi kekritisan yang membangun pasti saya perhatikan walaupun koreksinya mungkin tidak secepatnya. :D
Satu hal, saya masih 'keukeuh' mau miara background gelap. :)
Makasih banget sebelumnya.
Comment by Dani Iswara on January 18, 2010 at 17:47:55
using Firefox 3.5.7 on Gentoo
Dhany,
Boleh. Untuk bahan belajar bareng. Nanti saya sesuaikan dengan kondisi yang ada. :) Ditunggu saja.