Apa itu Mode Kontras Tinggi?

Uji tampilan konten web Anda di bawah berbagai pengaturan kontras tinggi. Tempelkan HTML atau tangkapan layar URL untuk mempratinjau mode kontras yang sesuai WCAG, termasuk Windows High Contrast, warna terbalik, dan tema kontras kustom.

Pilih tema bawaan (Windows High Contrast, Inverted, Kuning di atas Hitam) atau atur warna teks dan latar sendiri. Rasio kontras diperbarui langsung dan memberitahu level WCAG mana — AA, AAA, teks normal, teks besar — yang dilewati oleh kombinasi Anda. HTML di preview dapat diekspor lengkap dengan inline style.

Cara menggunakan

1. Langkah 1 — Tempelkan HTML atau teks biasa ke editor.
2. Langkah 2 — Pilih mode kontras dari prasetel: Windows High Contrast (hitam/putih), Terbalik, Kuning di Hitam, atau warna kustom.
3. Langkah 3 — Tinjau pratinjau langsung untuk memeriksa keterbacaan. Gunakan pemeriksa rasio kontras untuk memverifikasi kepatuhan WCAG AA/AAA pada elemen teks.

Kapan menggunakan

• Mengaudit landing page agar lolos WCAG AA sebelum kampanye dirilis.
• Memastikan indikator fokus dan tombol khusus ikon tetap terlihat di Windows High Contrast.
• Memilih warna body text yang mencapai 4,5:1 di atas latar brand.

Hasil

Seorang developer menempelkan HTML bilah navigasi dan beralih ke mode Windows High Contrast. Mereka menemukan bahwa tombol ikon-saja menjadi tidak terlihat di latar belakang hitam, jadi mereka menambahkan label teks yang terlihat.

FAQ

Berapa rasio kontras yang diminta WCAG AA?

4,5:1 untuk teks normal dan 3:1 untuk teks besar (18pt regular atau 14pt bold ke atas). AAA menaikkan ambangnya jadi 7:1 dan 4,5:1. Cek-er menandai tiap kombinasi dengan level yang berhasil atau gagal.

Kenapa tombol ikon hilang di Windows High Contrast?

Windows mengganti warna dengan token sistem dan mengabaikan background image. Ikon yang dibuat lewat background-image atau SVG dengan fill saja akan tidak terlihat. Pakai inline SVG dengan currentColor di stroke, atau tambahkan label teks yang kelihatan.

Kuning di atas hitam benarkah tema aksesibilitas?

Benar. Itu salah satu tema asli Windows High Contrast dan masih banyak digunakan oleh pengguna low vision karena kuning tetap tajam meski ada degenerasi makula. Sebagian malah lebih nyaman dibanding putih murni di hitam.

Lulus WCAG AA berarti halaman saya sudah aksesibel?

Kontras hanya sebagian dari WCAG. Halaman juga butuh navigasi keyboard, HTML semantik, teks alt, label form, indikator fokus, dan menghormati reduced motion. Pemeriksaan rasio ini hanya bicara soal warna.

Kenapa oranye brand kami gagal di atas latar putih?

Warna midtone yang jenuh (oranye, kuning, lime) sering jatuh di bawah 3:1 di atas putih karena luminansinya terlalu tinggi. Buat oranye lebih gelap untuk body text, atau pakai oranye hanya di latar dan headline besar yang cukup dengan 3:1.

Alat terkait