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?
Menu Lainnya »» Atas » Depan » Arsip » Kontak » Bawah
Add KafeGue di Facebook 
Follow KafeGue di Twitter
Tautan Cepat »» Beri Komentar | Baca Ulang Posting
Baca Komentar | Menuju Posting Terbaru
Posting Terkait :
- Kenapa Harus Takut Kehilangan Pembaca Blog Anda?
- Maaf, Saya Bukan Master, Blogger Terkenal atau Gila Trafik
- Di Balik Larangan Penggunaan Floating Script pada TOS IdBlogNetwork
- 3 Kriteria Penilaian Saya untuk Merekomendasikan Blog yang Layak Jadi Publisher IBN
- Facebook Jadi Penyumbang Trafik Terbesar Blog Ini untuk Referrer Site
WordPress 3.0.4
[...] Teks Kurang Hitam di atas Latar Putih, Why? [...]
Firefox 3.6.3 | Windows XP
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
Google Chrome 5.0.375.99 | GNU/Linux
@andre,
Kembali kasih mas :)
Firefox 3.6.6 | Windows 7
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.
Firefox 3.6.6 | Windows XP
@Jeprie, berarti bagian posting dianggap lebih penting daripada menu navigasi di sidebar ya kalau begitu.
Firefox 3.6.8 | Arch Linux
@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.
Google Chrome 5.0.375.99 | GNU/Linux
@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.
Firefox 3.6.2 | Windows 7
saya pernah mencoba membuat lebih hitam tulisan di halaman posting blog dotcom saya, tapi gagal. Saya masih mencoba mempelajari caranya.
Firefox 3.6.4 | Windows XP
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.
Firefox 3.6.3 | Ubuntu 10.04
@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 :D
Firefox 3.6.3 | Ubuntu 10.04
cukup ikutan menyimak saja mas Iskandar, semuanya sudah dibahas oleh teman-teman yang lebih paham :D
Firefox 3.6.3 | Ubuntu 10.04
@PF, tidak dilarang kok Pak Aldy. Pasti cuma manggut-manggut ya ketika menyimak komentar teman-teman yang lebih ahli :p
Firefox 3.6.3 | Windows XP
nice blog..
salam kenal ya…
enjoy blogging..
ditunggu ya kunjungannya.. :)
Firefox 3.5.9 | Windows XP
Hmmm…numpang baca tips gan. Salam kenal jg.
Firefox 3.6.3 | Windows 7
Kalau menurut saya…kalau hitam di atas putih terlalu kontras dan terkesan tidak begitu elegan
Firefox 3.6.3 | Windows XP
saya agak kurang mengerti masalah topografi, tapi mungkin itu mengantisipasi setelan kontras di layar komputer penggunanya. mungkin ya :)
Firefox 3.6.3 | Windows 7
Hmmm..ga ngerti juga tuh mas..:D
Makasih ya infonya..
Salam kenal dari penjelajah kecil..yang lagi doyan jalan2 nih..heheh..
Firefox 3.6.3 | Windows XP
Mas is saya pun gak pakai warna text #000 tapi menggunakan #3b3b3b lebih ke abu2 gelap. Y nyerempet hitam lah :hammer
Firefox 3.6.3 | Windows XP
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
Firefox 3.6.3 | Ubuntu 10.04
@Gus Ikhwan, makasih buat linknya Gus. Soal latar berbeda untuk setiap posting, menurut saya beresiko membingungkan pengunjung. Tapi tidak masalah kalau mau ujicoba.
Firefox 3.5 | Windows XP
@iskandaria, oia linkinya ada di sini mas is httpxxx://mxwan.web.id/tata-cara-berkomentar-dengan-baik/
makasih atas linknya, sangat membantu sekali buat menambah reverensi..
saya akan mencoba seperti blogozine mas is…
Firefox 3.6.3 | Windows XP
makasih banyak tipsnya mas….langsung praktek…
Google Chrome 5.0.375.70 | Windows Vista
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…
Firefox 3.6.3 | Windows XP
kalau di tempat saya bila ternyata kurang kontras mungkin lebih banyak faktor tidak pahamnya otak atik theme mas
Firefox 3.6.3 | Windows XP
Mungkin ada mitos kali mas. Abu-abu memiliki hoki tersendiri. Hehehe
Safari 4.0 | iPhone iOS 3.0
sepertinya lagi gandrung ngomongin masalah typho yah? sukses2 nih ntar designer web indonesia… sip…
Firefox 3.6.3 | Windows 7
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.
Firefox 3.5.9 | Windows XP
blog saya pernah seperti itu, tapi setelah coba saya utak atik di css nya, y akhirnya hurufnya jadi lebih jelas dikit…
Google Chrome 5.0.375.70 | Windows XP
Alasannya bisa jadi untuk membuat pembaca betah berlama-lama nongkrongin blog tanpa mata terasa panas akibat kontras yang berlebihan.
Firefox 3.6.3 | Ubuntu 10.04
@Agus Siswoyo, weh, sampe bisa panas segala matanya :ngakak
Google Chrome 5.0.375.70 | Windows XP
@iskandaria, online-nya sambil ngulek cabe sekilo mas. hahahaha…
Firefox 3.6.3 | Windows XP
Warna teks memang perlu diperhatikan, karena untuk kenyamanan membaca, kalau teks nyaman, maka orang suka membaca.
Firefox 3.5.2 | Windows XP
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. :D
Firefox 3.6.3 | Ubuntu 10.04
@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.
Firefox 3.5.9 | Windows XP
ijin pake linknya mas
thx ya
Firefox 3.6.3 | Ubuntu 10.04
@Ahmad IM-bisnis, silakan mas. Nggak perlu pake izin kok.
Firefox 3.6.2 | Windows XP
Iya yah,, blog saya latar putih tapi teksnya tidak terlalu hitam,, tapi untuk edit, kayaknya tidak dulu Mas Is,
Terima kasih infonya,,,
Firefox 3.6.3 | Windows XP
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 :)
Firefox 3.6.3 | Ubuntu 10.04
@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.
Google Chrome 5.0.375.70 | Windows XP
@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…
Google Chrome 6.0.408.1 | Windows XP
@ardianzzz, setuju banget mas Ardian. Thx berat buat opininya :thumbup:
Opera 9.52 | Windows XP
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 :)
Firefox 3.6.3 | Ubuntu 10.04
@Erdien, saya pending dulu ya Pak. Butuh energi besar untuk nulis posting yang Pak Erdien request itu :cd
Google Chrome 5.0.375.70 | Windows XP
@iskandaria, minta bantuan arwah ghost creator CSS dulu nih? hehhehe…
Opera 9.52 | Windows XP
@iskandaria, Sip Mas Is, santai aza. Hukumnya nggak wajib koq, nggak sunnah juga, cuman jaiz aza hehehe… :)
Firefox 3.6.3 | Windows XP
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..
Firefox 3.6.3 | Windows XP
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 :-(
Firefox 3.6.3 | Ubuntu 10.04
@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;
}
Google Chrome 5.0.375.70 | Windows XP
kamu emang ahlinya typography, ampe mengkritik smashingmagazine.com (applause)
Firefox 3.6.3 | Ubuntu 10.04
@AMYunus, saya cuma mencoba mengamati dari sudut pandang seorang pengunjung blog kok mas.
Firefox 3.5 | Windows XP
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
Google Chrome 5.0.375.3 | Windows 7
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.
Namoroka 3.6.3 | Arch Linux
@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. :)
Google Chrome 5.0.375.3 | Windows 7
@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 :Peace: . oya, sebelumnya , salam kenal bli dani :thanks2
Firefox 3.6.3 | Ubuntu 10.04
@Blog Juragan, saya ikut menyimak aja ya dialognya :cool:
Firefox 3.5.5 | Windows 7
Mungkin agar berbeda dengan blog lainnya… :D
Terkadang warna yang tidak 100% berwarna hitam dapat pula menyejukkan mata dan tidak gampang lelah…
Tetapi tergantung juga dengan warna backgroundnya…
Firefox 3.6.3 | Ubuntu 10.04
@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.
Firefox 3.6.3 | Windows XP
mungkin kalau benar2 hitam akan agak menyakitkan mata, entahlah :-)
Firefox 3.6.3 | Windows 7
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).
Namoroka 3.6.3 | Arch Linux
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.
Firefox 3.0b5 | GNU/Linux
@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
Namoroka 3.6.3 | Arch Linux
@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. :)
Firefox 3.0.19 | Windows XP
@dani,
Hehe, memang benar :)
Mungkin untuk improvisasi dapat juga menambahkan tekstur pada latar
Firefox 3.6.3 | Ubuntu 10.04
@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 :)
Namoroka 3.6.3 | Arch Linux
@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. :)
Google Chrome 6.0.408.1 | Windows XP
@dani, Tentang peringatan, saya mau ngecek dulu ya :)
Google Chrome 5.0.375.70 | Windows 7
@dani, kalau soal ini, saya ikut mas Dani aja deh..
Firefox 3.5.9 | Windows XP
barangkali gak tahu cara mau merubahnya mas, atau memang ada unsur kesengajaan, why not? Thanks pembelajarannya selama ini mas :)
Firefox 3.6.3 | Windows XP
@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?
Google Chrome 6.0.408.1 | Windows XP
@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
Firefox 3.6.4 | Windows XP
@iskandaria, Thanks a lot mas, sekarang tulisan blog saya bisa lebih terang, coba mas lihat, apa udah lebih baek gitu??
Firefox 3.6.3 | Ubuntu 10.04
@ismail, udah lebih baik mas. Pake warna #333 kan? :)
Firefox 3.6.4 | Windows XP
@iskandaria, Siiip lah…