Softonic

Pemeriksa Kontras Warna

Langkah 1 / 2 Rasio kontras
Contoh judul besar
Contoh teks isi. Rubah cokelat cepat melompati anjing malas.
Hasil

Masukkan warna latar depan dan latar belakang, lalu alat ini akan menghasilkan rasio kontras WCAG (dari 1:1 hingga 21:1) beserta penilaian lulus/tidak lulus berdasarkan ambang batas WCAG 2.1 AA dan AAA untuk teks biasa, teks besar, serta elemen non-teks. Di balik layar, alat ini menggunakan rumus luminansi WCAG, perhitungan sederhana namun sangat penting bagi aksesibilitas. Perbaiki kegagalan dengan menyesuaikan tingkat kecerahan hingga rasio melewati ambang yang Anda butuhkan.

Cara menghitung rasio kontras

  1. 1

    Masukkan dua warna

    Hex, 3 atau 6 digit, untuk kedua warna. Alat pemilih warna tersedia untuk masing-masing.

  2. 2

    Luminansi relatif yang dihitung untuk masing-masing

    L = 0,2126·R + 0,7152·G + 0,0722·B, di mana setiap saluran dilinearisasi dari sRGB.

  3. 3

    Rasio kontras

    (L Lebih Terang + 0,05) / (L Lebih Gelap + 0,05). Rasio antara 1:1 dan 21:1.

  4. 4

    Tanda Lulus/Tidak Lulus

    AA (4,5:1 untuk huruf biasa, 3:1 untuk huruf besar/UI); AAA (7:1 untuk huruf biasa, 4,5:1 untuk huruf besar). Teks besar berarti ukuran huruf minimal 18 pt untuk huruf biasa atau 14 pt untuk huruf tebal.

Ambang batas kontras WCAG

Jenis Konten Ambang AA Ambang AAA
Teks normal 4,5:1 7:1
Teks besar (≥18 pt biasa atau ≥14 pt tebal) 3:1 4,5:1
Non-teks (komponen UI, cincin fokus) 3:1 -
Teks tambahan (dekoratif, tidak aktif, logo) dibebaskan dibebaskan

“Teks besar” berarti ukuran huruf minimal 18 pt dengan jenis biasa (~24px dalam CSS) atau 14 pt dengan jenis tebal (~19px tebal).

Contoh Perbandingan

Pasangan Rasio AA normal AA besar AAA normal
Hitam di atas putih 21:1 Lulus Lulus Lulus
#333 pada putih 12,6:1 Lulus Lulus Lulus
#666 pada putih 5,7:1 Lulus Lulus Gagal
#888 pada putih 3,5:1 Gagal Lulus Gagal
#AAA pada putih 2,3:1 Gagal Gagal Gagal
Putih pada #1976D2 (Biru Material 700) 4,6:1 Gagal Lulus Gagal
Putih pada #2196F3 (Biru Material 500) 3,1:1 Gagal (normal) Lulus Gagal

Perangkap umum dalam aksesibilitas

  • Teks isi abu-abu di atas putih dengan kode #999 atau lebih terang tidak memenuhi standar AA; gunakan kode #767676 atau yang lebih gelap untuk teks isi pada latar belakang putih.
  • Tautan biru pada warna abu-abu: sering gagal karena kedua warnanya memiliki tingkat kecerahan yang sedang.
  • Teks putih pada warna merek: dianjurkan menggunakan nuansa gelap (rasio ≥ 4,5:1); tidak disarankan digunakan pada warna merek dengan nada menengah. Gunakan teks yang lebih besar atau warna merek yang lebih gelap.
  • Teks pengganti umumnya memiliki kontras rendah untuk memberikan petunjuk; standar WCAG tetap berlaku jika pengguna perlu membaca teks tersebut.
  • Status nonaktif (disabled): WCAG 2.2 mewajibkan rasio 3:1 untuk teks nonaktif terhadap latar belakang kontrol, kecuali status tersebut disampaikan melalui cara lain.

Apa yang tidak dijelaskan oleh WCAG

  • WCAG 2.x menggunakan rumus dari tahun 1988. APCA modern (Advanced Perceptual Contrast Algorithm) lebih akurat dalam mencerminkan tingkat keterbacaan yang dirasakan pengguna, namun belum menjadi acuan hukum yang resmi. Lampaui sedikit nilai minimum WCAG untuk menangani APCA dan kasus-kasus khusus.
  • Kontras bukan satu-satunya aspek aksesibilitas. Rasio 21:1 tidak memiliki arti jika ukuran hurufnya hanya 9px, tinggi barisnya terlalu sempit, atau warna yang digunakan untuk menunjukkan makna adalah merah-hijau.

Meningkatkan pasangan yang gagal

  • Latar depan yang lebih terang di atas latar belakang gelap, atau latar depan yang lebih gelap di atas latar belakang terang.
  • Perbesar ukuran atau tebal huruf, ambang batas untuk teks besar menjadi lebih rendah.
  • Tambahkan latar belakang di balik teks yang berada di atas gambar (overlay atau efek gradien).
  • Jangan pernah memperbaiki kontras dengan memudarkan warna ke abu-abu yang tetap gagal; dorong terus hingga mencapai AA.

Periksa ulang setelah setiap penyesuaian, alat ini menghitung ulang rasio secara langsung dan perubahan kecerahan kecil pun dapat membalik hasil dengan cepat.

Pertanyaan yang Sering Diajukan

AA merupakan acuan hukum yang berlaku di sebagian besar yurisdiksi (Pasal 508 Undang-Undang Amerika Serikat, EN 301/549 Uni Eropa), serta hal yang ditunjukkan oleh sebagian besar alat audit. AAA bersifat idealistik dan hanya wajib diterapkan dalam konteks aksesibilitas tertentu (konten pendidikan untuk pengguna dengan penglihatan rendah). Sebaiknya menjadikan AA sebagai standar utama, sementara AAA dipandang sebagai tambahan atau pelengkap.

Tidak, alat ini hanya menerima warna hex opak, 3 atau 6 digit. Ubah dulu RGB atau HSL menjadi hex, atau gunakan alat pemilih warna yang selalu menghasilkan hex.

WCAG 2.1 SC 1.4.11 menetapkan persyaratan kontras 3:1 untuk komponen antarmuka non-teks dan objek grafis, termasuk indikator fokus, batas input, tombol yang hanya berisi ikon, serta status (saat diklik atau dalam keadaan aktif). Periksa baik kondisi standar maupun kondisi saat fokus diterapkan.

Uji setiap mode secara terpisah, rasio kontras pada tema terang dan gelap bersifat independen. Banyak palet yang cocok untuk mode terang justru tidak berfungsi dengan baik dalam mode gelap pada tingkat kecerahan relatif yang sama.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Penghitung FPS

Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.

Generator Warna Acak

Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.

Pemformat JSON

Tempel JSON untuk dirapikan dengan indentasi 2 atau 4 spasi, dipadatkan menjadi output ringkas, atau diperiksa sintaksnya sebelum hasilnya disalin.

Pemilih Warna HEX

Pilih atau masukkan warna HEX untuk mendapatkan RGB, HSL, perkiraan CMYK, luminans relatif, serta kontras terhadap putih dan hitam.