LAB FRONTEND · TANPA PENDAFTARAN

Pemeriksa Kontras Warna

Hitung rasio kontras warna teks dan latar HEX dengan rumus luminansi relatif WCAG, disertai pratinjau dan hasil ambang teks.

Semua alat · Redaksi NgodingSantai · Diperbarui 26 September 2026

Masukkan dua warna

Warna teks (HEX)Warna latar (HEX)

Hasil dan pratinjau

Aktifkan JavaScript untuk menghitung.

Judul contoh berukuran besar

Teks isi biasa. Perhatikan keterbacaan huruf pada latar yang Anda pilih.

Cara membaca hasil

WCAG AA meminta rasio sedikitnya 4,5:1 untuk teks biasa dan 3:1 untuk teks besar. Teks besar berarti minimal 18pt (24px) atau 14pt tebal (sekitar 18,67px). AAA untuk teks biasa memerlukan 7:1. Label kelulusan memakai angka asli sebelum pembulatan; tampilan 4,50:1 bisa berasal dari nilai yang sedikit kurang dari ambang.

Percobaan yang bisa diulang

Masukkan #000 dan #fff untuk mendapatkan 21:1. Gunakan dua warna sama untuk memperoleh 1:1. Tukar warna teks dan latar: rasionya tetap sama karena rumus membandingkan luminansi yang lebih terang dengan yang lebih gelap.

Batas perhitungan

Alat menerima HEX opak tiga atau enam digit. Transparansi, gradient, foto, hover, fokus, ukuran font aktual, dan kontras kontrol nonteks perlu diuji terpisah. Lulus satu pasangan warna tidak membuat seluruh halaman otomatis memenuhi WCAG.

Rumus: (luminansi lebih terang + 0,05) / (luminansi lebih gelap + 0,05), setelah kanal sRGB dilinearkan. Referensi: W3C: Contrast Minimum. Lanjutkan ke artikel dark mode atau navbar aksesibel.