Warna diperiksa di browser Anda; tidak ada yang diunggah
WCAG AA & AAA • Skor APCA • Tanpa Unggah
Pemeriksa Kontras Warna
Periksa kontras teks dan latar belakang sesuai WCAG AA dan AAA, lengkap dengan skor APCA. Uji teks normal, teks besar, dan teks UI langsung di browser tanpa mengunggah apa pun.
Periksa kontras warna sesuai standar WCAG
Masukkan warna teks dan warna latar belakang untuk melihat rasio kontras WCAG 2.x, hasil AA dan AAA untuk teks normal, teks besar, dan teks UI, serta skor perseptual APCA. Sesuaikan salah satu warna hingga memenuhi tingkat yang diperlukan.
Cara memeriksa kontras warna
- 1.Masukkan warna teks dan latar belakang menggunakan pemilih warna, kolom HEX, atau penggeser HSL
- 2.Lihat rasio kontras serta indikator AA / AAA yang diperbarui secara instan
- 3.Sesuaikan kecerahan hingga teks normal, besar, atau UI mencapai tingkat yang Anda perlukan
- 4.Salin URL untuk membagikan pasangan warna yang sama kepada orang lain
Mengapa menggunakan pemeriksa kontras ini
Menggunakan rumus resmi WCAG untuk menghitung luminansi relatif dan kontras
Menyertakan skor perseptual APCA dari draf WCAG 3
Pasangan warna disimpan di URL sehingga mudah dibagikan
FAQ pemeriksa kontras warna
Apakah warna yang saya masukkan dikirim ke server?
Tidak. Rasio kontras dihitung secara lokal di browser Anda berdasarkan dua warna yang dimasukkan.
Apa arti rasio kontras?
Rasio ini membandingkan luminansi relatif kedua warna dalam skala 1:1 (warna yang sama) hingga 21:1 (hitam di atas putih). WCAG menetapkan rasio minimum, misalnya 4.5:1 untuk teks normal pada tingkat AA.
Apa arti AA dan AAA?
Keduanya adalah tingkat kesesuaian WCAG. AA memerlukan setidaknya 4.5:1 untuk teks normal dan 3:1 untuk teks besar; AAA menaikkan ambang tersebut menjadi 7:1 dan 4.5:1.
Apa yang termasuk teks besar?
Menurut WCAG, teks besar berukuran minimal 18 pt (24 px) dengan bobot normal atau 14 pt (18,66 px) dengan huruf tebal. Teks besar memerlukan kontras lebih rendah: 3:1 untuk AA dan 4.5:1 untuk AAA.
Apa itu skor APCA?
APCA adalah algoritme kontras perseptual yang diusulkan untuk WCAG 3 dan mengukur perbedaan kecerahan yang dirasakan. Halaman ini menampilkan nilai Lc dari draf WCAG 3 saat ini sebagai indikator tambahan; kesesuaian tetap didasarkan pada WCAG 2.x AA / AAA.
Bagaimana cara memperbaiki warna yang gagal?
Gunakan tombol Perbaiki otomatis ke AA di samping salah satu warna untuk menyesuaikan kecerahan warna tersebut hingga teks normal mencapai rasio 4.5:1. Setelah itu, Anda dapat menyempurnakan rona, saturasi, atau kecerahan dengan penggeser.