Pemeriksa Kontras

Masukkan warna teks dan latar belakang untuk melihat rasio kontras WCAG serta tingkat kelulusan AA dan AAA.

—Rasio kontras
Teks normalAA4.5:1—
Teks normalAAA7:1—
Teks besarAA3:1—
Teks besarAAA4.5:1—
UI & grafis3:1—
Masukkan warna teks dan latar belakang untuk memeriksa kontras.

Setiap pemeriksaan berjalan langsung di browser Anda. Tidak ada data yang Anda masukkan yang diunggah ke BroBroGo.

Tanya Jawab

Apa arti dari hasil kelulusan AA dan AAA?

AA adalah tingkat standar yang ditargetkan oleh sebagian besar situs web: memerlukan rasio minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar. AAA jauh lebih ketat — memerlukan rasio 7:1 untuk teks normal dan 4.5:1 untuk teks besar. Skala rasio berkisar dari 1:1 (tidak ada kontras) hingga 21:1 (hitam di atas putih).

Apa saja yang dikategorikan sebagai teks berukuran besar?

Teks berukuran mulai dari 18pt (sekitar 24px), atau 14pt (sekitar 18.5px) jika tebal. Teks yang lebih besar tetap mudah dibaca pada kontras yang lebih rendah, sehingga dapat lolos standar AA pada rasio 3:1 dan AAA pada rasio 4.5:1, berbeda dengan batas teks normal yang lebih ketat.

Format warna apa saja yang bisa saya masukkan?

Ketik nilai hex seperti #1a1a1a, nilai rgb() seperti rgb(26, 26, 26), atau nilai hsl() — atau klik salah satu palet untuk memilih warna. Gunakan tombol tukar untuk membalik warna teks dan latar belakang.

Apakah ini menggunakan metode WCAG 2 atau metode APCA yang baru?

Alat ini menggunakan rumus WCAG 2.1 / 2.2, yang menjadi acuan standar aksesibilitas dan audit saat ini. APCA adalah metode baru berbasis persepsi visual yang masih dirancang untuk WCAG 3 — metode ini sangat menjanjikan, tetapi belum menjadi standar kepatuhan resmi, sehingga hasil kelulusan di sini tidak menggunakannya.

Ditulis dan ditinjau oleh tim editorial BroBroGo.Terakhir diperbarui:

Memahami Standar Kontras WCAG 2.1 / 2.2

Aksesibilitas web sangat bergantung pada keterbacaan visual. Alat Pemeriksa Kontras ini dirancang untuk membantu desainer, pengembang, dan tim konten dalam memastikan bahwa kombinasi warna yang digunakan memenuhi standar Web Content Accessibility Guidelines (WCAG) 2.1 / 2.2. Dengan membandingkan warna teks dan warna latar belakang, alat ini menghitung rasio kontras yang menentukan apakah elemen visual pada situs web Anda dapat dibaca dengan jelas oleh semua pengguna, termasuk mereka yang memiliki gangguan penglihatan.

Rasio kontras yang dihasilkan berkisar dari 1:1, yang berarti tidak ada kontras sama sekali (misalnya teks putih di atas latar belakang putih), hingga 21:1, yang merupakan kontras maksimal (teks hitam di atas latar belakang putih). Pengukuran ini menggunakan rumus WCAG 2.1 / 2.2 resmi untuk memberikan hasil evaluasi yang akurat bagi kepatuhan standar aksesibilitas web saat ini.

Input Warna dan Format yang Didukung

Untuk memulai pengujian, Anda perlu memasukkan dua nilai warna ke dalam kolom yang tersedia:

  • Warna teks: Nilai warna untuk karakter atau elemen teks.
  • Warna latar belakang: Nilai warna yang berada tepat di belakang teks.

Alat ini mendukung beberapa format penulisan warna standar yang biasa digunakan dalam desain dan pengembangan web:

  • Format Hex: Nilai warna berbasis heksadesimal, contohnya #1a1a1a.
  • Format RGB: Nilai warna berbasis merah, hijau, dan biru, contohnya rgb(26, 26, 26).
  • Format HSL: Nilai warna berbasis hue, saturation, dan lightness.

Secara default, alat ini memuat warna awal #4f46e5 untuk teks dan #ffffff untuk latar belakang, yang menghasilkan rasio kontras sebesar 6.29. Anda juga dapat menggunakan tombol tukar untuk membalik posisi kedua warna tersebut secara instan.

Jika format warna yang dimasukkan tidak dikenali atau tidak valid, sistem akan menampilkan pesan kesalahan berikut:

  • Untuk kesalahan pada kolom teks: "Masukkan warna teks yang valid, seperti #1a1a1a or rgb(26, 26, 26)."
  • Untuk kesalahan pada kolom latar belakang: "Masukkan warna latar belakang yang valid, seperti #ffffff atau rgb(255, 255, 255)."

Kategori Evaluasi dan Ambang Batas Kelulusan

Alat ini membagi hasil evaluasi ke dalam tiga kategori elemen visual yang berbeda, karena setiap kategori memiliki ambang batas kelulusan yang bervariasi berdasarkan ukuran dan fungsinya:

1. Teks Normal

Kategori ini mencakup teks biasa dengan ukuran standar. Batas kelulusan untuk teks normal adalah:

  • Tingkat AA: Memerlukan rasio kontras minimal sebesar 4.5:1.
  • Tingkat AAA: Memerlukan rasio kontras minimal sebesar 7:1.

2. Teks Besar

Teks yang berukuran lebih besar lebih mudah dibaca, sehingga standar WCAG memberikan kelonggaran rasio kontras yang lebih rendah. Teks besar didefinisikan sebagai teks yang berukuran mulai dari 18pt (sekitar 24px), atau minimal 14pt (sekitar 18.5px) jika ditulis dengan gaya tebal (bold). Batas kelulusannya adalah:

  • Tingkat AA: Memerlukan rasio kontras minimal sebesar 3:1.
  • Tingkat AAA: Memerlukan rasio kontras minimal sebesar 4.5:1.

3. UI & Grafis

Kategori ini mengevaluasi komponen antarmuka pengguna (seperti batas tombol atau ikon aktif) serta elemen grafis penting lainnya. Berbeda dengan teks, kategori ini hanya memiliki satu ambang batas tunggal tanpa pemisahan tingkat AA atau AAA:

  • Persyaratan: Memerlukan rasio kontras minimal sebesar 3:1 untuk dinyatakan lolos.

Membaca Hasil dan Ringkasan Verdict

Setelah Anda memasukkan kombinasi warna, alat akan langsung menampilkan rasio kontras dalam format "X:1" beserta status "Lolos" atau "Gagal" untuk masing-masing kategori di atas.

Untuk mempermudah analisis, alat ini juga memberikan kesimpulan akhir berupa pesan ringkasan (verdict) berdasarkan tingkat kelulusan tertinggi yang dicapai:

  • "Lolos standar AA dan AAA untuk teks normal." – Kombinasi warna sangat aman dan memenuhi standar aksesibilitas tertinggi untuk semua ukuran teks.
  • "Lolos standar AA untuk teks normal." – Memenuhi standar kepatuhan umum untuk teks biasa, namun belum mencapai tingkat AAA.
  • "Hanya lolos standar AA untuk teks besar." – Warna teks terlalu samar untuk ukuran biasa, tetapi masih diperbolehkan khusus untuk teks berukuran besar.
  • "Di bawah batas minimum AA — tingkatkan kontras warna." – Kombinasi warna tidak memenuhi standar aksesibilitas minimum dan harus diganti dengan kontras yang lebih tinggi.

Keamanan Data dan Pemrosesan Lokal

Kami memahami pentingnya privasi dalam alur kerja desain Anda. Setiap pemeriksaan kontras warna yang Anda lakukan diproses secara lokal di dalam browser Anda. Tidak ada data warna, teks, atau informasi apa pun yang Anda masukkan yang diunggah ke server BroBroGo.

Pertanyaan yang Sering Diajukan (FAQ)

Apa arti dari hasil kelulusan AA dan AAA? AA adalah tingkat standar yang ditargetkan oleh sebagian besar situs web: memerlukan rasio minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar. AAA jauh lebih ketat — memerlukan rasio 7:1 untuk teks normal dan 4.5:1 untuk teks besar. Skala rasio berkisar dari 1:1 (tidak ada kontras) hingga 21:1 (hitam di atas putih).

Apa saja yang dikategorikan sebagai teks berukuran besar? Teks berukuran mulai dari 18pt (sekitar 24px), atau 14pt (sekitar 18.5px) jika tebal. Teks yang lebih besar tetap mudah dibaca pada kontras yang lebih rendah, sehingga dapat lolos standar AA pada rasio 3:1 dan AAA pada rasio 4.5:1, berbeda dengan batas teks normal yang lebih ketat.

Format warna apa saja yang bisa saya masukkan? Ketik nilai hex seperti #1a1a1a, nilai rgb() seperti rgb(26, 26, 26), atau nilai hsl() — atau klik salah satu palet untuk memilih warna. Gunakan tombol tukar untuk membalik warna teks dan latar belakang.

Apakah ini menggunakan metode WCAG 2 atau metode APCA yang baru? Alat ini menggunakan rumus WCAG 2.1 / 2.2, yang menjadi acuan standar aksesibilitas dan audit saat ini. APCA adalah metode baru berbasis persepsi visual yang masih dirancang untuk WCAG 3 — metode ini sangat menjanjikan, tetapi belum menjadi standar kepatuhan resmi, sehingga hasil kelulusan di sini tidak menggunakannya.

Konverter WarnaKonversi warna antara HEX, RGB, HSL, HSV, CMYK, dan LAB — cukup edit satu kolom dan kolom lainnya akan langsung menyesuaikan.Pemilih Warna GambarPilih piksel mana saja dari gambar dan baca nilai HEX, RGB, dan HSL-nya, lengkap dengan kaca pembesar untuk pengambilan sampel yang presisi.Konverter Format GambarKonversi gambar JPG, PNG, WebP, HEIC, dan AVIF langsung di browser Anda.Kalkulator Rasio AspekUbah lebar × tinggi apa pun menjadi rasio yang rapi seperti 16:9, atau pilih rasio dan lengkapi sisi yang hilang — untuk video, foto, dan layar.Box Shadow GeneratorGeser slider untuk membentuk box-shadow, tumpuk beberapa lapisan untuk efek kedalaman, dan salin kode CSS instan.Gradient GeneratorBuat gradien linear, radial, atau conic, tambahkan color stops dan tentukan arahnya, lalu salin kode CSS dalam sekali klik.Alat Pengujian MonitorPeriksa layar apa pun dengan pola pengujian layar penuh — piksel mati, kebocoran backlight, banding, gamma, ghosting, refresh rate, dan lainnya.