ImageColorPicker.com

Pemeriksa kontras warna

Uji rasio kontras antara warna latar depan dan latar belakang untuk memastikan aksesibilitas.

Periksa warna Anda

Uji kombinasi warna untuk memastikan mereka memenuhi standar aksesibilitas WCAG untuk keterbacaan teks.

6.47 banding 1
Kontras
AA
Hasil teks
Baik

Dibandingkan: #FFFFFF pada #8631C3

Teks

16px, Regular (400)

Dihitung sebagai teks biasa.

  • AA (WCAG 1.4.3): minimal 4.5:1

    Lulus

  • AAA (WCAG 1.4.6): minimal 7:1

    Dibutuhkan 0.53 lagi

    Gagal

Komponen UI dan grafik

Ikon, batas input, indikator fokus dan bagian lain yang perlu terlihat agar bisa menggunakan antarmuka.

  • AA (WCAG 1.4.11): minimal 3:1

    Lulus
6.47 banding 1. Teks: memenuhi AA, tidak memenuhi AAA. Komponen UI: memenuhi.
Cara pemeriksaan
Warna yang dibandingkan (setelah pencampuran)
Teks #FFFFFF pada latar #8631C3
Luminansi relatif
Teks 1.0000, latar 0.1120
Rumus
(L1 + 0.05) / (L2 + 0.05) di mana L1 adalah luminansi warna yang lebih terang dan L2 luminansi warna yang lebih gelap.
Rasio tepat
6.4794 banding 1, ditampilkan sebagai 6.47 banding 1. Nilai yang ditunjukkan dipotong, bukan dibulatkan, jadi tidak pernah terlihat lebih bagus dari kenyataannya. Nilai tepat adalah yang dibandingkan dengan persyaratan.

Ukuran teks: 16px, Regular (400)

Dihitung sebagai teks biasa. Teks besar minimal 24px (18pt), atau minimal 18.67px (14pt) ketika bold (berat 700 atau lebih). Ukuran ditampilkan terpotong, bukan dibulatkan.

Dihitung sebagai teks biasa. Teks besar minimal 24px (18pt), atau minimal 18.67px (14pt) ketika bold (berat 700 atau lebih). Ukuran ditampilkan terpotong, bukan dibulatkan.

Aa
Judul pratinjau

Si rubah coklat cepat melompati anjing malas

Contoh teks kecil (12px)

Teks
#ffffff
Latar belakang
#8631c3

Standar WCAG

Level AA

Rasio kontras minimum 4.5:1 untuk teks normal dan 3:1 untuk teks besar. Diperlukan untuk sebagian besar situs web.

Level AAA

Rasio kontras yang ditingkatkan 7:1 untuk teks normal dan 4.5:1 untuk teks besar. Direkomendasikan untuk aksesibilitas optimal.

Pemeriksa kontras warna

Hitung rasio kontras dari warna teks dan latar belakang.

Pilih warna menggunakan color picker untuk teks dan warna latar belakang atau masukkan warna dalam format RGB hexadecimal (misalnya, #259 atau #2596BE). Kamu bisa menyesuaikan slider untuk memilih warna. Pedoman Aksesibilitas Konten Web (WCAG) memiliki panduan khusus untuk membantu menentukan apakah teks dapat dibaca oleh pengguna yang melihat. Kriteria ini menggunakan algoritma tertentu untuk memetakan kombinasi warna menjadi rasio yang dapat dibandingkan. Menggunakan formula ini, WCAG menyatakan bahwa rasio kontras warna 4.5:1 dengan teks dan latar belakangnya cukup untuk teks biasa, dan teks besar (18+ pt biasa, atau 14+ pt tebal) harus memiliki rasio kontras warna setidaknya 3:1.

Fitur utama

  • Perhitungan rasio kontras waktu nyata
  • Pemeriksaan kepatuhan WCAG AA & AAA
  • Slider HSL untuk penyesuaian halus
  • Berbagai format pratinjau

Alat canggih

  • Perbaikan warna otomatis
  • Contoh teks dan latar belakang
  • Deteksi nama warna
  • Ekspor hasil

Pertanyaan yang sering diajukan

Untuk kepatuhan WCAG AA, teks normal memerlukan rasio kontras minimum 4,5:1, sedangkan teks besar (18pt atau 14pt tebal) memerlukan 3:1.

WCAG AAA memerlukan rasio kontras yang lebih tinggi: 7:1 untuk teks normal dan 4,5:1 untuk teks besar, dibandingkan dengan AA yang masing-masing 4,5:1 dan 3:1.

Gunakan fitur perbaikan otomatis kami untuk menyesuaikan warna teks atau latar belakang sambil tetap menjaga maksud desain Anda, atau atur warna secara manual dengan slider HSL dan indikator visual yang menunjukkan zona optimal untuk kepatuhan AA/AAA.

Zona hijau dan penanda AA/AAA menunjukkan rentang optimal untuk mencapai kepatuhan WCAG. Petunjuk arah (Lebih terang/Lebih gelap) membantu Anda mendapatkan kontras yang lebih baik berdasarkan kombinasi warna Anda saat ini.

Bisa, Anda dapat memasukkan kode warna hex apa pun atau menggunakan pemilih warna untuk memilih warna sendiri. URL diperbarui secara otomatis sehingga Anda dapat membagikan kombinasi warna tertentu.