# Cek Kontras Warna Bandingkan warna teks dengan warna latar belakang terhadap WCAG 2.2 langsung di sini, atau masukkan alamat halaman untuk menemukan setiap teks di bawah batas minimum kontras, beserta warna yang terukur dan warna terdekat yang lolos. ## Yang dicek alat ini - Rasio WCAG dari dua warna apa pun: Kalkulator menggunakan rumus luminans relatif dari definisi WCAG 2.2 dan menampilkan hasilnya untuk teks normal, teks besar, dan komponen antarmuka, pada level AA dan AAA. Kalkulator ini berjalan di browser Anda. - Warna yang lolos, hasil perhitungan: Jika sebuah pasangan gagal, kalkulator mencari warna teks terdekat dengan rona yang sama yang mencapai 4.5:1 atau 7:1, sehingga Anda mengubah desain sesedikit mungkin. - Setiap teks berkontras rendah di halaman: Pemindaian halaman menjalankan aturan color-contrast dari axe-core di browser Chrome sungguhan dan mencantumkan setiap elemen yang gagal beserta warna teks, warna latar belakang, ukuran font, dan rasionya. - Dikelompokkan per pasangan warna: Kegagalan dikelompokkan berdasarkan warna teks dan warna latar belakang, karena satu perubahan pada warna tema biasanya memperbaiki semua elemen yang menggunakannya. - Ambang yang tepat untuk teks besar: Teks berukuran minimal 24 piksel, atau 18,66 piksel jika tebal, memerlukan 3:1, bukan 4.5:1. Pemindaian menerapkan ambang yang tepat pada setiap elemen berdasarkan ukuran dan ketebalan font hasil perhitungan. - Yang tidak dapat diukur, dan alasannya: Teks di atas gambar, gradien, atau elemen yang bertumpuk dicantumkan terpisah beserta alasannya, sehingga Anda tahu persis apa yang perlu dicek secara visual. ## Yang tidak dapat dicek - Mengukur teks di atas foto, gradien, atau video. Software tidak dapat mengetahui bagian gambar mana yang berada di belakang setiap huruf, jadi teks seperti ini dicantumkan untuk Anda cek. - Memeriksa status hover, fokus, atau status lainnya. Pemindaian melihat halaman saat dimuat; cek warna-warna tersebut dengan kalkulator. - Memindai ikon, garis tepi, dan kolom formulir di halaman untuk WCAG 1.4.11. Kalkulator menampilkan hasil 3:1 untuk setiap pasangan yang Anda masukkan. - Membaca teks yang menjadi bagian dari gambar, seperti banner yang tulisannya menyatu di dalam gambar. - Menguji lebih dari halaman yang Anda masukkan. Pemindaian gratis lengkap menguji hingga lima halaman penting. ## Mengapa ini penting Kontras rendah adalah kegagalan aksesibilitas yang paling umum di web. Analisis WebAIM tahun 2026 terhadap halaman beranda satu juta situs teratas menemukan teks berkontras rendah di 83,9% halaman tersebut, dengan rata-rata 34 kasus per halaman. Teks yang samar sulit dibaca oleh orang dengan low vision atau gangguan penglihatan warna, dan oleh siapa pun yang memakai ponsel di bawah sinar matahari terang. Kriteria keberhasilan 1.4.3 WCAG 2.2, pada Level AA, menetapkan batas minimum 4.5:1 untuk teks normal dan 3:1 untuk teks besar. Masalah ini juga salah satu yang paling murah untuk diperbaiki: di sebagian besar situs, segelintir warna tema menyebabkan hampir semua kegagalan, dan mengubahnya akan memperbaiki semua halaman sekaligus. ## Cara membaca hasilnya - Rasio kontras: Dari 1:1 (warna yang sama dua kali) hingga 21:1 (hitam di atas putih). Rasio dibulatkan ke bawah, jadi pasangan yang menunjukkan 4.49:1 gagal memenuhi batas minimum 4.5:1. - Teks normal, AA (4.5:1): Batas minimum untuk teks isi, link, label, dan teks tombol menurut WCAG 1.4.3. - Teks besar, AA (3:1): Untuk teks berukuran minimal 24 piksel, atau 18,66 piksel jika tebal. WCAG mendefinisikan teks besar sebagai 18 poin, atau 14 poin tebal. - AAA (7:1 dan 4.5:1): Level yang ditingkatkan dalam WCAG 1.4.6. Level ini tidak diperlukan untuk kesesuaian AA, tetapi membantu lebih banyak pembaca. - Ikon, garis tepi, dan kolom formulir (3:1): WCAG 1.4.11 meminta 3:1 terhadap warna di sebelahnya untuk bagian kontrol dan grafik yang perlu dilihat orang agar dapat menggunakannya. - Teks yang gagal: Setiap elemen yang diukur pemindaian di bawah ambangnya, beserta selector, warna, ukuran, dan rasionya. Buka salah satunya untuk melihat markup-nya dan, jika tersedia, tangkapan layarnya. - Perlu dicek secara visual: Teks yang tidak dapat diukur axe-core, beserta alasannya, misalnya ada gambar atau gradien di belakangnya. ## Cara memperbaiki masalah yang paling umum - Teks abu-abu di atas putih: #767676 kurang lebih adalah abu-abu paling terang yang mencapai 4.5:1 di atas putih (4.54:1). Abu-abu yang lebih terang seperti #999999 (2.84:1) sering menjadi penyebab kegagalan di footer, keterangan gambar, placeholder, dan harga. - Teks putih di tombol berwarna merek: Jika teks putih di atas warna merek Anda gagal, gelapkan latar tombol beberapa tingkat atau gunakan teks gelap. Cek juga warna hover dan fokus, karena warna ini sering lebih terang. - Teks placeholder di formulir: Teks placeholder tetaplah teks dan memerlukan 4.5:1. Lebih baik lagi, gunakan label yang terlihat di atas kolom agar placeholder bukan satu-satunya petunjuk. - Teks di atas gambar dan slider: Letakkan teks di atas latar solid atau semi-transparan, atau tambahkan lapisan gelap pada gambar, lalu cek bagian paling terang dari gambar yang berada di belakang teks. - Badge diskon dan teks kecil: Teks pada kontrol yang dinonaktifkan dikecualikan dari 1.4.3, tetapi badge diskon, harga, dan teks kecil legal tidak. Teks-teks ini sering kali paling samar di halaman toko online. ## Pertanyaan yang sering diajukan ### Rasio kontras berapa yang disyaratkan WCAG? Untuk Level AA, 4.5:1 untuk teks normal dan 3:1 untuk teks besar (kriteria keberhasilan 1.4.3), serta 3:1 untuk komponen antarmuka dan grafik yang bermakna (1.4.11). Level AAA meminta 7:1 dan 4.5:1 (1.4.6). ### Apa yang termasuk teks besar? WCAG mendefinisikan teks berskala besar sebagai minimal 18 poin, atau 14 poin tebal. Dalam piksel CSS, itu sekitar 24px, atau 18,66px jika tebal. ### Apakah logo harus memenuhi batas minimum kontras? Tidak. WCAG 1.4.3 mengecualikan logo dan teks yang menjadi bagian dari logo atau nama merek, serta teks yang murni dekoratif dan teks pada kontrol yang tidak aktif. ### Mengapa pemindaian mencantumkan teks di atas gambar untuk ditinjau? axe-core mengukur warna solid. Jika ada gambar, gradien, atau elemen lain di belakang teks, axe-core tidak dapat mengetahui warna mana yang bertemu, jadi elemen tersebut dilaporkan untuk dicek manusia alih-alih ditebak. ### Apakah saya perlu kontras AAA? AAA tidak diwajibkan untuk kesesuaian Level AA, dan W3C tidak menyarankan mewajibkan AAA untuk seluruh situs. Mencapai 7:1 untuk teks isi tetap merupakan praktik yang baik jika desain Anda memungkinkan. ### Apakah APCA bagian dari WCAG? Bukan. APCA adalah metode kontras lain yang dibahas untuk WCAG 3, yang masih berupa draf. Kesesuaian saat ini diukur dengan rasio WCAG 2 yang dihitung alat ini. ## Sumber - [W3C: Memahami kriteria keberhasilan 1.4.3 Contrast (Minimum) WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) - [W3C: Memahami kriteria keberhasilan 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced) - [W3C: Memahami kriteria keberhasilan 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) - [W3C: Definisi luminans relatif dalam WCAG 2.2](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance) - [Deque: Aturan color-contrast axe-core](https://dequeuniversity.com/rules/axe/4.13/color-contrast) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)