Pastikan Warna Teks Harus Kontras Dengan Warna Background

Bagi Anda yang sedang mencoba menciptakan template blog sendiri atau sedang berguru modifikasi template blog, mulai kini sebaiknya harus memperhatikan bahwa semua elemen teks harus mempunyai 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 yaitu merupakan hal yang penting. Karena beberapa pengguna atau pengunjung blog mungkin saja mempunyai low vision dengan kontras yang rendah, khususnya dengan pengunjung ponsel. Sehingga bila warna teks dengan warna background di luar ambang rasio kontras, maka teks tersebut akan sulit dibaca.

Misalkan untuk tempat postingan dengan warna background putih #FFFFFF, maka warna teks yang kondusif yaitu antara #000000 - #555555. Jika warna teks memakai #666666 - #999999 maka teks mempunyai rasio kontras yang kurang yang akan menjadikan teks sulit untuk dibaca.

Jika Anda bahagia bermain warna untuk elemen-elemen blog, maka Anda harus teliti dalam menentukan warna, jangan hanya menuruti keindahan berdasarkan mata Anda saja. Misalkan Anda memakai sebuah tombol dengan warna background kuning dengan warna teks putih, maka kita harus berjuang keras untuk membaca tulisannya, bahkan hingga 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 sanggup mengecek aksesibilitas halaman blog kita dengan mudah.

Silahkan klik kanan pada halaman blog Anda kemudian pilih inspect, kemudian pilih tab Audits dan klik Perform an audit...



Silahkan tunggu hingga proses audit tamat dilakukan. Kemudian akan muncul hasil audit dan silahkan periksa bab Accessibility.

Jika pada bab 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 bab itu dengan klik toggle-nya yang akan menampilkan elemen apa saja yang mempunyai kurang kontras warnanya.

Untuk mengecek kekontrasan warna teks dengan warna background, silahkan gunakan tool Color Contrast Analyzer.

Silahkan masukan warna teks pada bab 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 yaitu salah satu tool yang direkomendasikan untuk mengecek kecepatan, performa, dan aksesibilitas sebuah halaman blog.

Dan duduk perkara kekontrasan warna ini menjadi salah satu faktor aksesibilitas sebuah halaman dan penting untuk dilakukan sebaik mungkin biar pengunjung menjadi nyaman dalam membaca konten-konten blog.

Semoga bermanfaat.


Sumber https://www.kompiajaib.com/

Share this post