Intinya...

Kontras warna teks dengan latarnya harus minimal

  • 7:1 untuk teks normal, atau
  • 4,5:1 untuk teks besar (di atas 24px, atau teks tebal di atas 19px).

Apa itu WCAG 1.4.6?

Semua teks di situs web kamu harus mudah dibaca, terutama bagi pengguna dengan gangguan penglihatan. Ini berarti memastikan ada kontras yang kuat antara teks dan latar belakangnya agar kata-kata tidak pudar atau hilang.

Panduan ini melampaui aturan kontras dasar dan meminta kontras yang lebih kuat antara teks dan latar belakang. Tujuannya adalah untuk membuat konten dapat dibaca tanpa membuat mata lelah, bahkan untuk orang yang tidak menggunakan alat bantu tetapi masih membutuhkan dukungan visual tambahan.

Perbandingan cepat: Sementara WCAG 1.4.3 Kontras (Minimum) memerlukan rasio kontras 4.5:1 untuk teks normal, kriteria ini di level AAA meningkatkan rasio menjadi 7:1. Ini membantu mendukung pengguna dengan kehilangan penglihatan yang lebih signifikan yang masih membaca secara visual dan tidak bergantung sepenuhnya pada screen reader.

Perbandingan teks dengan rasio kontras berbeda

Perbandingan teks normal dan besar menggunakan rasio 7:1, 4.5:1, dan 2:1.

Mengapa ini penting?

Beberapa pengguna mungkin tidak bisa membaca teks yang memenuhi rasio kontras minimum WCAG 1.4.3. Penglihatan mereka mungkin kabur, atau mereka mungkin kesulitan membedakan warna tertentu. Bagi mereka, meningkatkan kontras bisa menjadi perbedaan antara membaca dengan nyaman dan menyerah sama sekali.

Cobalah membayangkan membaca situs web di ponsel kamu di bawah sinar matahari terang atau saat mata kamu lelah di akhir hari. Begitulah rasanya bagi orang dengan penglihatan sekitar 20/80, dan panduan ini hadir untuk memastikan konten kamu juga dapat diakses oleh mereka.

Simulasi penglihatan kabur pada teks dengan rasio berbeda

Simulasi penglihatan kabur rendah pada teks normal dan besar menggunakan rasio 7:1, 4.5:1, dan 2:1.

Siapa yang terpengaruh?

Pengguna low vision dan pengguna dengan defisiensi penglihatan warna.

Pengguna low vision mungkin kesulitan membaca teks dengan kontras rendah, meskipun itu memenuhi standar dasar. Kontras yang lebih tinggi membuat teks lebih mudah dilihat dan mengurangi kelelahan mata.

Pengguna dengan defisiensi penglihatan warna mungkin tidak bisa melihat warna tertentu sama sekali. Karena panduan ini didasarkan pada luminansi (kecerahan) alih-alih hanya warna, ini membantu memastikan teks tetap dapat dibaca tidak peduli warna apa yang digunakan.

Simulasi defisiensi penglihatan warna

Perbandingan visual rasio kontras teks untuk kombinasi warna merah-hijau—7:1, 4.5:1, dan 2:1—dengan warna khas dan melalui lensa defisiensi penglihatan warna.

Cara menerapkan WCAG 1.4.6

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

Rasio kontras untuk teks normal vs teks besar

Berikut yang perlu kamu ketahui:

  • Teks normal (di bawah 24px atau di bawah 19px tebal): Membutuhkan rasio kontras minimal 7:1.
  • Teks besar (lebih dari 24px atau 19px tebal): Membutuhkan rasio kontras minimal 4.5:1.

Ini memberi kamu sedikit lebih banyak fleksibilitas untuk judul dan subjudul, sambil memastikan konten paragraf tetap sangat mudah dibaca.

Salah satu cara termudah untuk memeriksa adalah menggunakan WebAIM Contrast Checker yang tersedia gratis. Cukup masukkan warna teks dan latar belakang, dan lihat bagaimana hasilnya.

Teks dekoratif (seperti kata-kata di latar belakang atau hiasan) tidak perlu memenuhi persyaratan kontras jika tidak menyampaikan informasi penting.

Perbandingan kontras minimum dan kontras yang ditingkatkan

