Pemeriksa Kontras Warna
BaruPeriksa rasio kontras WCAG AA/AAA antara warna teks dan latar belakang.
Large heading — 24px bold
Large text, 18.66px and up reads at 3:1.
Normal body text. The quick brown fox jumps over the lazy dog and reads comfortably at 4.5:1 or better.
Small print and captions — the hardest text to read.
Keeps your hue & saturation — only the lightness changes — so brand colors stay recognizable.
Pairwise palette grid
Paste several colors (hex, one per line or separated by spaces / commas) to see which foreground/background pairs pass AA (4.5:1). First 8 colors are used.
Runs entirely in your browser. Nothing is uploaded.
Periksa kontras warna WCAG langsung di browser Anda
Pemeriksa kontras warna ini mengukur rasio kontras WCAG antara warna teks dan warna latar belakang, lalu langsung memberi tahu Anda apakah pasangan warna tersebut lulus level AA dan AAA untuk teks normal, teks besar, dan komponen UI. Ketik nilai hex, ubah kolom RGB atau HSL, geser slider lightness, atau gunakan eyedropper untuk mengambil sampel warna apa pun di layar Anda — rasio, matriks lulus-gagal, dan pratinjau langsung akan diperbarui saat Anda mengetik.
Alat ini bekerja seperti tool yang sudah dipercaya para desainer — memakai rumus WCAG yang sama dengan WebAIM dan Adobe Color — tetapi menambahkan pratinjau langsung yang bisa dibaca, skor APCA (WCAG 3), dan perbaikan satu klik untuk pasangan warna yang gagal. Semuanya berjalan secara lokal dalam JavaScript: warna Anda tidak pernah meninggalkan perangkat, dan tidak perlu akun sama sekali.
Memahami ambang batas WCAG AA dan AAA
Rasio kontras WCAG berkisar dari 1:1 (dua warna identik) hingga 21:1 (hitam di atas putih). Level AA — standar yang diwajibkan sebagian besar regulasi seperti ADA dan Section 508 — membutuhkan 4,5:1 untuk teks normal dan 3:1 untuk teks besar. Level AAA menaikkannya menjadi 7:1 dan 4,5:1. Teks besar didefinisikan sebagai 18pt (24px) ke atas, atau 14pt (sekitar 18,66px) ke atas jika tebal (bold). Ambang batas ini identik di WCAG 2.0, 2.1, dan 2.2, sehingga sistem warna yang sudah memenuhi AA tetap valid hingga hari ini.
Matriks lulus-gagal memecah setiap ambang batas secara terpisah, sehingga sekilas Anda bisa melihat bahwa abu-abu seperti #767676 di atas putih nyaris lolos AA untuk teks isi di 4,54:1 tetapi belum mencapai 7:1 yang dibutuhkan AAA. Faktanya, #767676 telah menjadi patokan dalam dunia aksesibilitas karena merupakan abu-abu netral paling terang yang masih lulus 4,5:1 di atas latar putih murni (#FFFFFF). Jika tim produk Anda perlu memenuhi kepatuhan hukum (ADA, EN 301 549, Section 508), AA adalah target yang harus dicapai. AAA layak dikejar pada antarmuka yang padat bacaan di mana pengguna dengan penglihatan rendah menjadi prioritas — spesifikasi WCAG sendiri mencatat bahwa AAA tidak realistis sebagai persyaratan menyeluruh untuk seluruh halaman.
Cara kerja rumus rasio kontras WCAG
Rasio kontras dihitung dengan rumus (L1 + 0,05) / (L2 + 0,05), di mana L1 adalah luminans relatif warna yang lebih terang dan L2 luminans relatif warna yang lebih gelap. Luminans relatif bukan sekadar rata-rata kecerahan RGB — ia adalah nilai berbobot perseptual yang sudah dikoreksi gamma. Setiap kanal sRGB pertama-tama dibagi 255 untuk dinormalisasi ke rentang [0, 1]. Jika hasilnya ≤ 0,03928, ia dilinearkan sebagai C_linear = C / 12,92; jika tidak, digunakan C_linear = ((C + 0,055) / 1,055)^2.4. Ketiga kanal yang sudah linear kemudian digabung sebagai L = 0,2126 × R_linear + 0,7152 × G_linear + 0,0722 × B_linear.
Koefisien 0,2126, 0,7152, dan 0,0722 mencerminkan sensitivitas mata manusia yang tidak merata terhadap cahaya merah, hijau, dan biru. Mata jauh lebih peka terhadap hijau, itulah sebabnya hijau murni di atas putih (#00FF00) memiliki luminans 0,7152 — hampir seterang putih itu sendiri — sehingga rasio kontrasnya hanya sekitar 1,37:1 meskipun terlihat mencolok. Offset 0,05 dalam rumus mencegah pembagian dengan nol saat kedua warna hitam murni dan memodelkan pantulan cahaya lingkungan pada layar nyata. Karena kedua sisi memakai offset yang sama, rasio maksimum putih murni terhadap hitam murni tepat 21:1, dan dua warna identik selalu menghasilkan tepat 1:1. WebAIM dan alat ini memakai rumus W3C yang sama, sehingga hasilnya bisa dibandingkan langsung.
Pratinjau, perbaiki, dan rilis pasangan warna yang aksesibel
Angka hanya menceritakan separuh cerita, jadi pratinjau langsung menampilkan judul, teks isi, teks kecil, serta contoh tombol dan chip dalam warna pilihan Anda yang sebenarnya — lihat keterbacaannya, jangan hanya membaca rasionya. Ketika sebuah pasangan gagal, fitur 'Make it pass' mempertahankan hue dan saturasi warna Anda lalu menggeser lightness ke warna terdekat yang melewati level pilihan Anda (AA, AA teks besar, atau AAA), kemudian menerapkannya dalam satu klik. Anda bisa memilih menyesuaikan warna teks atau latar belakangnya. Contohnya, #8ED1FC di atas putih gagal di 1,6:1; menurunkan lightness-nya ke #0A6CB5 mencapai 4,5:1 sambil tetap berada di keluarga biru yang sama.
Grid berpasangan (pairwise grid) menerima satu palet penuh dan menunjukkan kombinasi warna mana yang lulus dalam sekali pandang — sangat berguna saat membangun design system di mana setiap pasangan foreground dan background harus aman. Alih-alih menguji puluhan pasangan satu per satu, Anda menempelkan palet sekali dan langsung melihat matriks lengkapnya. Ini juga strategi terbaik untuk dark mode: setiap pasangan yang lulus di mode terang harus diverifikasi ulang secara terpisah di mode gelap, karena palet yang mencapai 7:1 di mode terang bisa dengan mudah jatuh di bawah 1,5:1 jika warnanya dibalik begitu saja.
Kontras non-teks untuk ikon dan komponen UI
Kontras bukan hanya soal teks. WCAG 2.1 SC 1.4.11 mewajibkan kontras 3:1 untuk batas visual komponen interaktif — garis tepi input, indikator fokus, status toggle — serta untuk ikon dan grafik yang bermakna. Gambar dekoratif dan komponen yang dinonaktifkan dikecualikan. Matriks di alat ini menyertakan baris khusus UI dan grafik pada ambang 3:1 sehingga Anda bisa memastikan garis tepi tombol atau ikon benar-benar terlihat, bukan hanya label di dalamnya.
Inilah area di mana banyak tim gagal audit tanpa menyadarinya. Border input abu-abu terang (#D1D1D1 di atas putih hanya 1,4:1) adalah pelanggaran WCAG 2.1 yang umum, bahkan ketika semua teks di halaman sudah lulus — gaya bawaan browser dan framework CSS sering datang dengan border abu-abu muda yang hanya mencapai sekitar 1,5:1. Hal serupa berlaku untuk teks placeholder: browser memakai abu-abu sedang secara bawaan, dan spesifikasi WCAG menegaskan placeholder tidak dikecualikan — jika ia menyampaikan petunjuk konten kepada pengguna, ia butuh kontras 4,5:1 yang sama seperti teks biasa. Memeriksa komponen UI Anda di sini hanya butuh beberapa detik dan mencegah kejutan saat audit formal.
APCA: gambaran awal kontras di WCAG 3
Di samping rasio klasik, alat ini menampilkan skor APCA Lc — metrik kontras perseptual yang diusulkan untuk WCAG 3. Rumus WCAG 2 memperlakukan font tipis 12px dan font tebal 700 berukuran 16px secara identik selama keduanya melewati 4,5:1, dan hanya memakai dua kategori ukuran dengan batas kaku. APCA, yang dikembangkan oleh Andrew Somers, memodelkan bagaimana mata benar-benar membaca teks terang-di-gelap versus gelap-di-terang dan memperhitungkan ketebalan font. Skalanya berkisar dari sekitar −108 hingga +106; tandanya mengodekan polaritas. Target praktis: Lc 90 untuk teks isi ideal, Lc 75 sebagai batas minimum teks isi, Lc 60 untuk teks besar, dan Lc 45 untuk judul besar. APCA juga menyediakan tabel font yang memasangkan nilai Lc minimum dengan ukuran dan ketebalan font tertentu — rekomendasi yang jauh lebih rinci daripada sistem dua ambang milik WCAG 2.
Per pertengahan 2025, WCAG 3.0 masih berupa Working Draft dan belum punya jadwal terbit sebagai W3C Recommendation, sehingga kepatuhan hari ini tetap berarti memenuhi ambang 4,5:1 dan 3:1 pada WCAG 2.2 Level AA. Menampilkan APCA berdampingan dengan rasio saat ini memungkinkan Anda menyiapkan palet untuk masa depan tanpa menunggu spesifikasinya final. Jika skor Lc Anda sudah berada di rentang yang direkomendasikan, kemungkinan besar Anda tetap patuh ketika WCAG 3 kelak menjadi standar acuan.
Persyaratan hukum dan perbandingan dengan tool lain
Di Amerika Serikat, Americans with Disabilities Act (ADA) telah ditafsirkan pengadilan sebagai mewajibkan situs web yang aksesibel. Aturan final DOJ tahun 2024 di bawah Title II secara resmi menetapkan WCAG 2.1 Level AA sebagai standar yang dapat ditegakkan untuk situs pemerintah negara bagian dan lokal. Untuk lembaga federal, Section 508 mewajibkan WCAG 2.0 AA sejak pembaruan 2018. Gugatan aksesibilitas digital di AS melonjak melewati 4.000 gugatan pada 2023 — naik dari sekitar 800 pada 2017 — dengan kasus penting Robles v. Domino's Pizza (9th Circuit, 2019). Di Eropa, European Accessibility Act (EAA) mulai ditegakkan sejak 28 Juni 2025 dan mengacu pada EN 301 549 (WCAG 2.1 Level AA); perusahaan non-Uni Eropa yang menjual produk digital ke konsumen UE juga masuk cakupannya, menjadikan WCAG 2.1 AA praktis sebagai standar komersial global.
Dibandingkan alternatifnya: contrast checker WebAIM di webaim.org adalah tool aksesibilitas gratis yang paling banyak dikutip dan memakai rumus WCAG 2 yang sama, tetapi tidak menampilkan APCA, tidak punya pratinjau teks langsung, tidak bisa memperbaiki otomatis pasangan yang gagal, dan tidak punya grid palet berpasangan. Adobe Color di bagian Accessibility Tools menampilkan lulus-gagal AA/AAA dan simulator buta warna, tetapi butuh akun Adobe gratis untuk menyimpan pekerjaan dan tidak bisa menyarankan warna pengganti secara otomatis. Chrome DevTools memiliki badge rasio kontras di color picker panel Elements — berguna untuk pemeriksaan di dalam browser, tetapi hanya di dalam DevTools dan tidak bisa dibagikan sebagai tautan mandiri. Alat ini berjalan tanpa login, menunjukkan rasio WCAG 2 sekaligus skor APCA Lc, dan setiap perhitungan berjalan lokal — warna Anda tidak pernah meninggalkan perangkat.
Strategi desain praktis agar selalu lulus kontras
Strategi paling andal adalah menjangkarkan palet Anda pada beberapa nilai yang sudah pasti aman lalu membangun dari sana. #1a1a1a di atas putih menghasilkan 18,1:1 — jauh di dalam wilayah AAA dan nyaris tak terbedakan dari hitam bagi kebanyakan mata, sambil menghindari bobot optis hitam murni yang terlalu keras. Untuk teks terbalik (terang di atas warna), latar apa pun yang lebih gelap dari sekitar #595959 akan lulus 4,5:1 dengan teks putih.
Untuk perbaikan cepat pasangan yang gagal: gelapkan warna teks atau terangkan latar belakang hingga melewati ambang, dengan hanya mengubah lightness agar hue merek Anda tetap terjaga. Ekstensi audit seperti Axe menandai apa pun di bawah 4,5:1 untuk teks normal dan di bawah 3:1 untuk teks besar sebagai pelanggaran, jadi itulah ambang yang muncul dalam audit aksesibilitas otomatis. Targetkan minimal 4,5:1 untuk teks isi, 3:1 untuk judul besar dan border komponen UI, dan kejar 7:1 (AAA) di mana desain memungkinkan — abu-abu gelap #333333 di atas putih mencapai 12,6:1, jauh di atas AAA dan nyaman untuk hampir semua pengguna. Dengan pratinjau langsung, saran perbaikan otomatis, dan grid palet dalam satu halaman, alat ini membuat seluruh alur — dari mengecek satu pasangan sampai memvalidasi design system utuh — selesai dalam hitungan menit.
Frequently asked questions
Apa itu pemeriksa kontras warna?
Pemeriksa kontras warna mengukur rasio kontras WCAG antara warna teks (foreground) dan latar belakangnya, lalu memberi tahu apakah pasangan tersebut mudah dibaca menurut pedoman aksesibilitas. Masukkan dua warna dan alat ini mengembalikan rasio dari 1:1 (identik) hingga 21:1 (hitam di atas putih) beserta hasil lulus atau gagal AA dan AAA untuk teks normal, teks besar, dan komponen UI. Contohnya, #595959 di atas #FFFFFF mendapat skor 7,0:1 dan lulus AAA. Alat ini berjalan sepenuhnya di browser Anda — tidak ada warna yang dikirim ke server, dan tidak perlu akun.
Apa itu rasio kontras warna WCAG?
WCAG menetapkan rasio kontras minimum antara teks dan latar belakang: 4,5:1 untuk teks normal dan 3:1 untuk teks besar pada level AA, naik menjadi 7:1 dan 4,5:1 pada level AAA. Rasio ini membandingkan luminans relatif kedua warna dan berkisar dari 1:1 (tanpa kontras) hingga 21:1. Teks hitam murni (#000000) di atas putih (#FFFFFF) adalah nilai maksimum, 21:1. Ambang ini berlaku untuk WCAG 2.0, 2.1, dan 2.2 — angkanya tidak berubah di semua versi, sehingga sistem warna yang sudah memenuhi AA tetap valid hingga hari ini.
Apa itu aturan kontras 4,5:1?
4,5:1 adalah rasio kontras minimum level AA WCAG 2 untuk teks isi berukuran normal (Success Criterion 1.4.3, Contrast Minimum). Warna yang lebih terang dan lebih gelap harus berbeda luminans relatif setidaknya 4,5 kali. Contohnya, abu-abu #767676 di atas putih adalah 4,54:1 — kira-kira abu-abu paling terang yang masih lulus untuk teks isi di latar putih. Teks besar hanya butuh 3:1. Kebanyakan gugatan ADA terkait aksesibilitas web mengacu pada WCAG 2.1 AA sebagai standar yang diharapkan, menjadikan 4,5:1 sebagai batas bawah hukum praktis untuk teks di situs publik.
Apa perbedaan WCAG AA dan AAA?
AA adalah standar dasar yang paling banyak diwajibkan — 4,5:1 untuk teks normal dan 3:1 untuk teks besar. AAA adalah level lanjutan — 7:1 untuk teks normal dan 4,5:1 untuk teks besar. Sebagian besar regulasi aksesibilitas (ADA, Section 508, dan EN 301 549 di Eropa) menargetkan AA. AAA direkomendasikan bila memungkinkan, tetapi spesifikasi WCAG sendiri mencatat bahwa AAA tidak realistis sebagai persyaratan menyeluruh untuk seluruh halaman — jadi AA adalah target praktis untuk sebagian besar situs publik. Jika pengguna Anda mencakup orang dengan penglihatan rendah, AAA layak dikejar di bagian yang desainnya memungkinkan.
Berapa rasio kontras yang dibutuhkan untuk teks besar?
Teks besar membutuhkan 3:1 pada level AA, atau 4,5:1 pada AAA — ambang yang lebih rendah dari teks normal karena huruf yang lebih besar tetap mudah dibaca dengan kontras lebih rendah. WCAG mendefinisikan teks besar sebagai minimal 18pt (24px) dengan ketebalan biasa, atau 14pt (sekitar 18,66px) jika bold. Contohnya, judul 24px berwarna #949494 di atas putih mencapai 3:1 dan lulus AA teks besar, tetapi warna yang sama akan gagal aturan 4,5:1 untuk teks isi. Matriks di alat ini menunjukkan lulus/gagal untuk teks normal dan teks besar sekaligus, sehingga perbedaannya terlihat sekilas.
Bagaimana rasio kontras dihitung?
Rasio kontras memakai rumus (L1 + 0,05) / (L2 + 0,05), di mana L1 adalah luminans relatif warna yang lebih terang dan L2 warna yang lebih gelap. Luminans relatif adalah campuran berbobot dari kanal merah, hijau, dan biru yang telah dikoreksi gamma (0,2126·R + 0,7152·G + 0,0722·B setelah setiap kanal dilinearkan). Hasilnya berkisar dari 1 hingga 21, itulah mengapa kontras dinyatakan sebagai rasio seperti 4,5:1. Contrast checker WebAIM dan alat ini memakai rumus W3C yang sama — sehingga hasil kedua alat bisa dibandingkan langsung.
Berapa rasio kontras yang baik untuk aksesibilitas?
Targetkan minimal 4,5:1 untuk teks isi (batas AA). Untuk kenyamanan membaca teks panjang dan pengguna dengan penglihatan rendah, kejar AAA (7:1) bila desain memungkinkan. Abu-abu gelap #333333 di atas putih adalah 12,6:1 — jauh di atas AAA dan nyaman bagi hampir semua pengguna. Usahakan minimal 3:1 untuk judul besar dan 3:1 untuk border komponen UI. Ekstensi browser aksesibilitas Axe menandai apa pun di bawah 4,5:1 untuk teks normal dan di bawah 3:1 untuk teks besar sebagai pelanggaran, jadi itulah ambang yang muncul dalam audit aksesibilitas otomatis.
Apakah WCAG 2.1 atau 2.2 yang diwajibkan?
Ambang kontras identik di WCAG 2.0, 2.1, dan 2.2 (4,5:1, 3:1, dan 7:1). WCAG 2.1 menambahkan kontras non-teks (SC 1.4.11, mewajibkan 3:1 untuk komponen UI dan grafik). WCAG 2.2 adalah W3C Recommendation terkini dan versi yang paling banyak dirujuk regulasi baru, jadi targetkan 2.2 level AA. Pekerjaan yang sudah memenuhi AA di 2.0 atau 2.1 tetap patuh untuk kontras teks karena persyaratan intinya tidak berubah. Jika Anda berada di Uni Eropa, EN 301 549 merujuk WCAG 2.1 AA, meskipun banyak regulator kini menerima 2.2.
Apakah ikon dan komponen UI juga butuh kontras?
Ya. WCAG 2.1 SC 1.4.11 (Non-text Contrast) mewajibkan minimal 3:1 terhadap warna di sekitarnya untuk batas visual komponen UI — border input, tepi tombol, focus ring, status toggle — serta untuk ikon dan grafik yang bermakna. Contohnya, border input #D1D1D1 di atas putih hanya 1,4:1 dan gagal, sedangkan #767676 (4,5:1) lulus dengan nyaman. Matriks lulus-gagal di alat ini menyertakan baris khusus UI dan grafik pada ambang 3:1, sehingga Anda bisa memastikan garis tombol dan ikon Anda lulus tanpa perhitungan terpisah.
Apa itu kontras APCA / WCAG 3?
APCA (Accessible Perceptual Contrast Algorithm) adalah metode kontras yang diusulkan untuk WCAG 3 mendatang. Alih-alih rasio tunggal, ia mengembalikan nilai kontras kecerahan perseptual (Lc) dari sekitar -108 hingga 106; semakin besar magnitudonya, semakin tinggi kontrasnya. Panduan kasar: Lc 90 disukai untuk teks isi, Lc 75 minimum untuk teks isi, Lc 60 cocok untuk teks besar, dan Lc 45 untuk judul besar. APCA memperhitungkan polaritas teks-di-gelap versus teks-di-terang serta ketebalan font lebih baik daripada rasio WCAG 2, itulah sebabnya alat ini menampilkan kedua skor berdampingan agar palet Anda siap untuk masa depan.
Bagaimana cara memperbaiki rasio kontras yang gagal?
Perbaikan tercepat adalah menggelapkan warna teks atau menerangkan latar belakang hingga melewati ambang, dengan mempertahankan hue merek Anda dan hanya mengubah lightness. Contohnya, #8ED1FC di atas putih gagal di 1,6:1; menurunkan lightness-nya ke #0A6CB5 mencapai 4,5:1 sambil tetap berada di keluarga biru yang sama. Fitur bawaan 'Make it pass' di alat ini melakukannya secara otomatis — ia menggeser teks atau latar ke warna lulus terdekat dan menerapkannya dalam satu klik, sehingga Anda mendapat hasil yang patuh tanpa mengutak-atik nilai hex secara manual. Bagian aksesibilitas Adobe Color melakukan hal serupa tetapi butuh akun Adobe gratis untuk menyimpan pekerjaan Anda.
Bagaimana alat ini dibandingkan dengan WebAIM, Adobe Color, dan Chrome DevTools?
Contrast checker WebAIM di webaim.org adalah tool aksesibilitas yang paling banyak dikutip di internet dan memakai rumus WCAG 2 yang sama dengan alat ini. Namun ia tidak menampilkan APCA, tidak punya pratinjau teks langsung, tidak bisa memperbaiki otomatis pasangan yang gagal, dan tidak punya grid palet berpasangan. Bagian Accessibility Tools di Adobe Color butuh akun Adobe gratis untuk menyimpan palet dan tidak bisa menyarankan warna lulus secara otomatis. Chrome DevTools punya badge rasio kontras di color picker panel Elements — berguna untuk pemeriksaan dalam browser, tetapi hanya di dalam DevTools dan tidak bisa dibagikan sebagai tautan mandiri. Pemeriksa ini berjalan tanpa login, menampilkan rasio WCAG 2 sekaligus skor APCA Lc, merender pratinjau langsung dalam warna pilihan Anda, dan memungkinkan pengujian grid palet penuh dalam satu tampilan.
Related tools
Lihat semua perkakas
Baru Generator Box-Shadow CSS
Buat box-shadow CSS berlapis dengan preset dan pratinjau langsung. Salin CSS, nilai, atau gaya React secara instan.
Baru Generator Palet Warna
Hasilkan palet komplementer, analog, triadik, dan monokromatik.
Baru Generator Cubic Bezier
Rancang kurva easing CSS dengan menyeret titik kontrol, lengkap pratinjau langsung.
Baru Generator Border Radius
Buat sudut membulat CSS dan bentuk blob organik secara visual.
Baru Playground Flexbox CSS
Atur properti flex dengan pratinjau langsung dan salin CSS-nya.
Baru Playground Grid CSS
Atur kolom, gap, dan perataan grid dengan pratinjau langsung dan CSS.