Pastikan Warna Teks 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.