Perbandingan sisi-samping antara rasio kontras minimum dan yang ditingkatkan untuk teks besar dan normal. Kolom kiri menunjukkan kontras minimum (3:1 untuk teks besar dan 4.5:1 untuk teks normal), sementara kolom kanan menunjukkan kontras yang ditingkatkan (4.5:1 untuk teks besar dan 7:1 untuk teks normal).

Kontras untuk teks berbasis gambar

Jika gambarmu menyertakan teks (seperti spanduk atau infografis), aturan kontras yang sama berlaku. Teks harus sama mudah dibaca dalam gambar seperti halnya di HTML biasa.

Atur warna teks dan latar belakang

Saat kamu mengubah warna teks di CSS, pastikan untuk juga mengatur warna latar belakang. Jika tidak, pengguna dengan pengaturan khusus atau mode kontras tinggi mungkin akan mendapatkan kombinasi yang sulit dibaca.

Penerapan CSS untuk warna latar belakang

Perbandingan antara konten teks yang sama dengan dan tanpa warna latar belakang yang ditentukan. Bagian atas menunjukkan teks yang jelas terbaca dengan latar belakang putih yang diberi label 'No Background Color Set'. Bagian bawah menunjukkan teks yang sama memudar dan sulit dibaca dengan latar belakang abu-abu gelap yang diberi label 'Browser-Defined Background Color', yang menunjukkan apa yang terjadi ketika warna latar belakang tidak diatur secara eksplisit di CSS.

Teks di atas gambar atau pola

Jika kamu meletakkan teks di atas gambar, seperti spanduk utama, pola latar belakang, atau grafik dekoratif, hati-hati karena kontras bisa bervariasi tergantung pada bagian gambar tempat teks berada.

Tips untuk keterbacaan yang lebih baik:

  • Gunakan lapisan semi-transparan untuk menggelapkan atau mencerahkan gambar di belakang teks
  • Tambahkan latar belakang solid di belakang teks penting
  • Hindari area yang ramai dan tempatkan teks di area gambar yang lebih sederhana dan tidak terlalu penuh
  • Selalu uji kontras langsung di tempat teks muncul

Teks yang kebetulan muncul di latar belakang foto (seperti tanda jalan atau label produk) tidak perlu memenuhi aturan ini kecuali itu adalah bagian dari konten situs web kamu.

Perbandingan rasio kontras teks yang berada di atas gambar

Perbandingan dua gambar aardvark di ladang rumput, masing-masing dengan teks 'Aardvarks Awesome Adventure' yang ditempatkan dalam lengkungan di atas hewan. Versi atas memiliki teks dengan kontras rendah dengan rasio 3:1, yang menyatu dengan latar belakang. Versi bawah menggunakan teks dengan kontras lebih tinggi dengan rasio 7:1, membuatnya lebih mudah dibaca.

Tambahkan mode kontras tinggi

Jika desain kamu menggunakan warna yang tidak memenuhi kontras yang ditingkatkan—untuk branding atau alasan estetika—pertimbangkan untuk menawarkan mode kontras tinggi.

Ini memberi pengguna pilihan: mereka dapat beralih ke versi yang lebih mudah diakses saat diperlukan.

Perbandingan dua situs web dengan kontras berbeda

Dua versi situs web berdampingan. Versi kiri memiliki teks dengan kontras rendah dan toggle yang diberi label 'Contrast Mode' sedang dipilih. Versi kanan menunjukkan versi kontras tinggi dari situs yang sama setelah toggle diaktifkan, dengan teks yang lebih gelap dan keterbacaan yang lebih baik.

Kesimpulan

WCAG 1.4.6 adalah tentang membuat teks kamu mudah dibaca oleh semua orang, terutama bagi mereka yang memiliki gangguan penglihatan atau defisiensi penglihatan warna. Dengan melampaui persyaratan kontras minimum, kamu menciptakan pengalaman yang lebih inklusif dan ramah pengguna bagi orang-orang yang mungkin tidak menggunakan teknologi bantu tetapi tetap membutuhkan dukungan visual yang lebih baik.

Teks yang lebih jelas berarti mengurangi menyipitkan mata, mengurangi kelelahan mata, dan lebih banyak akses untuk semua.