Clew

BerandaAlatPemeriksa kontras warna

Pemeriksa kontras warna WCAG 2.2 dan APCA

Masukkan warna teks dan latar belakang dalam format HEX, RGB, atau HSL. Anda mendapatkan rasio kontras WCAG 2.2 beserta hasil untuk AA, AAA, teks besar, dan komponen antarmuka, kontras kecerahan APCA dari draf WCAG 3, pratinjau teks, tombol, dan tooltip, serta warna terdekat yang lolos jika warna Anda belum lolos.

● Gratis, tanpa daftarDiperbarui:

HEX (#777, #767676), rgb(118 118 118), hsl(0 0% 46%), atau oklch(56% 0 0). Teks transparan dicampur dengan latar.
Yang diubah

Warna terdekat yang lolos

—

 

Kontras WCAG— 
APCA Lc— 
Luminans— 

Judul besar, 24 px

Teks isi 16 px. Baca paragraf ini di ponsel, di luar ruangan, dengan tangan terentang — kalau Anda kesulitan, pengguna Anda juga.

Tombol utamaSekunderTautan teks
Garis kolom input
Tooltip: klik “Proyek baru” untuk mulai.

Teks kecil 13 px: keterangan dan petunjuk paling sering gagal kontras.

Hasil

    Rumus. Kontras = (Lterang + 0,05) / (Lgelap + 0,05), dengan L = 0,2126·R + 0,7152·G + 0,0722·B dari sRGB linear. Nilai tidak pernah dibulatkan ke atas: 4,48:1 tidak memenuhi 4,5:1.

    Semua dihitung di browser Anda — data yang Anda masukkan tidak dikirim ke mana pun.

    Cara memakai

    1. Masukkan dua warnaKetik atau tempel warna teks dan latar dalam format CSS apa pun, atau pilih dengan pemilih warna. Tukar keduanya untuk memeriksa teks terang di atas latar gelap.
    2. Baca hasilnyaRasio kontras dibandingkan dengan semua ambang WCAG 2.2: teks normal dan besar untuk AA dan AAA, serta 3:1 untuk komponen antarmuka. APCA Lc ditampilkan di sampingnya sebagai pendapat kedua.
    3. Lihat pratinjauTeks, tombol, tautan, garis kolom input, dan tooltip digambar dengan warna Anda — kombinasi yang paling sering gagal di antarmuka nyata.
    4. Ambil warna terdekatPilih target dan apakah teks atau latar yang diubah. Alat ini mempertahankan rona dan menggeser kecerahan sampai pasangan lolos, lalu Anda bisa menerapkan atau menyalin HEX-nya.

    Cara menghitung rasio kontras WCAG

    WCAG 2.x membandingkan luminans relatif dua warna — seberapa terang masing-masing tampak di mata, pada skala 0 (hitam) sampai 1 (putih). Setiap kanal sRGB diubah dulu dari nilai 0–255 menjadi cahaya linear, lalu diberi bobot sesuai kepekaan mata: hijau paling berpengaruh, biru paling sedikit.

    c = kanal / 255 c_lin = c / 12,92 jika c ≤ 0,04045 c_lin = ((c + 0,055) / 1,055) ^ 2,4 selain itu L = 0,2126 · R_lin + 0,7152 · G_lin + 0,0722 · B_lin kontras = (L_terang + 0,05) / (L_gelap + 0,05)

    Hasilnya berkisar dari 1:1 (warna identik) sampai 21:1 (hitam di atas putih). Suku 0,05 mewakili cahaya sekitar yang dipantulkan layar, sehingga pasangan yang sangat gelap tidak pernah mencapai kontras tak terhingga.

    Contoh. Abu-abu #777777 di atas putih: 119 / 255 = 0,4667, setelah dilinearkan menjadi 0,1845, jadi L = 0,1845. Putih memiliki L = 1. Kontras = 1,05 / 0,2345 = 4,48:1. Ini gagal AA untuk teks normal, karena 4,48 lebih kecil dari 4,5 dan WCAG tidak mengizinkan pembulatan. Abu-abu paling terang yang lolos di atas putih adalah #767676 dengan 4,54:1.

    Ambang WCAG 2.2

    • 1.4.3 Kontras (Minimum), level AA: 4,5:1 untuk teks normal, 3:1 untuk teks besar.
    • 1.4.6 Kontras (Ditingkatkan), level AAA: 7:1 untuk teks normal, 4,5:1 untuk teks besar.
    • 1.4.11 Kontras Non-teks, level AA: 3:1 untuk bagian visual yang diperlukan untuk mengenali komponen antarmuka dan statusnya — garis kolom input, indikator fokus, kotak centang, ikon yang bermakna, garis grafik.

    Teks besar berarti minimal 18 poin (24 piksel CSS) dengan ketebalan biasa, atau 14 poin (sekitar 18,66 px) tebal. Logo, teks dekoratif murni, dan kontrol nonaktif dikecualikan. Ambang ini tidak berubah antara WCAG 2.0, 2.1, dan 2.2.

    APCA: metode kontras yang diusulkan untuk WCAG 3

    Rumus WCAG 2 sederhana tetapi punya kelemahan yang dikenal: pasangan dianggap sama terbacanya apa pun warna teksnya, kontras kombinasi gelap dinilai terlalu tinggi, dan ukuran serta ketebalan font diabaikan. Accessible Perceptual Contrast Algorithm (APCA), yang dikembangkan Andrew Somers untuk kelompok kerja W3C, memodelkan persepsi kecerahan dengan lebih baik dan menghasilkan nilai kontras kecerahan, Lc, kira-kira dari −108 sampai +106.

    Y = 0,2126729 · (R/255)^2,4 + 0,7151522 · (G/255)^2,4 + 0,0721750 · (B/255)^2,4 teks gelap di latar terang: Lc = ((Y_latar^0,56 − Y_teks^0,57) · 1,14 − 0,027) · 100 teks terang di latar gelap: Lc = ((Y_latar^0,65 − Y_teks^0,62) · 1,14 + 0,027) · 100 (Y di bawah 0,022 dinaikkan secara halus; |hasil| di bawah 0,1 dianggap nol)

    Tanda menunjukkan polaritas: positif untuk teks gelap di latar terang, negatif untuk teks terang di latar gelap. Abu-abu #888 yang sama menghasilkan Lc 63,1 sebagai teks di atas putih, tetapi Lc −68,5 sebagai label putih di atas #888: menurut APCA, label putih lebih mudah dibaca. WCAG 2 tidak bisa menyatakan ini, karena keduanya bernilai 3,54:1.

    Panduan kasar level Lc dalam mode sederhana “Bronze”: 90 disarankan untuk teks isi, 75 minimum untuk teks isi, 60 untuk teks konten lain, 45 untuk judul besar, 30 untuk placeholder dan elemen non-teks, 15 hanya untuk garis pemisah.

    Penting: APCA adalah bagian dari draf kerja WCAG 3, yang belum menjadi standar final, dan ambangnya bisa berubah. Persyaratan hukum dan pengadaan saat ini merujuk ke WCAG 2.x. Gunakan rasio WCAG 2.2 untuk memutuskan lolos atau tidak, dan APCA untuk memilih di antara dua opsi yang sudah lolos atau menangkap pasangan mode gelap yang lolos di WCAG 2.

    Cara memperbaiki kontras rendah tanpa kehilangan warna merek

    Biasanya cukup mengubah kecerahan, bukan rona. Saran di atas bekerja di ruang warna OKLCH: rona dan kroma dipertahankan, kecerahan perseptual digeser sedikit demi sedikit, warna dikembalikan ke gamut sRGB, lalu dipastikan HEX yang dibulatkan tetap lolos. Opsi yang paling dekat dengan kecerahan awal ditandai sebagai terdekat.

    • Simpan warna merek untuk area besar dan tombol, lalu gunakan warna yang lebih gelap dari rona yang sama untuk teks dan tautan. Merah merek dengan 3,9:1 di atas putih masih bisa menjadi latar tombol dengan teks putih tebal jika pasangan itu memenuhi ambang teks besar — tetapi tetap periksa.
    • Periksa semua status: hover, fokus, nonaktif, dikunjungi, dan error. Placeholder dan teks bantuan adalah kegagalan paling umum di formulir.
    • Periksa kedua tema. Palet yang lolos di mode terang sering gagal di mode gelap, dan di situ APCA sangat berguna.
    • Teks di atas gambar dan gradien harus lolos di titik paling terangnya. Tambahkan latar solid atau semi-transparan di belakang teks, jangan mengandalkan bayangan.
    • Tooltip dan petunjuk onboarding sering memakai warna merek terang dengan teks abu-abu. Teks ini dibaca cepat di tengah tugas, jadi targetkan 4,5:1 atau lebih, bahkan untuk teks pendek.

    Untuk membuat skala warna lengkap dengan kontras yang diketahui di setiap langkah, gunakan generator palet warna yang aksesibel.

    Sumber

    1. W3C. Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, 2023 — kriteria 1.4.3, 1.4.6, 1.4.11; definisi luminans relatif dan rasio kontras.
    2. W3C. Understanding Success Criterion 1.4.3: Contrast (Minimum) — alasan ambang 4,5:1 dan 3:1, definisi teks besar.
    3. Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 versi 0.0.98G-4g, Myndex Research — konstanta dan nilai acuan yang digunakan alat ini.
    4. W3C. W3C Accessibility Guidelines (WCAG) 3.0, Working Draft — status metode kontras visual.
    5. Ottosson B. A perceptual color space for image processing, 2020 — OKLab, digunakan untuk penyesuaian kecerahan.

    Pertanyaan umum

    Rasio kontras berapa yang disyaratkan WCAG?

    Untuk level AA, WCAG 2.2 mensyaratkan minimal 4,5:1 antara teks normal dan latarnya, 3:1 untuk teks besar (24 px, atau sekitar 18,66 px tebal), dan 3:1 untuk komponen antarmuka serta grafik bermakna. Level AAA menaikkan syarat teks menjadi 7:1 dan 4,5:1.

    Apakah 4,48:1 cukup untuk memenuhi 4,5:1?

    Tidak. Ambang WCAG bersifat pasti dan rasio tidak boleh dibulatkan ke atas. #777777 di atas putih bernilai 4,48:1 dan gagal AA untuk teks normal; #767676 bernilai 4,54:1 dan lolos.

    Apa itu APCA dan apakah sebaiknya menggantikan WCAG 2?

    APCA adalah metode kontras perseptual dalam draf WCAG 3. Metode ini memperhitungkan polaritas teks dan memberi nilai Lc yang syaratnya bergantung pada ukuran dan ketebalan font. APCA belum menjadi standar, jadi kepatuhan tetap diukur dengan rasio WCAG 2.2; APCA berguna sebagai pemeriksaan kedua, terutama untuk tema gelap.

    Apakah kontras berlaku untuk ikon, garis tepi, dan indikator fokus?

    Ya. Kriteria 1.4.11 mensyaratkan 3:1 terhadap warna di sekitarnya untuk bagian komponen yang diperlukan untuk mengenalinya atau statusnya: garis kolom input, kotak centang, ikon bermakna, dan indikator fokus. Elemen dekoratif dan kontrol nonaktif dikecualikan.

    Bagaimana menghitung kontras teks semi-transparan?

    Warna teks dicampur dulu dengan latar sesuai tingkat transparansinya, lalu warna solid hasilnya dibandingkan. Pemeriksa ini melakukannya secara otomatis dan menampilkan HEX hasil campuran.

    Apakah tombol nonaktif dan placeholder harus memenuhi kontras?

    Komponen nonaktif dikecualikan dalam WCAG 2.2. Placeholder tidak: jika menyampaikan informasi, placeholder perlu 4,5:1. Banyak formulir gagal di sini, jadi lebih aman meletakkan petunjuk di label yang terlihat atau teks bantuan di bawah kolom.

    Bagaimana menemukan warna yang lolos tanpa mengubah merek?

    Pertahankan rona dan ubah kecerahannya saja. Saran di alat ini melakukan hal itu di ruang OKLCH dan menampilkan opsi lebih gelap dan lebih terang untuk teks atau latar, beserta kontras yang dihasilkan.

    Lainnya di Desain produk

    Bacaan terkait

    Generator palet aksesibelGenerator skala tipografiPemeriksa teks tooltipSemua alat

    Tur, tooltip, dan checklist yang dampaknya terlihat di angka.

    Coba Clew gratisCara kerjanyaPaket gratis selamanya · tanpa kartu kredit

    Product tour, popup, dan onboarding di era AI

    7 pola lengkap dengan jumlah langkah, aturan teks, dan metrik, apa yang diubah AI, serta checklist sebelum terbit. PDF, 2 halaman. Isi panduan →

    Panduannya dalam bahasa Inggris.