Teks Kurang Hitam di atas Latar Putih, Why?
Masih tentang tipografi pada blog. Anda sering menemukan warna teks kurang hitam di atas latar putih? Menurut Anda, apakah teks dengan warna tersebut mudah dibaca atau malah menyulitkan? Dari hasil penelusuran lewat mengintip source code, saya menemukan salah satu kode warna HTML yang digunakan untuk teks tersebut, yaitu #7a7a7a (abu-abu).
Warna lain yang pernah saya temukan yaitu dengan kode #7C7C7C dan #6E6E6E (masih keluarga abu-abu). Pertanyaan selanjutnya, mengapa pembuat theme/template sengaja memilih warna tersebut untuk teks dengan latar putih? Apa dasar logikanya, terutama dari sisi keterbacaan?
Saya sendiri tidak tahu apa alasannya. Kalau warna hitam (#000) di atas putih (#fff) dirasa terlalu kontras, menurut saya masih bisa dipilih warna #111, #222, atau #333 – yang tingkat/gradasi ketajamannya sedikit di bawah hitam.
Beberapa blog terkenal luar negeri saya lihat juga masih kurang memperhatikan masalah keterbacaan teks di atas latar putih ini. Termasuk pada warna link di sidebar, contohnya pada smashingmagazine.com (yang warna teks link sidebarnya abu-abu terang, dengan latar putih).
Ada yang tahu mengapa warna abu-abu masih digunakan pada latar putih?
Quick Link >>> Beri Komentar | Baca Ulang Posting
barangkali gak tahu cara mau merubahnya mas, atau memang ada unsur kesengajaan, why not? Thanks pembelajarannya selama ini mas
@Ahmad IM-bisnis, Saya juga satu prasangka dengan mas IM, mungkin juga karena itu “Dianggap” lebih elegant dari sisi desain, tapi kalau ditinjau dari sisi pembaca memang kurang cocok,
saya ada sedikit pertanyaan mas Is, kalau blog saya gimana tuh mas,??? kalau mau merubah di mana letak kodenya?
@ISMAIL, setelah saya intip kode CSS blog mas Ismail, kalau mau mengubah warna font pada postingan bisa menuju kode berikut ini (terletak pada
style.css).entry { text-align: left; line-height: 20px; padding-top: 8px; font-family: Arial, Verdana; font-size: 14px; color: #474747; }Nah, kode warna yang digunakan untuk font dalam posting blog mas Ismail yaitu #474747 (abu-abu). Kalau mau diganti lebih gelap bisa dengan kode #111, #222, atau #333
@iskandaria, Thanks a lot mas, sekarang tulisan blog saya bisa lebih terang, coba mas lihat, apa udah lebih baek gitu??
@ismail, udah lebih baik mas. Pake warna #333 kan?
@iskandaria, Siiip lah…
Mungkin bikinnya pakai Mac. Jadi warnanya lebih nyata.
Menurut saya, mungkin pertimbangan estetika. Atau situs-situs tersebut memang hanya ditujukan bagi pengguna non-penyandang disabilitas.
@dani,
Hehe, lagi-lagi permasalahan pada OS :p
Saya sendiri menyukai latar putih (tepatnya #FFFFF7) dengan teks berwarna hitam ringan (#333). Sekarang sedang trend menggunakan background bertekstur juga
Saya sendiri tidak bermasalah dengan 100% kontras atau hitam putih, tetapi ketika kita bertujuan ingin mengakomodir orang banyak dari berbagai kalangan masalah ini sebaiknya diperhatikan
Btw, smashing magazine memang bermasalah dengan usabilitas pada layoutnya. Sepertinya mereka membutuhkan UX desainer yang lebih baik :p
@ArdianZzZ, sepertinya tanpa harus melibatkan pertimbangan pengguna penyandang disabilitas, bagi mata normal, dari sisi ergonomis dan fisiologis (terkait kontraksi otot mata), kontras hitam di atas putih cukup melelahkan untuk membaca lama dibanding kontras variasi abu di atas pastel. Dengan catatan kontras layar komputer sudah diturunkan dan penerangan ruangan cukup.
@dani,
Hehe, memang benar
Mungkin untuk improvisasi dapat juga menambahkan tekstur pada latar
@dani, ups. Sebentar. Bukannya kombinasi teks abu-abu itu lebih tepat untuk latar putih ketimbang latar pastel bli? Menurut saya, untuk latar pastel, sebaiknya menggunakan warna teks hitam pekat dibanding abu-abu. Sebab kontras hitam pekatnya sudah diminimalisir oleh latar pastel
@iskandaria, tentang warna abu, saya menyebutnya varian abu. Dan yang relatif aman menurut WCAG 2.0 umumnya variasi semacam #000-#444 untuk latar pastel kebanyakan. Walau terlihat tampil ‘aman’ bagi mata normal, coba dicek dengan ColorChecker saja. Di halaman ini juga masih ada peringatannya.
@dani, Tentang peringatan, saya mau ngecek dulu ya
@dani, kalau soal ini, saya ikut mas Dani aja deh..
Mungkin sebabnya seperti yang Mas katakan diatas, agar tidak terlalu kontras. Saya juga kurang tahu. Namun pada tema saya secara default memakai warna sedikit di bawah hitam (#474747).
mungkin kalau benar2 hitam akan agak menyakitkan mata, entahlah
Mungkin agar berbeda dengan blog lainnya…
Terkadang warna yang tidak 100% berwarna hitam dapat pula menyejukkan mata dan tidak gampang lelah…
Tetapi tergantung juga dengan warna backgroundnya…
@Gede Lumbung, betul sekali mas. Tergantung pada warna latarnya. Contohnya blog saya ini. Sengaja saya pilih warna pastel untuk latarnya, biar tidak terlalu kontras. Semoga nyaman ketika membacanya ya.
Ini salah satu yang saya lakukan ketika mengedit beberapa hal menyangkut tipografi di blog saya kemarin mas is. default dari theme yang saya gunakan, font berwarna #333. lalu saya rubah jadi #000000, hasilnya ? sangat kontras sekali perbedaan pada sisi kenyamanan saat membaca. waktu menggunakan warna #000000 dengan latar putih, setelah selesai membaca, mata saya jadi lumayan silau. terutama jika membaca di kamar dgn penerangan yg minim. efek lainnya, mata saya jadi cepat lelah. jadi, saya memilih untuk menggunakan font dengan warna #444. sedikit lebih gelap dari warna #333.
@Blog Juragan, maksudnya #444 sedikit lebih terang dibanding #333 ya?
Untuk amannya kombinasi warna konten Web sesuai WCAG 2.0 (saat ini), bisa dicoba dikonfirmasi dengan ekstensi Fx ColorChecker.
@dani, wah iya, terimakasih koreksinya
. Tentang WCAG 2.0, Pengetahuan yang sangat baru bagi saya bli dani. sedang dalam pembelajaran lebih lanjut sama google. mengenai add on mozilla nya, sedang saya coba dulu, terimakasih, yang ini saya juga baru tahu. Dapat ilmu baru lagi 
eace: . oya, sebelumnya , salam kenal bli dani :thanks2
@Blog Juragan, saya ikut menyimak aja ya dialognya
Postingnya sama² hari ini ya mas is,
kalau saya sih masih menggunakan warna default mas is, bicara soal tipografi saya baru agak mudeng dari blognya mas is dan ardianz,
mungkin patut saya uprek² lagi codenya agar sesuai harapan dan mungkin warna kontras di blog saya yang menyebabkan visitors kabur…
makasih atas infonya mas
I suffer from dyslexia and have not suffered any dificulity, though my father who is (we think he was never tested when he was a kid!) does find it hard for white text on black .
kamu emang ahlinya typography, ampe mengkritik smashingmagazine.com (applause)
@AMYunus, saya cuma mencoba mengamati dari sudut pandang seorang pengunjung blog kok mas.
Kayak blog saya ya Mas Is, warnanya abu-abu kali ya itu? Udah lama banget nggak buka-buka css-nya. Dulu sempat ngedit waktu ngerubah font-nya jadi Georgia, tapi warnanya lupa
@isnuansa, iya tuh. Warna font posting blog mbak Nunik emang abu-abu. Setelah saya intip kode CSS-nya, ternyata saya menemukan kode warna yang digunakan untuk teks tersebut, yaitu #666666. Tepatnya, saya menemukan kode CSS seperti berikut ini.
#entry {
font-size: 13px;
color: #666666;
}
hmm.. saya sendiri juga kurang setuju dengan warna yang terlalu kontras,, dan terlalu kabur, karena bisa membuat mata lelah..
saya sendiri, menggunakan warna text dibawah warna hitam (antara #333333 hingga #777777), saya menggunakan warna hitam (#000000), hanya untuk heading..
Izin menyimak artikel yang ini Mas Is
===
Mas saya butuh penjelasan tentang bagian komentar:
Pertama: Bagaimana biar Nama dan link author (komentator) tidak italik, tapi bold
Kedua: Bagaimana agar sejak komentar pertama, tampilan komentar itu ada latar khusus, beda dengan warna latar postingan. Ya… seperti list komentar blog Mas Is inilah contohnya. Saya tunggu artikel yang membahas dua masalah yang saya sebutkan tadi ya
@Erdien, saya pending dulu ya Pak. Butuh energi besar untuk nulis posting yang Pak Erdien request itu :cd
@iskandaria, minta bantuan arwah ghost creator CSS dulu nih? hehhehe…
@iskandaria, Sip Mas Is, santai aza. Hukumnya nggak wajib koq, nggak sunnah juga, cuman jaiz aza hehehe…
Jadi jawabannya juga masih dalam “kemungkinan” ya mas is? Ada baiknya memang kita tanya satu persatu para developer tersebut. Siapa tau mereka mempunyai pandangan yang lain terkait pemilihan warna tersebut
@rismaka, dari beberapa pendapat pengomentar di atas memang masih kurang pasti kayaknya mas. Tapi opini tentang terkait kenyamanan baca masih agak masuk akal sih. Boleh juga tuh ditanya pada para web developer alasannya, siapa tau ada alasan lain selain demi kenyamanan baca.
@iskandaria,
Yeh, itulah pentingnya usability testing. Seperti halnya kebanyakan website yang mengeluarkan versi beta tujuannya untuk mengetahui bagaimana pendapat dari user/konsumennya. Desain sebuah web seperti halnya barang dagangan. Jika user tidak suka ya mereka tidak mau :p
Mungkin banyak blogger yang merasa bahwa ngeblog itu bebas, memang benar karena mereka ngeblog untuk dirinya sendiri, tapi bagaimana jika kita ngeblog dalam ranah professional (blog perusahaan misalnya). Jangan hanya dikembalikan kepada pemilik blog hehe…
@ardianzzz, setuju banget mas Ardian. Thx berat buat opininya :thumbup:
Iya yah,, blog saya latar putih tapi teksnya tidak terlalu hitam,, tapi untuk edit, kayaknya tidak dulu Mas Is,
Terima kasih infonya,,,
ijin pake linknya mas
thx ya
@Ahmad IM-bisnis, silakan mas. Nggak perlu pake izin kok.
Menurut saya sih warna teks hitam di atas latar belakang putih terlalu kontras, Bung. Makanya dipilih warna yang lebih soft sehingga jadi tidak ngejreng banget. Tapi ini cuma perkiraan saya saja ding, gak tahu sebenarnya bagaimana.
@Bung Eko, sepertinya alasan itu cukup masuk akal Bung. Tapi masalahnya, sebenarnya untuk teks berwarna hitam pekat sangat pas jika dikombinasikan dengan warna latar pastel kayak blog saya dan blog Bung Eko. Toh, warna pastel pada latar kan berfungsi meminimalisir kontras dari warna teks hitam.
Warna teks memang perlu diperhatikan, karena untuk kenyamanan membaca, kalau teks nyaman, maka orang suka membaca.
Alasannya bisa jadi untuk membuat pembaca betah berlama-lama nongkrongin blog tanpa mata terasa panas akibat kontras yang berlebihan.
@Agus Siswoyo, weh, sampe bisa panas segala matanya :ngakak
@iskandaria, online-nya sambil ngulek cabe sekilo mas. hahahaha…
blog saya pernah seperti itu, tapi setelah coba saya utak atik di css nya, y akhirnya hurufnya jadi lebih jelas dikit…
Saya sendiri menggunakan #333 untuk warna font Georgia di atas latar putih #fff. Kalau pake hitam #000 rasanya terlalu mencolok mata. Kalau mau pake font warna hitam, maka menurut saya backgroundnya jangan terlalu putih.
Pokoknya kalau tulisan hitam dengan latar putih itu terlalu mencolok menurut saya. Jadi harus ada yang ngalah salah satu.
aduh.. saia gak pernah sampe ke situ
sepertinya lagi gandrung ngomongin masalah typho yah? sukses2 nih ntar designer web indonesia… sip…
Mungkin ada mitos kali mas. Abu-abu memiliki hoki tersendiri. Hehehe
kalau di tempat saya bila ternyata kurang kontras mungkin lebih banyak faktor tidak pahamnya otak atik theme mas
iya mas… saya sekarang juga lagi sibuk otak atik warna
dan melihat dari beberapa web seperti tdw club dan lain-lain dengan latar putih pasti menggunakan text abu-abu hehehe dan terima kasih atas komposisi warnanya…
makasih banyak tipsnya mas….langsung praktek…
I believe that high contrast (black text on white bg or white text on black bg) makes it harder for people with dyslexia to read text.
mungkin saya perlu menggunakan latar berbeda untuk tiap postingan agar visitors tidak jenuh dan akan mencoba memilih warna yang soft
oia mas is, saya izin ambil 2 link dari mas is yang dari kafe28 dan kafegue buat post terbaru saya di malam ini
terimakasih
komentarnya saya sambung besok lagi, inet lola ni
@Gus Ikhwan, makasih buat linknya Gus. Soal latar berbeda untuk setiap posting, menurut saya beresiko membingungkan pengunjung. Tapi tidak masalah kalau mau ujicoba.
@iskandaria, oia linkinya ada di sini mas is http://mxwan.web.id/tata-cara-berkomentar-dengan-baik/
makasih atas linknya, sangat membantu sekali buat menambah reverensi..
saya akan mencoba seperti blogozine mas is…
makasih informasinya mas…
Mas is saya pun gak pakai warna text #000 tapi menggunakan #3b3b3b lebih ke abu2 gelap. Y nyerempet hitam lah :hammer
Hmmm..ga ngerti juga tuh mas..:D
Makasih ya infonya..
Salam kenal dari penjelajah kecil..yang lagi doyan jalan2 nih..heheh..
saya agak kurang mengerti masalah topografi, tapi mungkin itu mengantisipasi setelan kontras di layar komputer penggunanya. mungkin ya
Kalau menurut saya…kalau hitam di atas putih terlalu kontras dan terkesan tidak begitu elegan
Hmmm…numpang baca tips gan. Salam kenal jg.
nice blog..
salam kenal ya…
enjoy blogging..
ditunggu ya kunjungannya..
cukup ikutan menyimak saja mas Iskandar, semuanya sudah dibahas oleh teman-teman yang lebih paham
@PF, tidak dilarang kok Pak Aldy. Pasti cuma manggut-manggut ya ketika menyimak komentar teman-teman yang lebih ahli :p
Mas Is, teliti banget…tajam analisisnya. Saya ngga pernah memperhatikan sampai begitu lo. Thanks mas, dapat sesuatu yang baru. Kalau boleh intip juga dunk blog saya itu mas, dari segi tampilannya gmn? He..3x…trims sebelumnya.
@Sugiana Hadisuwarto, saya tidak akan menilai tampilan blog Pak Sugiana, tapi lebih kepada upaya link building yang berlebihan di dalam posting
Kenapa harus menyisipkan link yang sama secara berulang kali dalam satu artikel? Apalagi pada anchor-text yang sama. Menurut saya cukup satu atau dua kali saja (kalau dari sisi SEO). Itu sudah efektif. Terkecuali dimaksudkan untuk memperbesar peluang memperoleh komisi referral 
@iskandaria : makasih analisisnya mas…
saya pernah mencoba membuat lebih hitam tulisan di halaman posting blog dotcom saya, tapi gagal. Saya masih mencoba mempelajari caranya.
I heard that black text on white is easier on the eyes than white text on black, although black is certainly less strain on the eyes. I’m more of a fan of choosing in-betweens than having one or the other (call me a relativist)! I often settle for very light grays in my designs simply to get away from the white.
Kalau menurut saya, kontras teks di smashing magazine sudah cukup. Warna teks di sidebar sengaja seperti itu agar tidak konflik dengan teks di artikel utama.
Tidak semua harus kontras. Ada sebagian yang perlu dikurangi untuk menonjolkan elemen lain yang dianggap penting.
@Jeprie, berarti bagian posting dianggap lebih penting daripada menu navigasi di sidebar ya kalau begitu.
@Jeprie,
Itu yang saya maksud pertentangan dengan konsep kontras di aksesibilitas Web. Situs yang ‘usable’ berniat menonjolkan suatu bagian, tapi melupakan kontras (luminosity ratio) yang lain.
@dani,
Mungkin karena tidak ingin fokus pengguna terpecah karena pengaruh navigasi pada sidebar. Ya, itulah resiko menggunakan theme 2 kolom. Saking ingin lebih menonjolkan konten, kontras pada sidebar malah dikesampingkan.
wah ternyata latar putih dengan tulisan #000 di atasnya tidak disarankan ya. brati saya harus mengubah warna font nya. makasi infonya mas. saya baru tau
@andre,
Kembali kasih mas
nubi mau nanya ini boss..saya udah download pola metalnya.. cuma gk tau mesti di taruh mana ? trus cara menuhi layer baru dengan pola metal bagaimana ?