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.

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.
Kombinasi teks berwarna putih di atas latar hitam yang terlalu kontras.

Gambar 1. Teks berkode warna fff (putih) dikombinasikan dengan latar berkode warna 000 (hitam).

Kombinasi teks berwarna abu di atas latar hitam yang kurang adekuat kontrasnya.

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: Bacaan lain: Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com.

You are free to share (copy, distribute, transmit) & adapt this blog post under the similar license (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported; CCA-NC-SA 3.0 Unported). Please put these links on your copy:
Taken from: Kontras Warna Halaman Web by Dani Iswara.

Unimportant Related/Random Posts

You may also read list of most popular posts and most popular tags of Dani Iswara .Net.

20 Responses to post titled: Kontras Warna Halaman Web

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

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

  3. 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?

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

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

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

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

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

  9. 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?

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

  11. 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

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

  13. 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

  14. 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

  15. 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

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

  17. 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.

  18. 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.

Trackbacks/Pingbacks

  1. Pingback by Web Usability-Accessibility on Hover and Focus - Dani Iswara .Net on June 5, 2009 at 00:16:06
    WordPress abc

    [...] is better for elderly people. Check it using “Colour Contrast Analyser” or read on web page color contrast (in bahasa Indonesia). Underline and/or border style would be help to make it clearly. Especially [...]

  2. Pingback by Web Readability on Dark Background - Dani Iswara .Net on June 8, 2009 at 14:01:32
    WordPress abc

    [...] you may visit my previous post, Web Page Color Contrast based on Web Content Accessibility Guidelines (WCAG) 2.0 in bahasa [...]

Sorry, for some reasons (sometimes due to sp*ms attack), the comment form is closed at this time. If You have any suggestions, please contact me. Thank you.

Dani Iswara .Net

Return to TOP
›› Older entries: Redesain Weblog Satu Kolom
‹‹ Newer entries: Medical Blog with Web Standards, Accessibility, and Usability