Pemeriksa Kontras Warna WCAG

Evaluasi rasio kontras warna teks dan latar belakang sesuai dengan pedoman WCAG 2.1. Hasilkan penyesuaian warna yang mudah diakses secara instan.

HEX/RGB/HSL
HEX/RGB/HSL
Semuanya berjalan secara lokal di browser Anda.

Pratinjau Teks Langsung

Judul Besar (18pt Tebal / 24pt Reguler)

Ini adalah preview dari gaya teks tajuk besar.

Teks Normal (Di Bawah 18pt)

Lorem ipsum dolor sit amet, konsectetur adipiscing elit.

Rasio Kontras

18.6:1

Status Kepatuhan WCAG 2.1

Persyaratan WCAG AA
Teks Normal (4.5:1) PASS
Teks Besar (3.0:1) PASS
Persyaratan WCAG AAA
Teks Normal (7.0:1) PASS
Teks Besar (4.5:1) PASS

Pedoman WCAG 2.1

Verifikasi standar kontras dengan mudah untuk membangun antarmuka yang mudah diakses yang mematuhi pedoman Bagian 508, ADA, dan WCAG AA atau AAA.

Mesin Saran

Secara otomatis menyesuaikan warna secara berkekuatan di sepanjang koordinat HSL untuk menemukan alternatif terdekat yang memenuhi kriteria kontras.

Sepenuhnya Sisi Klien

Perhitungan dieksekusi secara lokal di dalam konteks browser Anda. Tidak ada warna, file, atau koordinat telemetri yang dikirimkan ke server kami.

Alat Warna Terkait

Konverter Warna HEX RGB HSL
Konversi warna dan sesuaikan koordinat kecerahan.
Gambar warna picker
Ekstrak palet warna dari maket desain.
CSS Konverter Warna
Konversi antara format CMYK, HSV, RGB, HSL, dan HEX.

Pemeriksa Kontras Warna

Menghitung kontras WCAG untuk warna depan dan latar belakang dan menunjukkan hasil teks-saiz umum.

Pengantar
2 warna CSS yang valid dan teks preview optional.
output
Perbandingan kontras dengan WCAG AA dan AAA melewati atau gagal indikator.
Pembatasan yang nyata
Pengiraan hanya mencakup kontras luminan; itu tidak mengesahkan antarmuka atau akun untuk rendering fon, gerakan, fokus, atau non-warna.
Privasi dan pengendalian data
dua warna CSS yang sah dan teks preview opsi diproses dalam tab browser ini. Converter tidak menerima atau menyimpannya; menutup atau mengisi ulang halaman akan memudahkan kondisi kerja kecuali alat itu secara eksplisit menawarkan download lokal.

Bagaimana cara menggunakan alat ini

  1. Menyediakan dua warna CSS yang valid dan teks preview optional dalam kontrol alat.
  2. Pilih pengaturan yang mempengaruhi proporsi kontras dengan WCAG AA dan AAA melewati atau gagal indikator, kemudian jalankan alat.
  3. Periksa proporsi kontras dengan WCAG AA dan AAA melewati atau gagal indikator sebelum menyalin atau men-downloadnya.

Modus kegagalan umum

Warna yang tidak sah tidak dapat diukur, dan transparansi tanpa latar belakang yang diselesaikan dapat membuat ratus tidak masuk akal.

Contoh yang berguna

Bandingkan teks #f2937 di #ffffff untuk melihat perbandingan dari teks normal dan besar.