Intinya...
Kontras warna teks dengan latarnya harus minimal
- 4,5:1 untuk teks normal, atau
- 3:1 untuk teks besar (di atas 24px, atau teks tebal di atas 19px).
Apa itu WCAG 1.4.3?
Dalam konteks aksesibilitas web, kontras adalah perbedaan warna dan kecerahan antara teks dan latar belakang halaman. Huruf hitam di atas latar belakang putih adalah contoh kontras tinggi, sedangkan huruf abu-abu pucat di atas latar belakang putih adalah contoh kontras rendah. Teks dengan kontras rendah sulit dibaca karena warna teks mirip dengan warna latar belakang. Memiliki kontras yang baik itu penting karena membantu orang dengan mudah membaca teks di situs kamu dan membedakan antara berbagai elemen di halaman.
Teks yang bersifat murni dekoratif, misalnya teks yang hanya menjadi bagian dari latar belakang dan bisa diubah susunannya tanpa mengubah makna, tidak wajib memenuhi kriteria ini.
Mengapa ini penting?
Jika tidak ada cukup kontras antara teks dan latar belakang, akan sulit untuk membedakan kata dan huruf. Ini bisa menyebabkan ketegangan mata dan menyulitkan orang membaca konten.
Bayangkan kamu membuka halaman web di mana warna latar belakang dan warna teks terlalu mirip. Teks dengan kontras rendah seperti ini sulit dibaca oleh siapa saja.
Akan jauh lebih sulit jika kamu mencoba membacanya di smartphone saat berada di luar ruangan pada hari yang cerah, atau ketika mata kamu lelah setelah seharian bekerja di depan komputer. Tantangan akibat teks dengan kontras rendah semakin besar bagi pengguna low vision, defisiensi penglihatan warna, dan gangguan visual lainnya.
Bagi sebagian pengguna, set pertama mungkin tidak terlalu buruk. Mereka mungkin masih dapat melihat bahwa teks tersebut dapat dibaca di atas latar belakang biru. Namun, bagi pengguna dengan gangguan penglihatan, kontras yang terlalu mirip membuat teks sulit dibaca karena hampir menghilang ke dalam latar belakang. Sangat membuat frustrasi harus menyipitkan mata atau menyorot teks secara manual hanya untuk bisa membacanya.
Hal ini dapat diatasi dengan mengubah warna latar belakang menjadi putih dan teks menjadi #3866B2, yang akan menghasilkan rasio kontras 5,65:1.
WCAG 1.4.3 bertujuan untuk memastikan bahwa teks dapat dibaca dan mudah dibaca tanpa kesulitan atau ketegangan mata. Pedoman ini memastikan bahwa semua pengguna dapat mengakses informasi yang disediakan di sebuah situs web.
Siapa yang terpengaruh?
Pengguna low vision dan penglihatan terbatas, dan pengguna dengan defisiensi penglihatan warna.
Teks dengan kontras rendah bisa memengaruhi siapa saja, tetapi ini sangat bermasalah bagi pengguna dengan gangguan penglihatan seperti low vision atau defisiensi penglihatan warna.
Penglihatan rendah atau terbatas adalah kondisi yang mengurangi kemampuan seseorang untuk melihat detail, warna, dan kontras. Jika teks dan latar belakangnya memiliki kontras rendah, hal ini membuat huruf dan kata semakin sulit dibedakan, sehingga sulit untuk membaca dan memahami konten di halaman web.
Bagi pengguna dengan defisiensi penglihatan warna, teks berkontras rendah juga dapat menimbulkan masalah. Buta warna adalah kondisi di mana seseorang kesulitan membedakan antara warna-warna tertentu, seperti merah dan hijau. Jika warna teks dan warna latar belakang terlihat terlalu mirip, seseorang dengan defisiensi penglihatan warna mungkin tidak dapat membaca teks sama sekali.
Pada dasarnya, teks berkontras rendah dapat membuat siapa pun lebih sulit untuk membaca dan memahami konten di halaman web. Ini dapat menyebabkan ketegangan mata, sakit kepala, serta membuat fokus dan konsentrasi menjadi lebih sulit. Dengan memastikan adanya kontras yang baik antara teks dan latar belakang, desainer dan pengembang web dapat menciptakan situs web yang lebih aksesibel dan lebih mudah digunakan untuk semua pengguna.
Cara menerapkan WCAG 1.4.3
Teks normal vs teks besar
Saat berbicara tentang kontras antara teks dan latar belakang, sebenarnya ada dua aturan terpisah. Satu untuk teks berukuran "normal", dan satu lagi untuk teks berukuran "besar". Untuk membantu menentukan apakah teks dikategorikan sebagai "normal" atau "besar", mari kita bahas perbedaannya.
Teks besar didefinisikan sebagai teks dengan ukuran minimal 24px atau 19px dengan berat font tebal (bold). Persyaratan kontras untuk teks besar adalah rasio 3:1. Ini memungkinkan desainer menggunakan lebih banyak pilihan warna untuk teks besar, misalnya untuk judul.
Teks normal adalah semua teks yang ukurannya lebih kecil dari ambang batas teks besar, namun semua teks sebaiknya berukuran minimal 16px. Untuk memenuhi persyaratan 1.4.3, teks normal harus memiliki rasio kontras setidaknya 4.5:1.
Aturan yang sama berlaku untuk semua teks, termasuk teks yang berada di atas gambar latar belakang: 3:1 untuk teks besar, dan 4.5:1 untuk teks normal.
Ada banyak alat bantu yang dapat membantu kamu menghitung kontras antara teks dan latar belakang dengan mudah. Kami merekomendasikan menggunakan WebAIM’s contrast checker atau a11y’s Color Contrast validator.
Pastikan rasio kontras antara latar depan dan latar belakang memadai
Untuk memastikan pengguna dapat membaca teks yang ditampilkan di atas latar belakang, pastikan teks memiliki ukuran yang sesuai dan rasio kontras yang cukup. Misalnya, jika latar belakang berupa warna solid seperti putih seluruhnya atau hitam seluruhnya, maka luminansi teks normal harus memiliki rasio setidaknya 4.5:1.
Jika latar belakang berupa gambar, atau memiliki pola tertentu, maka area di sekitar huruf harus memberikan kontras yang memadai dengan warna teks untuk mempertahankan rasio kontras yang direkomendasikan.
Tetapkan warna teks dan warna latar belakang
Jika kamu tidak secara spesifik menetapkan warna latar belakang pada situs webmu, browser pengguna akan menggunakan warna latar belakang default yang mungkin telah mereka pilih. Ini bisa menyebabkan sebagian pengguna melihat warna latar yang tidak kamu prediksi dan membuat konten sulit terlihat. Pastikan untuk selalu menetapkan warna latar belakang untuk situs web, bahkan jika itu hanya putih polos.
Selain itu, aturan praktis yang baik adalah selalu menetapkan warna latar belakang setiap kali kamu menetapkan warna teks. Jadi, jika kamu mengatur warna teks pada tombol misalnya, pastikan untuk selalu menetapkan warna latar belakang tombol yang memiliki kontras baik dengan warna teks.
Sediakan kontrol dengan rasio kontras yang memadai
Terkadang, situs web perlu menggunakan warna tertentu untuk latar belakang dan teks, dan sayangnya tidak dapat memenuhi persyaratan rasio kontras. Sebagai upaya terakhir, jika kamu menghadapi situasi ini, solusi terbaik adalah menyediakan kontrol, seperti tombol toggle, yang memungkinkan pengguna dengan mudah beralih ke mode kontras tinggi.
Kesimpulan
Situs yang memenuhi rasio kontras untuk teks normal dan teks besar sesuai dengan WCAG 1.4.3 akan memberikan pengalaman yang lebih baik bagi pengguna low vision. Ini juga akan memungkinkan semua jenis pengguna untuk dengan mudah menavigasi dan memahami situs beserta kontennya. Memastikan bahwa pengguna low vision dapat mengakses situs webmu akan meningkatkan keterlibatan dan membuat pengguna lebih puas.