ImageColorPicker.com

Pemeriksa kontras warna

Uji nisbah kontras antara warna latar depan dan latar belakang untuk memastikan kebolehcapaian.

Semak warna anda

Uji kombinasi warna untuk memastikan ia memenuhi piawaian kebolehcapaian WCAG untuk kebolehbacaan teks.

5.73 kepada 1
Kontras
AA
Keputusan teks
Baik

Dibandingkan: #000000 pada #B6765B

Teks

16px, Biasa (400)

Dianggap sebagai teks biasa.

  • AA (WCAG 1.4.3): sekurang-kurangnya 4.5:1

    Lulus

  • AAA (WCAG 1.4.6): sekurang-kurangnya 7:1

    1.27 lagi diperlukan

    Gagal

Komponen UI dan grafik

Ikon, sempadan input, indikator fokus dan bahagian lain yang perlu dilihat untuk menggunakan antara muka.

  • AA (WCAG 1.4.11): sekurang-kurangnya 3:1

    Lulus
5.73 kepada 1. Teks: lulus AA, gagal AAA. Komponen UI: lulus.
Bagaimana ia diperiksa
Warna yang dibandingkan (selepas pencampuran)
Teks #000000 pada latar #B6765B
Kecerahan relatif
Teks 0.0000, latar 0.2365
Formula
(L1 + 0.05) / (L2 + 0.05) di mana L1 ialah kecerahan bagi warna yang lebih cerah dan L2 bagi yang lebih gelap.
Nisbah tepat
5.7314 kepada 1, dipaparkan sebagai 5.73 kepada 1. Nilai yang dipaparkan dipotong, bukan dibundarkan, jadi ia tidak pernah nampak lebih baik daripada sebenar. Nilai tepat adalah yang dibandingkan dengan keperluan.

Saiz teks: 16px, Biasa (400)

Dianggap sebagai teks biasa. Teks besar ialah sekurang-kurangnya 24px (18pt), atau sekurang-kurangnya 18.67px (14pt) apabila tebal (ketebalan 700 atau lebih). Saiz dipaparkan dipotong, bukan dibundarkan.

Dianggap sebagai teks biasa. Teks besar ialah sekurang-kurangnya 24px (18pt), atau sekurang-kurangnya 18.67px (14pt) apabila tebal (ketebalan 700 atau lebih). Saiz dipaparkan dipotong, bukan dibundarkan.

Aa
Tajuk pratonton

Si musang coklat pantas melompat ke atas anjing malas

Contoh teks kecil (12px)

Teks
#000000
Latar
#b6765b

Piawaian WCAG

Tahap AA

Nisbah kontras minimum 4.5:1 untuk teks biasa dan 3:1 untuk teks besar. Diperlukan untuk kebanyakan laman web.

Tahap AAA

Nisbah kontras dipertingkatkan 7:1 untuk teks biasa dan 4.5:1 untuk teks besar. Disyorkan untuk aksesibiliti optimum.

Pemeriksa kontras warna

Kira nisbah kontras warna teks dan latar belakang.

Pilih warna menggunakan pemilih warna untuk teks dan warna latar belakang atau masukkan warna dalam format heksadesimal RGB (contohnya, #259 atau #2596BE). Anda boleh melaraskan peluncur untuk memilih warna. Garis Panduan Kandungan Web (WCAG) mempunyai garis panduan khusus untuk membantu menentukan sama ada teks kelihatan bagi pengguna yang dapat melihat. Kriteria ini menggunakan algoritma tertentu untuk memetakan kombinasi warna kepada nisbah yang boleh dibandingkan. Menggunakan formula ini, WCAG menyatakan bahawa nisbah kontras warna 4.5:1 dengan teks dan latar belakangnya mencukupi untuk teks biasa, dan teks besar (18+ pt biasa, atau 14+ pt tebal) harus mempunyai sekurang-kurangnya 3:1 nisbah kontras warna.

Ciri utama

  • Pengiraan nisbah kontras masa nyata
  • Pemeriksaan pematuhan WCAG AA & AAA
  • Peluncur HSL untuk penalaan halus
  • Pelbagai format pratonton

Alat lanjutan

  • Pembetulan warna automatik
  • Contoh teks dan latar belakang
  • Pengesanan nama warna
  • Eksport hasil

Soalan lazim

Untuk pematuhan WCAG AA, teks biasa memerlukan nisbah kontras minimum 4.5:1, manakala teks besar (18pt atau 14pt tebal) memerlukan 3:1.

WCAG AAA memerlukan nisbah kontras yang lebih tinggi: 7:1 untuk teks biasa dan 4.5:1 untuk teks besar, berbanding dengan 4.5:1 dan 3:1 untuk AA.

Gunakan ciri pembetulan automatik untuk melaraskan warna teks atau latar belakang sambil mengekalkan niat reka bentuk anda, atau laraskan warna secara manual menggunakan peluncur HSL dengan penunjuk visual yang menunjukkan zon optimum untuk pematuhan AA/AAA.

Zon hijau dan penanda AA/AAA menunjukkan julat optimum untuk mencapai pematuhan WCAG. Petunjuk arah (Lebih cerah/Lebih gelap) membimbing anda ke arah kontras yang lebih baik berdasarkan gabungan warna semasa anda.

Ya, anda boleh memasukkan sebarang kod HEX atau menggunakan pemilih warna untuk memilih warna tersuai. URL dikemas kini secara automatik supaya anda boleh berkongsi gabungan warna tertentu.