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.

Perbandingan dua paragraf yang kontras dan tidak

Dua contoh berbeda dari teks di mana set pertama memiliki kontras yang sangat rendah, dan set kedua memiliki kontras yang dapat diterima dan lebih mudah dibaca.

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.

Perbandingan dua paragraf dengan latar berpola

Dua set teks berbeda di mana terdapat gambar latar belakang. Gambar kedua dilihat dari sudut pandang orang dengan defisiensi penglihatan warna.

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

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

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.

Perbandingan ukuran dua heading pada dua pargraf

Teks yang disusun dengan heading dan ukuran font yang sesuai untuk membedakan tingkat heading, dibandingkan dengan teks yang juga menggunakan heading namun ukuran font-nya tidak cukup berbeda.

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.

Perbandingan kontras antara dua paragraf

Paragraf teks di mana contoh pertama menunjukkan kontras yang buruk. dan contoh kedua menampilkan kontras yang baik antara latar depan dan latar belakang

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.

Perbandingan warna latar belakang yang diset oleh CSS maupun default browser

Menetapkan warna latar belakang untuk situs web untuk mencegah masalah terkait konfigurasi browser.

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.

Perbandingan kontras antara dua set kotak

Dua set kotak yang menampilkan teks dan tombol, dengan opsi mode kontras pada contoh pertama. Contoh kedua memiliki kontras yang buruk tanpa opsi mode kontras.

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.