Membuat situs Anda lebih mudah dibaca

Sofia Emelianova

Teks dengan kontras rendah membuat situs Anda kurang mudah dibaca oleh semua pengguna, terutama 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 CSS Overview, tab Issues (pratinjau), 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.
• Mengemulasi kekurangan daya penglihatan. Lihat situs Anda seperti yang dilihat pengguna.

Menemukan teks kontras rendah

Untuk menemukan teks kontras rendah:

1. Buka DevTools di halaman Anda.

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

   • Ringkasan CSS
   • (Pratinjau) Masalah
   • Lighthouse

Anda dapat bereksperimen dengan membuka CodePen kami.

Masalah kontras di panel CSS Overview

Untuk mendapatkan ringkasan:

1. Buka Ringkasan CSS.
2. Merekam ringkasan.
3. Buka bagian Warna, buka Masalah kontras, lalu klik masalah, jika ada.

4. Di tabel Masalah kontras, arahkan kursor ke elemen, lalu klik link di sampingnya.

   

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

(Pratinjau) Masalah kontras di tab Masalah

Untuk mendapatkan daftar masalah:

1. Aktifkan pelaporan masalah kontras di tab Masalah:
   1. Buka Setelan > Eksperimental.
   2. Di kolom filter, telusuri contrast issue.
   3. Pilih Aktifkan pelaporan masalah kontras otomatis melalui panel Masalah.
   4. Klik Reload DevTools di 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 ini seperti yang dijelaskan di bagian Memperbaiki teks kontras rendah.

Masalah kontras dalam 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 Analyze page load dan tunggu hingga Lighthouse membuat laporan.

4. Buka bagian Kontras. Dari daftar elemen, klik link ke elemen yang terpengaruh.

   

5. Perbaiki masalah ini 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 CSS Overview, tab Masalah, atau laporan Lighthouse. DevTools akan mengarahkan Anda ke panel Elemen dan memilih elemen yang sesuai.

   

   Misalnya, pada CodePen demo kami yang tidak dapat diakses, elemen pertama yang terpengaruh adalah h1.line1.

2. Klik Periksa di sudut kanan atas DevTools dan arahkan kursor ke elemen di area tampilan. DevTools menampilkan tooltip untuk elemen ini.

   

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

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

   

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

4. Klik tombol Gunakan warna yang disarankan di samping tingkat AAA. Pemilih Warna menerapkan warna teks yang mematuhi pedoman rasio kontras.

   

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

   

6. Demikian pula, perbaiki semua masalah kontras yang Anda temukan dengan 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
• Siapkan Ruang Kerja agar DevTools dapat menyimpan file langsung ke sumber Anda.

Apa langkah selanjutnya?

Pelajari lebih lanjut:

• Mempelajari Aksesibilitas secara umum
• Aksesibilitas warna dan kontras khususnya