Tips DevTools: Menemukan dan memperbaiki teks kontras rendah

Sofia Emelianova
Sofia Emelianova

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

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

Tonton video untuk mempelajari cara:

  • Lihat rasio kontras di tooltip mode inspector dan nilai rasio yang direkomendasikan di Color Picker.

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

  • Di Color Picker, pilih warna yang disarankan atau pilih warna di bawah garis rasio kontras untuk mematuhi panduan WebAIM.

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

  • Temukan semua masalah kontras di panel CSS Overview dan (pratinjau) Issues.

    Masalah kontras yang tercantum di panel CSS Overview dan tab Issues.

  • Emulasikan kekurangan daya penglihatan untuk memahami tampilan halaman Anda bagi semua pengguna.

    Penglihatan buram dipilih di tab Rendering dan diemulasi di area pandang.

Untuk pengalaman belajar yang lebih praktis, lihat tutorial Membuat situs Anda lebih mudah dibaca.

Untuk mempelajari lebih lanjut, lihat: