Tips DevTools: Menemukan dan memperbaiki teks kontras rendah

Sarah Emelianova
Sofia Emelianova
GitHub

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.

Chrome DevTools memungkinkan Anda menemukan semua masalah kontras dengan cepat dan memperbaikinya dengan sekali klik tombol.

Tonton video untuk mempelajari cara:

  • Lihat rasio kontras di tooltip mode pemeriksa dan nilai rasio yang direkomendasikan di Pemilih Warna.

    Rasio kontras tersedia di tooltip, dengan Pemilih Warna untuk mengukur rasio warna alternatif. Penilaian AA dan AAA untuk rasio tersedia.

  • Pada Pemilih Warna, pilih warna yang disarankan atau pilih warna di bawah garis rasio kontras untuk mematuhi pedoman WebAIM.

    Garis rasio kontras yang direkomendasikan tersedia di pratinjau bayangan Pemilih Warna.

  • Temukan semua masalah kontras di panel Masalah dan Ringkasan CSS (pratinjau).

    Masalah kontras tercantum di panel Ringkasan CSS dan tab Issues.

  • Emulasi kekurangan penglihatan untuk memahami tampilan halaman semua pengguna.

    Penglihatan yang kabur dipilih di tab Rendering dan diemulasikan di area pandang.

Untuk mendapatkan pengalaman belajar langsung, lihat tutorial Membuat situs Anda lebih mudah dibaca.

Untuk mempelajari lebih lanjut, lihat: