Pemeriksa kontras warna

Periksa kontras teks normal dan besar dari warna latar depan dan latar belakang.

Pemeriksa kontras warna

Hasil yang diproses di browser untuk perencanaan dan referensi.

Latar depanLatar belakang

CSS / HEX

PANDUAN

Yang perlu dicek sebelum digunakan

Kapan alat ini berguna

Gunakan alat ini sebelum merilis warna foreground dan background untuk teks isi, label, atau tombol. Masukkan dua warna HEX untuk melihat rasio kontras dan hasil ambang batas teks normal serta teks besar.

Bagaimana hasilnya dihitung

Perhitungannya melakukan linearisasi kanal sRGB, menghitung luminansi relatif, lalu membagi luminansi yang lebih terang ditambah 0.05 dengan luminansi yang lebih gelap ditambah 0.05. Rasio tersebut dibandingkan dengan ambang teks 3:1, 4.5:1, dan 7:1.

Contoh terapan dan interpretasinya

Memasukkan foreground #111111 pada background #FFFFFF menghasilkan rasio yang tinggi. Periksa AA normal terlebih dahulu untuk body copy kecil; untuk kombinasi yang digunakan pada heading besar, juga lihat hasil AA large.

Cakupan dan keterbatasan

Melewati rasio tidak menyelesaikan audit aksesibilitas. Uji ukuran dan bobot font nyata, state interaktif, teks di atas gambar, dan semua informasi yang hanya disampaikan lewat warna.

Pertanyaan umum

Bagaimana cara memindahkan warna dari penguji kontras warna ke aplikasi lain?

Gunakan tombol salin di bawah hasil untuk menyalin teks CSS, HEX, atau HSL. Pastikan aplikasi tujuan menafsirkan format warna yang sama.

Apakah warna layar dari penguji kontras warna akan cocok saat cetak?

Tidak otomatis. Layar RGB emisif dan kertas serta tinta reflektif menggunakan gamut dan model pencampuran yang berbeda, jadi profil cetak dan proof tetap diperlukan.

Apakah saya bisa menyetujui design token hanya dari penguji kontras warna?

Gunakan sebagai kandidat terlebih dahulu, lalu uji latar nyata, dark mode, state interaksi, dan kontras teks sebelum menamai dan menyetujui token.