Kontras Warna Halaman Web
April 26, 2009 – 03:46 by Dani Iswara. Words count: 457.Last updated: Thursday, June 4, 2009 at 23:41.
Merujuk pada W3C-Web Content Accessibility Guidelines (WCAG) 2.0 tentang penggunaan warna dan kontrasnya pada halaman web, jangan gunakan warna sebagai satu-satunya petunjuk dalam penyampaian informasi.
Konten web dianjurkan agar distinguishable, mudah dibedakan–dilihat dan didengar–termasuk kontras antara warna latar dan isi kontennya.
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).
Gambar 2 sering terjadi pada halaman web yang menggunakan latar berupa gambar. Kontras mungkin sudah cukup adekuat jika gambar ditampilkan. Tapi tidak jika ‘disable images’. 
Hal ini dapat dihindari dengan bantuan alat uji di bawah.
Beberapa alat uji kontras warna daring sesuai WCAG 2.0:
- 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.
Bacaan lain:
- 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 Mozilla 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.3 on openSUSE Linux
gdenarayana,
yg saya tulis ini jg banyak dari kesalahan sendiri..jd mohon maklum kalo blm bisa memenuhi apa yg saya tulis sendiri, bli.. 
ntahlah ternyata ada yg mikirin best practices sedemikiannya..
Comment by nomercy on May 6, 2009 at 23:54:13
using Mozilla 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 Mozilla Firefox 3.0.10 on Gentoo Linux
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 Mozilla 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 Mozilla Firefox 3.0.10 on Gentoo Linux
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 Mozilla 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 Mozilla Firefox 3.0.10 on Gentoo Linux
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 Mozilla 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 Mozilla Firefox 3.5.1 on Gentoo Linux
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 Mozilla 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)
Comment by dani on July 29, 2009 at 18:16:47
using Mozilla Firefox 3.5.1 on Gentoo Linux
Cahya,
coba maenin css halaman web pake web dev itu.
Comment by Cahya on July 30, 2009 at 00:42:09
using Mozilla 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
Comment by Dani Iswara on July 30, 2009 at 06:01:01
using Mozilla Firefox 3.5.1 on Gentoo Linux
Cahya,
gemana kalo coba dari tutorial CSS di w3schools.com
Comment by Cahya on July 31, 2009 at 06:02:39
using Mozilla 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
Comment by Dani Iswara on July 31, 2009 at 08:59:03
using Mozilla Firefox 3.5.1 on Gentoo Linux
Cahya,
saya yakin Cahya bisa belajar cepat. tapi bersabarlah.
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 Mozilla 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.
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 Mozilla Firefox 3.5.7 on Gentoo Linux
Dhany,
Ditunggu saja.
Boleh. Untuk bahan belajar bareng. Nanti saya sesuaikan dengan kondisi yang ada.