Langsung ke konten

Cek kontras warna (WCAG)

Periksa rasio kontras warna teks dan latar terhadap WCAG 2.2 AA dan AAA, lengkap dengan saran warna terdekat yang lolos. Semuanya berjalan di browser Anda.

Teks besar: 24 px reguler atau 18,66 px tebal

Teks isi normal 16 px memerlukan kontras minimal 4,5:1 terhadap latar belakangnya agar lolos WCAG AA, dan 7:1 untuk AAA.

Garis tepi tombol
Rasio kontras17,16:1
  • AA Teks normal ≥ 4,5:1 · SC 1.4.3Lolos
  • AA Teks besar ≥ 3:1 · SC 1.4.3Lolos
  • AAA Teks normal ≥ 7:1 · SC 1.4.6Lolos
  • AAA Teks besar ≥ 4,5:1 · SC 1.4.6Lolos
  • AA Komponen UI & grafik ≥ 3:1 · SC 1.4.11Lolos

Setiap pasangan dalam palet Anda

Baris adalah latar belakang, kolom adalah warna teks. Pilih sel untuk memeriksa pasangan itu di atas.

Latar belakang3366ff33ccff6633ff33ffcccc33ffffffff000000
3366ff
33ccff
6633ff
33ffcc
cc33ff
ffffff
000000
Berjalan di browser Anda · tanpa unggahCara kerja

Cara menggunakan Cek kontras warna

  1. 1

    Masukkan dua warna

    Ketik warna teks dan warna latar belakang dalam format HEX, rgb(), hsl() atau oklch(), atau buka sampel warna bulat untuk memilihnya.

  2. 2

    Baca hasilnya

    Rasio dan lima baris Lolos atau Gagal menampilkan AA dan AAA untuk teks normal dan teks besar, serta aturan 3:1 untuk ikon dan garis tepi.

  3. 3

    Terapkan perbaikan

    Jika suatu level gagal, gunakan teks atau latar belakang terdekat yang lebih gelap atau lebih terang dan lolos, lalu salin nilai barunya.

Batas dan Pro

Gratis dan tanpa batas: pemeriksaan sebanyak apa pun, 5 kriteria WCAG 2.2 per pasangan, 2 saran perbaikan per level yang gagal, dan kisi hingga 7 warna.

Tentang Cek kontras warna

Pemeriksa kontras ini mengukur seberapa jauh perbedaan kecerahan dua warna dengan rumus luminansi relatif dari WCAG 2.2, perhitungan yang sama dengan audit aksesibilitas di browser dan plugin desain. Hasilnya berupa rasio antara 1:1 (identik) hingga 21:1 (hitam di atas putih). Kriteria keberhasilan 1.4.3 meminta 4,5:1 untuk teks isi dan 3:1 untuk teks besar pada level AA; 1.4.6 menaikkannya menjadi 7:1 dan 4,5:1 untuk AAA; 1.4.11 meminta 3:1 untuk elemen non-teks yang bermakna, seperti cincin fokus, garis tepi kolom isian, dan garis grafik.

Contoh langsung menampilkan teks dalam kedua ukuran, tombol dengan garis tepi, dan ikon dengan warna Anda, sehingga Anda bisa menilai keterbacaan, bukan hanya angkanya. Rasio dipotong hingga dua desimal, bukan dibulatkan, karena pasangan warna dengan rasio 4,496:1 tidak memenuhi syarat 4,5:1. Saat suatu level gagal, pemeriksa mencari lightness OKLCH salah satu warna dengan mempertahankan hue dan chroma-nya, lalu mengusulkan nilai terdekat yang lolos, untuk teks dan latar belakang secara terpisah.

Pemeriksa ini ditujukan untuk warna solid. Alat ini tidak dapat menilai teks di atas foto atau gradasi, transparansi, tampilan ketebalan font pada layar tertentu, maupun metode APCA yang lebih baru dan diusulkan untuk WCAG 3. Jadi anggap hasil lolos sebagai syarat minimum, dan uji juga di layar yang sebenarnya.

Privasi

Kedua warna tetap berada di tab ini: rasio, pemeriksaan lolos dan gagal, serta saran perbaikan dihitung oleh browser Anda, dan tidak ada nilai warna yang dikirim ke server atau disimpan.

Cek kontras warna: pertanyaan yang sering diajukan

Apa yang dianggap teks besar dalam WCAG?
Teks besar berukuran minimal 18 poin, yaitu 24 piksel CSS, dengan ketebalan normal, atau minimal 14 poin, sekitar 18,66 piksel CSS, jika tebal. Teks seukuran itu hanya membutuhkan 3:1 pada level AA dan 4,5:1 pada AAA. Judul sering memenuhi syarat ini, sedangkan sebagian besar tombol, label, dan teks isi berukuran lebih kecil sehingga membutuhkan rasio 4,5:1 yang lebih ketat.
Mengapa 4,48:1 gagal padahal dibulatkan jadi 4,5?
WCAG menetapkan ambang batas sebagai nilai minimum, dan dokumen penjelasannya menyatakan nilai tidak boleh dibulatkan ke atas. Rasio 4,48:1 berada di bawah 4,5:1, sehingga gagal pada level AA untuk teks normal. Pemeriksa ini memotong angka yang ditampilkan hingga dua desimal karena alasan yang sama, sehingga hasilnya konsisten dengan audit otomatis seperti axe dan Lighthouse.
Apakah ikon dan tombol juga perlu kontras?
Ya. Kriteria keberhasilan 1.4.11 Non-text Contrast mensyaratkan 3:1 antara grafik yang bermakna dan sekitarnya: ikon yang menyampaikan informasi, garis tepi kolom teks, batas tombol tanpa latar terisi, indikator fokus, dan garis pada grafik. Grafik dekoratif dan kontrol yang dinonaktifkan dikecualikan. Contoh di pemeriksa ini menampilkan tombol bergaris tepi dan ikon dengan warna teks Anda.
Bagaimana pemeriksa memilih warna perbaikan?
Pemeriksa mengubah warna yang gagal ke OKLCH, mempertahankan hue dan chroma, lalu menggeser lightness sedikit demi sedikit ke arah lebih gelap dan lebih terang sampai pasangan warna mencapai target. Nilai lolos yang paling dekat akan ditawarkan, sekali untuk teks dan sekali untuk latar belakang, sehingga warna merek tetap mudah dikenali sambil memenuhi AA atau AAA.
Apakah kontras WCAG yang lolos sudah cukup untuk aksesibilitas?
Itu hanya batas minimum, bukan jaminan. Penglihatan rendah, silau di ponsel, font tipis, dan penanda yang hanya mengandalkan warna tetap bisa menimbulkan masalah meski rasio lolos. Padukan kontras yang cukup dengan ukuran font yang terbaca, garis bawah atau ikon untuk tautan dan status, serta pengujian bersama pengguna nyata. Kontras hanya satu dari banyak kriteria WCAG, jadi audit lengkap mencakup jauh lebih banyak daripada warna.

Tugas lain dengan alat ini

Alat terkait

Semua alat developer

Generator gradien & bayangan CSS

Rancang gradien dan box shadow secara visual

Ambil warna dari gambar

Ambil warna persis dan ekstrak palet dari gambar apa pun

Generator ikon aplikasi

Semua ukuran ikon iOS, Android, dan PWA dari satu gambar

Generator favicon

Ikon ICO, PNG, dan manifest dari gambar, teks, atau emoji