Alat Aksesibilitas gratis

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.

Kalkulator kontras

Masukkan warna teks dan warna latar belakang. Semuanya dihitung di browser Anda.

Teks normal berukuran 16 piksel terlihat seperti ini.

Teks besar berukuran 24 piksel

Garis tepi tombol

Rasio kontras4.54:1

Hasil WCAG 2.2 untuk warna-warna ini
Teks normal, AAWCAG 1.4.3, perlu 4.5:1Lolos
Teks besar, AAWCAG 1.4.3, perlu 3:1Lolos
Teks normal, AAAWCAG 1.4.6, perlu 7:1Gagal
Teks besar, AAAWCAG 1.4.6, perlu 4.5:1Lolos
Ikon, garis tepi, dan kolom formulirWCAG 1.4.11, perlu 3:1Lolos

Warna teks terdekat yang lolos di latar belakang ini

Teks besar berarti minimal 24 piksel, atau 18,66 piksel jika tebal. Rasio dibulatkan ke bawah, jadi 4.499:1 ditampilkan sebagai 4.49:1 dan gagal, sesuai maksud WCAG.

Atau pindai halaman untuk mencari teks berkontras rendah

Gratis. Mengecek alamat yang Anda masukkan dalam sekitar 20 detik.

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.

Kontras warna rendah: mengapa penting dan cara memperbaikinya di Shopify, WooCommerce, dan situs apa pun

Pertanyaan tentang alat ini

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

Alat terkait

Laporan Perbaikan Aksesibilitas ($174, sekali bayar) dimulai dari pemindaian gratis lengkap dan menambahkan lebih banyak halaman, perubahan yang perlu dibuat untuk setiap temuan, PDF, serta uji ulang untuk memverifikasi perbaikan Anda.

Tentang Laporan Perbaikan Aksesibilitas