Membuat situs Anda lebih mudah dibaca

Sofia Emelianova
Sofia Emelianova

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

Gunakan DevTools untuk:

Temukan teks kontras rendah

Untuk menemukan teks kontras rendah:

  1. Buka DevTools di halaman Anda. Dalam tutorial ini, Anda dapat menggunakan halaman demo ini.
  2. Dapatkan daftar semua masalah kontras menggunakan salah satu dari tiga panel:

Masalah kontras di panel Ringkasan CSS

Untuk mendapatkan ringkasan:

  1. Buka CSS Overview.
  2. Mengambil ringkasan.
  3. Buka bagian Warna, scroll ke Masalah kontras, lalu klik masalah, jika ada.
  4. Di tabel Masalah kontras, arahkan kursor ke elemen dan klik link di sampingnya.

    Daftar masalah kontras di Ringkasan CSS.

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

(Pratinjau) Masalah kontras di tab Issues

Untuk mendapatkan daftar masalah:

  1. Aktifkan pelaporan masalah kontras di tab Masalah:
    1. Buka Setelan > Eksperimental.
    2. Di panel filter, telusuri contrast issue.
    3. Centang Aktifkan pelaporan masalah kontras otomatis melalui panel Issues. Mengaktifkan pelaporan masalah kontras.
    4. Klik Reload DevTools pada perintah di bagian atas.
  2. Buka tab Masalah.
  3. Luaskan masalah kontras yang ditemukan DevTools, lalu perluas tabel elemen, dan klik link di samping elemen.

    Tabel elemen dengan masalah kontras di tab Issues.

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

Masalah kontras dalam laporan Lighthouse

Untuk menjalankan laporan:

  1. Di DevTools, buka Lebih banyak tab. Tab lainnya > Lighthouse.
  2. Buat laporan Lighthouse dengan setelan berikut:
    • Mode: Navigasi (default)
    • Kategori: Aksesibilitas
    • Perangkat: Desktop Laporan Lighthouse dengan setelan Navigasi, Aksesibilitas, dan Desktop.
  3. Klik Analyze page load dan tunggu Lighthouse membuat laporan.
  4. Scroll ke bawah ke bagian Kontras, lalu klik link ke elemen yang terpengaruh pada daftar elemen. Bagian Kontras dari laporan Lighthouse dengan daftar elemen yang memiliki masalah kontras.
  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 Elemen dan memilih elemen yang sesuai. Elemen dengan masalah kontras dipilih di panel Elemen. Misalnya, di halaman demo ini, elemen pertama yang terpengaruh adalah h1.line1.
  2. Klik Periksa. Inspect di sudut kanan atas DevTools dan arahkan kursor ke elemen di area tampilan. DevTools menampilkan tooltip untuk elemen ini.

    Tooltip akan menampilkan tanda peringatan di samping nilai kontras.

    Perhatikan tanda peringatan Peringatan. di samping nilai rasio kontras dalam 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.

    Bagian Rasio kontras pada Pemilih Warna.

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

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

    Warna yang diterapkan sesuai dengan panduan.

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

    Memilih bayangan warna di bawah garis bawah untuk tetap berada di tingkat AAA.

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

Simpan perubahan

Untuk menyimpan perubahan yang Anda buat di DevTools:

Apa selanjutnya?

Pelajari lebih lanjut: