Bahasa IndonesiaID

Contrast Checker – Cek Kontras Warna WCAG

Pilih warna teks dan warna latar: rasio kontras dan hasil aksesibilitasnya langsung muncul.

Teks dan file Anda tetap di browser — tidak ada yang dikirim ke server.

Rasio kontras-
  • Teks normal AA (4,5:1)-
  • Teks normal AAA (7:1)-
  • Teks besar AA (3:1)-
  • Teks besar AAA (4,5:1)-
  • Komponen antarmuka dan grafik AA (3:1)-

Teks besar berukuran minimal 24 px, atau sekitar 18,7 px jika tebal.

Pratinjau

Begini tampilan judul besar

Teks biasa butuh minimal 4,5:1 agar nyaman dibaca. Coba juga di layar kecil atau di bawah cahaya terang.

Teks bantuan kecil · 13 px

TombolKolom input
Saran warna yang lolos
Ubah teks menjadi -
Ubah latar menjadi -

Cara pakai

  1. Pilih warna teks dan latar dengan kotak warna atau ketik kode seperti #fff atau rgb(…). Warna semi-transparan lebih dulu digabungkan dengan latarnya.
  2. Anda akan melihat rasio kontras dan apakah level AA terpenuhi untuk teks normal (4,5:1), teks besar (3:1), dan komponen antarmuka (3:1), juga level AAA yang lebih ketat.
  3. Jika ada yang tidak lolos, “Saran warna yang lolos” menawarkan warna terdekat dengan rona yang sama, hanya kecerahannya yang diubah. “Terapkan” langsung memakainya.
  4. Kedua warna tersimpan di alamat halaman: salin tautannya untuk dibagikan ke tim Anda.

Pertanyaan umum

Apa arti AA dan AAA?

Keduanya adalah level kesesuaian dalam WCAG (Web Content Accessibility Guidelines). Teks normal butuh 4,5:1 untuk level AA dan 7:1 untuk level AAA. Banyak pedoman aksesibilitas situs pemerintah dan perusahaan di berbagai negara merujuk ke level AA.

Bagaimana rasio kontras dihitung?

Alat ini menentukan luminans relatif kedua warna, lalu membagi (yang lebih terang + 0,05) dengan (yang lebih gelap + 0,05). Dua warna yang sama menghasilkan 1:1, hitam di atas putih 21:1. Hasilnya dipotong, bukan dibulatkan, agar nilai yang sedikit di bawah batas tidak pernah tampak lolos.

Kapan aturan komponen antarmuka berlaku?

Elemen tanpa teks, seperti garis tepi tombol, garis kolom input, dan ikon, butuh minimal 3:1 terhadap warna di sekitarnya (WCAG 1.4.11).

Alat serupa

Color pickerHEX, RGB, HSL, dan CMYK sekaligusPalet untuk Tailwind CSSSatu warna, shade 50–950Warna dari gambarWarna dan palet dari gambarASCII art generatorTeks dan foto jadi karakter

Semua alat