Mengatasi Masalah Contrast Ratio pada Blog

Google Chrome memiliki fasilitas audit aplikasi web dengan Lighthouse. Salah satu permasalah yang sering dialami pengembang situs web adalah masalah rasio kontras. Dalam artikel ini saya akan menjelaskan cara mengatasi masalah contrast ratio pada Google Chrome Lighthouse.

Apa Itu Google Chrome Lighthouse

Sebelum menginjak pembahasan utama, bagi yang belum paham apa itu Lighthouse silahkan membaca bagian ini terlebih dahulu. Lighthouse adalah alat bantu dari Google untuk meningkatkan kualitas aplikasi web. Ada 2 cara untuk menggunakan Lighthouse, yakni melalui ekstensi browser atau melalui Google Chrome Developer Tools.

Saya pribadi menyarankan cara kedua karena kamu tidak perlu menginstall apapun. Bukalah sebuah situs web yang ingin kamu ketahui skornya. Klik kanan pada area halaman web lalu pilih menu Inspect. Bukalah tab Audits dan kamu akan menemukan beberapa pengaturan untuk pengujian.

Lighthouse akan menjalankan serangkaian uji terhadap halaman dan menghasilkan laporan tentang seberapa bagus halaman itu. Dari laporan itu kamu bisa melihat kriteria apa saja yang tidak lulus sebagai indikator untuk membuatnya lebih baik.

Mengingat pengaturan-pengaturan pada Lighthouse ini memerlukan penjabaran yang cukup panjang, saya akan membuatnya menjadi sebuah artikel tersendiri jika ada kesempatan. Saya berasumsi kamu sudah tahu cara menggunakannya dan kita akan langsung masuk ke pembahasan utama.

Mengatasi Masalah Contrast Ratio

Bagi para web developer, terutama yang kurang memiliki pengalaman, akan sering mendapati skor tidak sempurna pada audit Accessibility. Penyebabnya rata-rata sama, sebuah laporan peringatan seperti berikut:

Background and foreground colors do not have a sufficient contrast ratio.

Jika peringatan dibuka, akan ada penjelasan "Low-contrast text is difficult or impossible for many users to read" dan ditunjukkan elemen apa saja yang tidak lulus uji.

Ternyata penyebabnya sangat sepele sekali, tapi seringkali luput dari perhatian. Yakni halaman situs tersebut tidak memiliki rasio kontras yang cukup antara teks dan latar belakang (background) sehingga menjadi kurang terbaca.

Secara umum, sebuah teks atau tulisan harus memiliki perbedaan kontras yang signifikan antara warna teks dengan warna background. Mudahnya, pada halaman dengan background putih sebaiknya memakai teks dengan warna hitam. Begitu juga sebaliknya.

Tapi karena kebutuhan desain template atau faktor tertentu, perbandingan warna teks dengan background kurang jelas. Banyak blogger yang memakai teks dengan warna terang padahal background yang digunakan berwarna putih.

Memilih warna bukan perkara sulit. Tapi jika kamu salah memilih warna yang tepat, kamu akan mengorbankan kenyamanan membaca para pengunjung. Mata pengunjung akan terasa cepat lelah dan tidak nyaman membaca berlama-lama.

Jika dibiarkan, ujung-ujungnya para pengunjung akan enggan membaca dan langsung meninggalkan blog kamu. Parahnya, ada yang sampai mem-blacklist blog kamu gara-gara persoalan warna ini.

Contoh, para blogger yang memakai template VioMagz generasi awal pasti familiar dengan warna teks berikut ini:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ya, kode warna #49ACE1 itu dipakai sebagai warna default untuk semua link atau tautan pada template VioMagz. Padahal, rasio kontras warna tersebut kurang pas sebab tulisan/link jadi kurang jelas terbaca sehingga rasio kontrasnya rendah.

Hal inilah yang menyebabkan kamu akan mendapati peringatan contrast ratio pada Lighthouse. Mungkin ada beberapa diantara kamu yang langsung bertanya-tanya, bagaimana cara menghitung contrast ratio ini agar kita tidak mendapati peringatan yang sama lagi?

Cara Ukur Contrast Ratio

Untuk mengukur rasio kontras antara teks dengan background, kita bisa menggunakan layanan penghitung kontras warna seperti Color Contrast Analyzer, Color Contrast Checker, atau Contrast Ratio. Saya pribadi lebih menyukai yang terakhir karena lebih mudah digunakan.

Cara mengukur contrast ratio cukup mudah. Mula-mula tentukan warna background dan teks yang kita gunakan. Contoh, saya cantumkan kode warna teks di atas yakni #49ACE1 ke dalam kolom perbandingan. Silahkan lihat gambar di bawah ini:

Seperti yang kamu lihat, kode warna bawaan VioMagz itu hanya mendapat skor merah yakni 2.53 saja. Semakin tinggi levelnya, semakin bagus dan jelas kontras rasionya. Lalu bagaimana cara mencari warna yang tepat untuk blog kamu?

Baca juga: Cara Memilih Warna untuk Tema Blog

Kamu bisa memakai warna lain yang dianggap cocok atau memilih salah satu warna yang tersedia di situs Material UI. Contoh, saya memilih warna Flat UI 'Wisteria' dengan kode warna #8E44AD. Inilah hasilnya:

Yup, warna yang saya pilih mendapat skor 5.86 dengan warna hijau yang artinya sangat bagus. Kamu juga bisa melakukan hal yang sama untuk warna lainnya. Tips: klik tombol Swap Colors untuk menukar posisi warna background dengan warna teks.

Lalu kenapa blog Oom ini juga terkena masalah yang sama? Sebenarnya hanya masalah selera saja. Jujur saya kurang cocok dengan warna-warna yang dianggap 'valid', terlalu gelap menurut saya. Theme warna ini adalah hijau muda, warna yang sama yang digunakan oleh GoDaddy.

Meskipun tidak mendapat skor sempurna untuk aksesibilitas di Lighthouse, semua tulisan di blog Oom masih nyaman dibaca. Kalau sekedar ingin dapat skor sempurna, saya hanya butuh waktu 30 detik untuk membuat semua skor Lighthouse menjadi 100.

Itulah cara mengatasi masalah contrast ratio pada Chrome Lighthouse yang bisa kamu lakukan. Dengan memilih warna yang tepat, aksesibilitas pada halaman web akan semakin baik sehingga para pengunjung menjadi nyaman berlama-lama membaca semua tulisan kamu. Semoga membantu 🙏