Tulisan kali ini adalah tentang cara mengatasi color contrast ratio yang gagal dalam audit dengan Lighthouse di Google Chrome. Pesan yang muncul jika gagal pada parameter ini adalah Background and foreground colors do not have a sufficient contrast ratio.
Jika teks dengan rasio kontras rendah, yaitu terlalu dekatnya kecerahan dengan latar belakangnya, maka pengunjung akan mengalami kesulitan dalam membacanya. Warna merah dengan dasar abu-abu hingga putih belum akan lolos audit contrast ratio Lighthouse karena masih dianggap menyulitkan pengguna dalam membedakan bentuk karakter, menurunkan pemahaman membaca dan memperlambat kecepatan membaca.
Walaupun masalah contrast ratio terutama sangat mengganggu bagi orang dengan kemampuan penglihatan rendah, namun masalah ini juga bisa memberi pengalaman membaca yang buruk bagi semua orang. Ini terutama menjadi lebih penting ketika orang membaca isi laman dengan menggunakan ponsel dengan huruf yang kecil.
Contrast Checker
Jika ada bagian laman memiliki contrast ratio yang buruk, maka Lighthouse akan mengerek bendera peringatan agar masalahnya segera diperbaiki. Taut untuk melihat bagian mana dari tulisan yang tidak lolos audit juga diberikan, dan itu sangat memudahkan bagi pengguna untuk segera menemukannya.
Lighthouse menggunakan kriteria sukses 1.4.3 dari WCAG dalam melakukan audit. Kriteria itu menetapkan rasio kontras minimal 4,5:1, yaitu Level AA, untuk penyajian visual teks dan gambar teks, kecuali untuk teks dan gambar teks ukuran besar bisa memiliki rasio kontras minimal 3:1.
Pengecualian juga diberikan untuk teks atau gambar teks yang merupakan bagian dari komponen antarmuka pengguna yang tidak aktif, yang merupakan dekorasi murni, yang tidak dapat dilihat oleh siapa pun, atau yang merupakan bagian dari gambar yang berisi konten visual penting lainnya.
Teks yang merupakan bagian dari logo atau nama merek juga tidak memiliki persyaratan kontras.
Nah, pertanyaannya sekarang adalah bagaimana cara mengatasi color contrast ratio agar lolos audit Lighthouse? Cara pertama tentu melakukan upaya coba salah sendiri, mengubah warna foreground dan/atau background dan lalu melakukan audit ulang.
Cara kedua, ini lebih praktis dan cepat, adalah dengan menggunakan tools gratis di web yang bernama contrast checker. Di tools ini, Anda tinggal mengisi css warna atau memilih dengan memakai color picker yang disediakan, untuk menemukan kombinasi yang memenuhi kriteria minimal Level AA, atau lebih baik lagi Level AAA.
Ada tiga kombinasi color contrast yang disediakan oleh tools ini, yaitu Text colour, Object background, dan Page background. Anda bisa menggunakan dua atau tiga kombinasi ini sesuai dengan kebutuhan yang ada di laman. Tetapkan dulu Text colour (dan mungkin Page background) yang dikehendaki, lalu klik color picker pada Object background, dan geser ke warna dan area yang minimal memberi skor Level AA.
Semoga bermanfaat, dan selamat mencoba.
Jika teks dengan rasio kontras rendah, yaitu terlalu dekatnya kecerahan dengan latar belakangnya, maka pengunjung akan mengalami kesulitan dalam membacanya. Warna merah dengan dasar abu-abu hingga putih belum akan lolos audit contrast ratio Lighthouse karena masih dianggap menyulitkan pengguna dalam membedakan bentuk karakter, menurunkan pemahaman membaca dan memperlambat kecepatan membaca.
Walaupun masalah contrast ratio terutama sangat mengganggu bagi orang dengan kemampuan penglihatan rendah, namun masalah ini juga bisa memberi pengalaman membaca yang buruk bagi semua orang. Ini terutama menjadi lebih penting ketika orang membaca isi laman dengan menggunakan ponsel dengan huruf yang kecil.
Contrast CheckerJika ada bagian laman memiliki contrast ratio yang buruk, maka Lighthouse akan mengerek bendera peringatan agar masalahnya segera diperbaiki. Taut untuk melihat bagian mana dari tulisan yang tidak lolos audit juga diberikan, dan itu sangat memudahkan bagi pengguna untuk segera menemukannya.
Lighthouse menggunakan kriteria sukses 1.4.3 dari WCAG dalam melakukan audit. Kriteria itu menetapkan rasio kontras minimal 4,5:1, yaitu Level AA, untuk penyajian visual teks dan gambar teks, kecuali untuk teks dan gambar teks ukuran besar bisa memiliki rasio kontras minimal 3:1.
Pengecualian juga diberikan untuk teks atau gambar teks yang merupakan bagian dari komponen antarmuka pengguna yang tidak aktif, yang merupakan dekorasi murni, yang tidak dapat dilihat oleh siapa pun, atau yang merupakan bagian dari gambar yang berisi konten visual penting lainnya.
Teks yang merupakan bagian dari logo atau nama merek juga tidak memiliki persyaratan kontras.
Nah, pertanyaannya sekarang adalah bagaimana cara mengatasi color contrast ratio agar lolos audit Lighthouse? Cara pertama tentu melakukan upaya coba salah sendiri, mengubah warna foreground dan/atau background dan lalu melakukan audit ulang.
Cara kedua, ini lebih praktis dan cepat, adalah dengan menggunakan tools gratis di web yang bernama contrast checker. Di tools ini, Anda tinggal mengisi css warna atau memilih dengan memakai color picker yang disediakan, untuk menemukan kombinasi yang memenuhi kriteria minimal Level AA, atau lebih baik lagi Level AAA.
Ada tiga kombinasi color contrast yang disediakan oleh tools ini, yaitu Text colour, Object background, dan Page background. Anda bisa menggunakan dua atau tiga kombinasi ini sesuai dengan kebutuhan yang ada di laman. Tetapkan dulu Text colour (dan mungkin Page background) yang dikehendaki, lalu klik color picker pada Object background, dan geser ke warna dan area yang minimal memberi skor Level AA.
Lihat Video
Semoga bermanfaat, dan selamat mencoba.
Sponsored Link
Sponsored Link
Sponsored Link
Bagikan ke:
Facebook, Twitter, WhatsApp, Telegram, Email. Print!.