Lalu periksa dua warna terhadap WCAG AA dan AAA dan lihat teksnya di layar. Konversi warna antara HEX, RGB, HSL, HSV, dan OKLCH, dan uji apakah teks mudah dibaca pada background-nya. Gratis dan berjalan di browser Anda.
Cara mengonversi warna
- Gunakan Pilih untuk memilih warna, atau ketik atau tempel nilai ke Warna apa pun.
- Baca warna yang sama sebagai HEX, RGB, HSL, HSV, OKLCH, dan nama CSS-nya jika ada.
- Tekan Salin di samping format yang Anda inginkan, atau Salin HEX.
Cara memeriksa kontras
- Pilih Warna teks dan Warna background, atau gunakan Pakai warna utama sebagai teks atau Pakai sebagai background.
- Baca rasio kontras dan apakah lolos AA dan AAA untuk teks normal, Teks besar pada 24px, Teks tebal pada 19px, dan Garis tepi tombol.
- Jika pasangan gagal, gunakan warna terdekat yang disarankan yang lolos.
Format mana yang dipakai
HEX dan RGB menggambarkan cahaya merah, hijau, dan biru dalam suatu warna dan berfungsi di mana saja. HSL dan HSV menggambarkan hue, saturasi, dan kecerahan, yang membuatnya lebih mudah menggeser warna secara manual. OKLCH adalah format CSS terbaru: kecerahannya sesuai dengan seberapa terang warna terlihat oleh manusia, jadi dua warna dengan L yang sama benar-benar terlihat sama terangnya, yang bagus untuk palet dan tema. Semua browser modern mendukung oklch() di CSS.
Cara kerja rasio kontras
Rasio membandingkan luminansi relatif dua warna, dari 1:1 untuk warna identik hingga 21:1 untuk hitam di atas putih. Hasil tidak pernah dibulatkan ke atas, jadi 4,49:1 gagal AA. Jika warna teks tembus pandang, warna itu dicampur dengan background lebih dulu. Saat pasangan gagal, warna terdekat yang lolos disarankan untuk salah satu sisi.
WCAG AA meminta 4,5:1 untuk teks normal dan 3:1 untuk teks besar. AAA meminta 7:1 untuk teks normal dan 4,5:1 untuk teks besar. Memenuhinya membantu orang dengan penglihatan rendah dan siapa pun yang membaca di layar terang.
Input yang dipahami alat ini
HEX tiga, empat, enam, dan delapan digit dengan atau tanpa #, rgb() dan rgba() dengan koma atau spasi, hsl() dengan deg, turn, atau rad, hsv(), oklch(), dan oklab(), 148 nama warna CSS, dan angka biasa seperti 59, 130, 246. Alpha setelah garis miring atau sebagai nilai keempat dipertahankan.
Siapa yang memakainya
Desainer dan developer web yang membangun tema, pemilik usaha kecil yang memeriksa bahwa warna merek mereka terbaca, siswa yang membuat slide, dan siapa pun yang punya warna dalam satu format dan membutuhkan yang lain. Untuk menemukan warna dari foto, gunakan pemilih warna gambar.
Pertanyaan
Berapa rasio kontras yang baik?
Targetkan minimal 4,5:1 untuk teks normal. Lebih tinggi lebih baik, dan 7:1 memenuhi AAA.
Mengapa nilai warna yang sama terlihat sedikit berbeda di layar berbeda?
Layar berbeda dalam kecerahan dan warna. Angkanya sama, tetapi tampilan layar mengubah cara terlihatnya.
Apakah ada yang diunggah?
Tidak. Konversi terjadi di browser Anda.