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 juta halaman beranda teratas mengalami masalah ini. Lihat laporan WebAIM Juta 2022 untuk mempelajari lebih lanjut.

Chrome DevTools memungkinkan Anda menemukan semua masalah kontras secara sekilas dan memperbaikinya dengan sekali klik.

Tonton video untuk mempelajari cara:

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

    Rasio kontras tersedia dalam tooltip, dengan Pemilih Warna untuk mengukur rasio warna alternatif. Fitur penilaian AA dan AAA untuk ransum tersedia.

  • Di Pemilih Warna, pilih warna yang disarankan atau pilih warna di bawah garis rasio kontras agar sesuai dengan pedoman WebAIM.

    Garis rasio kontras yang direkomendasikan tersedia di pratinjau shade pada Pemilih Warna.

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

    Masalah kontras yang tercantum di panel Ringkasan CSS dan tab Masalah.

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

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

Untuk pengalaman belajar yang lebih langsung, lihat tutorial Menjadikan situs lebih mudah dibaca.

Untuk mempelajari lebih lanjut, lihat: