Ditulis oleh: Ditulis pada: 2/22/2018
Warna adalah salah satu unsur yang penting dari sebuah desain, termasuk pada desain sebuah web atau blog. Dengan warna dapat menampilkan konten web menjadi user friendly atau malah bisa menjadi sebaliknya jika salah dalam memilih warna.Dalam visualisasi, warna terbagi menjadi 2 bagian yaitu sebagai warna latar atau background dan warna bagian atasnya atau foreground, dan keduanya harus memiliki kontrak yang cukup agar konten yang disajikan bisa dilihat dan dinikmati dengan nyaman.
Namun masih banyak dari kita yang melupakan kontras warna foreground dan background ini terutama dalam mendesain tampilan blog, sehingga pengunjung harus melakukan usaha yang lebih keras untuk membaca konten, dan parahnya ini dapat menyebabkan pengunjung memutuskan untuk tidak meneruskan membaca konten. Untuk itu kita harus pastikan bahwa warna text harus kontras dengan warna background.
Bagi Anda yang sedang mencoba membuat template blog sendiri atau sedang belajar modifikasi template blog, mulai sekarang sebaiknya harus memperhatikan bahwa semua elemen teks harus memiliki kontras yang cukup antara warna teks dengan warna latar belakang atau dengan kata lain warna teks dengan warna background harus sesuai dengan ambang rasio kontras.
Perlu diketahui bahwa warna teks dengan warna background harus sesuai dengan ambang rasio kontras adalah merupakan hal yang penting. Karena beberapa pengguna atau pengunjung blog mungkin saja memiliki low vision dengan kontras yang rendah, khususnya dengan pengunjung ponsel. Sehingga jika warna teks dengan warna background di luar ambang rasio kontras, maka teks tersebut akan sulit dibaca.
Misalkan untuk daerah postingan dengan warna background putih
#FFFFFF, maka warna teks yang aman adalah antara #000000 - #555555. Jika warna teks menggunakan #666666 - #999999 maka teks memiliki rasio kontras yang kurang yang akan menyebabkan teks sulit untuk dibaca.Jika Anda senang bermain warna untuk elemen-elemen blog, maka Anda harus teliti dalam memilih warna, jangan hanya menuruti keindahan menurut mata Anda saja. Misalkan Anda menggunakan sebuah tombol dengan warna background kuning dengan warna teks putih, maka kita harus berjuang keras untuk membaca tulisannya, bahkan sampai menyipitkan mata pun ada kalanya teks tetap tidak terbaca.
Lalu bagaimana untuk mengecek rasio kontras antara warna teks dengan warna background di blog?
Beruntung tahun ini Google menambahkan lighthouse pada developer tool Google Chrome untuk audit halaman web. Dengan lighthouse kita bisa mengecek aksesibilitas halaman blog kita dengan mudah.
Silahkan klik kanan pada halaman blog Anda lalu pilih inspect, kemudian pilih tab Audits dan klik Perform an audit...
Silahkan tunggu hingga proses audit selesai dilakukan. Kemudian akan muncul hasil audit dan silahkan periksa bagian Accessibility.
Jika pada bagian itu terdapat Color Contrast is satisfactory > background and foreground colors do not have a sufficient contrast ratio, itu berarti ada elemen blog yang kurang kontras antara warna teks dengan warna background.
Silahkan cek bagian itu dengan klik toggle-nya yang akan menampilkan elemen apa saja yang memiliki kurang kontras warnanya.
Untuk mengecek kekontrasan warna teks dengan warna background, silahkan gunakan tool Color Contrast Analyzer.
Silahkan masukan warna teks pada bagian foreground color dan masukan juga warna background color. Jika ternyata warna yang Anda masukan FAIL, maka warna tersebut berarti kurang kontras. Silahkan coba mainkan slide warnanya sehingga warna background dan warna teks menjadi kontras dengan hasil PASS.
Sebagaimana yang telah diumumkan oleh Google bahwa kini kecepatan merupakan salah satu faktor ranking di SERP, dan lighthouse adalah salah satu tool yang direkomendasikan untuk mengecek kecepatan, performa, dan aksesibilitas sebuah halaman blog.
Dan masalah kekontrasan warna ini menjadi salah satu faktor aksesibilitas sebuah halaman dan penting untuk dilakukan sebaik mungkin agar pengunjung menjadi nyaman dalam membaca konten-konten blog.
Semoga bermanfaat.