Membuat situs Anda lebih mudah dibaca

Sofia Emelianova

GitHub

Poin penting: Teks kontras rendah adalah masalah aksesibilitas utama di web. Pada Februari 2022, 83,9% dari juta halaman beranda teratas mengalami masalah ini. Lihat laporan WebAIM Million 2022 untuk mempelajari lebih lanjut.

Teks yang memiliki kontras rendah membuat situs Anda kurang mudah dibaca oleh semua pengguna, terlebih lagi bagi pengguna dengan gangguan penglihatan. DevTools dapat otomatis menemukan masalah kontras rendah dan menyarankan warna yang lebih baik untuk membantu Anda memperbaikinya.

Gunakan DevTools untuk:

• Temukan masalah kontras. Gunakan panel Ringkasan CSS, (pratinjau) tab Masalah, atau laporan Lighthouse untuk mendapatkan daftar semua masalah.
• Memperbaiki masalah kontras. Lihat masalah dengan tooltip dalam mode pemeriksa dan pilih warna yang disarankan oleh Pemilih Warna untuk memperbaiki rasio kontras.
• Emulasikan kekurangan penglihatan. Lihat situs Anda sebagaimana pengguna melihatnya.

Menemukan teks kontras rendah

Untuk menemukan teks kontras rendah:

1. Buka DevTools di halaman. Dalam tutorial ini, Anda dapat menggunakan halaman demo ini.

2. Dapatkan daftar semua masalah kontras menggunakan salah satu dari tiga panel:

   • Ringkasan CSS
   • (Pratinjau) Masalah
   • Mercusuar

Masalah kontras di panel Ringkasan CSS

Untuk mendapatkan ringkasan:

1. Buka CSS Overview.
2. Buat ringkasan.
3. Buka bagian Warna, scroll ke Masalah kontras, lalu klik masalah, jika ada.

4. Pada tabel Masalah kontras, arahkan kursor ke elemen dan klik link di sampingnya.

   

5. Perbaiki masalah seperti yang dijelaskan di bagian Memperbaiki teks kontras rendah.

(Pratinjau) Masalah kontras di tab Issues

Catatan: Ini adalah fitur pratinjau yang dinonaktifkan secara default.

Untuk mendapatkan daftar masalah:

1. Aktifkan pelaporan masalah kontras di tab Masalah:
   1. Buka Settings > Experimental.
   2. Di panel filter, telusuri contrast issue.
   3. Centang Aktifkan pelaporan masalah kontras otomatis melalui panel Masalah.
   4. Klik Reload DevTools pada perintah di bagian atas.
2. Buka tab Masalah.

3. Luaskan masalah kontras yang ditemukan DevTools, lalu luaskan tabel elemen, dan klik link di samping elemen.

   

4. Perbaiki masalah seperti yang dijelaskan di bagian Memperbaiki teks kontras rendah.

Masalah kontras di laporan Lighthouse

Untuk menjalankan laporan:

1. Di DevTools, buka Tab lainnya > Lighthouse.
2. Buat laporan Lighthouse dengan setelan berikut:
   • Mode: Navigasi (default)
   • Kategori: Aksesibilitas
   • Perangkat: Desktop
3. Klik Analisis pemuatan halaman dan tunggu Lighthouse membuat laporan.
4. Scroll ke bawah ke bagian Kontras, lalu klik link ke elemen yang terpengaruh dalam daftar elemen.
5. Perbaiki masalah seperti yang dijelaskan di bagian Memperbaiki teks kontras rendah.

Memperbaiki teks kontras rendah

Untuk memperbaiki masalah kontras rendah:

1. Temukan masalah kontras dan klik link ke elemen yang terpengaruh di panel Ringkasan CSS, tab Masalah, atau laporan Lighthouse. DevTools mengarahkan Anda ke panel Elements dan memilih elemen yang sesuai. Misalnya, pada halaman demo ini, elemen pertama yang terpengaruh adalah h1.line1.

2. Klik Inspect di pojok kanan atas DevTools dan arahkan kursor ke elemen di area pandang. DevTools akan menampilkan tooltip untuk elemen ini.

   

   Perhatikan tanda peringatan di samping nilai rasio kontras di tooltip. Rasio kontras mengukur perbedaan kecerahan antara warna latar depan (warna teks) dan latar belakang.

3. Buka Pemilih Warna di samping deklarasi warna teks elemen dan, di Pemilih Warna, luaskan bagian Rasio kontras.

   

   Pemilih Warna memberi tahu Anda bahwa rasio kontras tidak memenuhi tingkat AA atau AAA dalam pedoman WebAIM.

4. Klik tombol Gunakan warna yang disarankan di samping tingkat AAA. Pemilih Warna menerapkan warna teks yang sesuai dengan panduan rasio kontras.

   

5. Atau, untuk memilih warna secara manual, Anda dapat menarik lingkaran di pratinjau bayangan. Untuk tetap berada dalam level AA atau AAA, pilih warna di bawah garis atas atau bawah.

   

6. Demikian pula, perbaiki semua masalah kontras yang Anda temukan di panel CSS Overview, tab Issues, atau laporan Lighthouse.

Simpan perubahan

Untuk menyimpan perubahan yang Anda buat di DevTools:

• Salin semua perubahan CSS sekaligus dan tempelkan ke kode Anda
• Pertimbangkan untuk menyiapkan Workspace agar DevTools dapat menyimpan file langsung ke sumber Anda.

Apa langkah selanjutnya?

Pelajari lebih lanjut:

• Pelajari Aksesibilitas secara umum
• Aksesibilitas warna dan kontras secara khusus