Bagaimana cara saya menyemak sama ada warna teks dan latar belakang saya lulus WCAG?

Masukkan kod hex dalam Warna teks dan Warna latar belakang, atau gunakan pemilih. Nisbah kontras muncul dengan Lulus atau Gagal untuk teks normal dan besar AA dan AAA, serta komponen UI.

Apakah nisbah kontras yang diperlukan oleh WCAG AA?

AA memerlukan 4.5:1 untuk teks normal dan 3:1 untuk teks besar. AAA memerlukan 7:1 untuk teks normal dan 4.5:1 untuk teks besar. Komponen UI dan objek grafik memerlukan 3:1.

Apakah yang dikira sebagai teks besar?

Alat ini menganggap teks biasa 18pt (24px), atau teks tebal 14pt (18.66px), sebagai besar. Teks yang lebih kecil mesti memenuhi ambang teks normal yang lebih tinggi.

Warna saya gagal AA. Bagaimana cara saya membetulkannya?

Gunakan cadangan satu klik Perbaiki warna teks atau Perbaiki latar belakang. Ia melaraskan kecerahan sambil mengekalkan hue yang sama sehingga pasangan mencapai 4.5:1.

Format warna apakah yang diterima, dan bolehkah saya memilih dari skrin?

Ia menerima nilai hex 3 digit dan 6 digit, seperti #abc atau #1e293b. Butang Pilih warna dari layar muncul dalam penyemak imbas yang menyokong API EyeDropper, seperti Chromium.

Adakah ia benar-benar percuma?

Ya. Setiap alat adalah percuma untuk digunakan, tanpa akaun dan tanpa kad kredit. Kerja dijalankan pada peranti anda dan bukannya pada pelayan kami, itulah yang menjadikannya percuma untuk dijalankan.

Adakah ia berfungsi pada peranti mudah alih?

Ya. Ia berjalan dalam pelayar mudah alih semasa di iOS dan Android, tanpa apa-apa untuk dipasang.

🌓

Pemeriksa Kontras Warna WCAG percuma

Semak sama ada dua warna memenuhi standard kontras WCAG AA dan AAA untuk kebolehcapaian. Pratonton langsung pada berbilang saiz teks dengan cadangan automatik apabila kontras terlalu rendah.

Berjalan dalam pelayar andaTiada daftar, tiada tetingkap timbulTiada log masuk diperlukanPercuma selama-lamanya

Berfungsi luar talian selepas dimuatkan

Warna teks

Warna latar belakang

Teks tajuk besar

Teks badan sederhana (18px) untuk bacaan dan kandungan.

Teks badan biasa (16px) untuk perenggan.

Teks badan kecil (14px) untuk kapsyen dan metadata.

14.63:1

Nisbah kontras

✓WCAG AA — Teks normal

Memerlukan 4.5:1 · Anda ada 14.63:1

✓WCAG AA — Teks besar

Memerlukan 3.0:1 · Anda ada 14.63:1

✓WCAG AAA — Teks normal

Memerlukan 7.0:1 · Anda ada 14.63:1

✓WCAG AAA — Teks besar

Memerlukan 4.5:1 · Anda ada 14.63:1

✓Komponen UI / objek grafik

Memerlukan 3.0:1 · Anda ada 14.63:1

Pratetapan pantas

Berdasarkan garis panduan kontras WCAG 2.1. Teks besar = 18pt (24px) biasa atau 14pt (18.66px) tebal. Kod HEX dikemas kini dalam kedua-dua arah: taip HEX atau pilih warna, kedua-dua medan kekal segerak.

Kegunaan biasa

Audit halaman web untuk pematuhan WCAGSahkan bahawa warna teks laman web anda memenuhi piawaian kontras WCAG AA atau AAA untuk keterdapatan.
Sahkan kombinasi warna jenamaUji kombinasi warna jenama anda untuk memastikan mereka berfungsi untuk reka bentuk UI yang boleh diakses.
Uji palet warna mod gelapTeks cerah pada latar belakang gelap masih boleh gagal kontras — periksa pasangan warna mod gelap anda di sini.
Pasangan warna untuk bahan bercetakPoster, tanda dan bahan bercetak juga memerlukan kontras yang boleh dibaca — terutamanya untuk penonton yang lebih tua.
Reka Bentuk Warna Butang Boleh DiaksesPastikan CTA, butang tindakan dan pautan lulus WCAG terhadap latar belakang mereka.

Cara ia berfungsi

Semakan kontras berjalan sepenuhnya dalam pelayar anda menggunakan algoritma keluminan relatif WCAG 2.1 — tiada pustaka, tiada pelayan, hanya matematik tulisan tangan yang mengikut spesifikasi dengan tepat. Setiap hasil dikemas kini secara masa nyata semasa anda menaip atau memilih warna.

1
Input heks dan normalisasi
Kedua-dua nilai heks 3-digit (#abc) dan 6-digit (#aabbcc) diterima dan dinormalisasi kepada tiga-serangkai RGB penuh. Input tidak sah ditolak serta-merta dan bukan senyap-senyap dilalaikan kepada hitam, jadi sempadan merah muncul sebaliknya hasil lulus yang mengelirukan.
2
Pengiraan keluminan WCAG
Setiap warna ditukar kepada keluminan relatif menggunakan formula WCAG 2.1: nilai saluran sRGB dilinearkan dengan pembetulan gamma sekeping-sekeping (dibahagi 12.92 di bawah 0.03928, dinaikkan kepada kuasa 2.4 di atasnya), kemudian dipemberat sebagai 0.2126R + 0.7152G + 0.0722B.
3
Nisbah kontras dan semakan pematuhan
Nisbah kontras dikira sebagai (lighter + 0.05) / (darker + 0.05) dan disemak terhadap kesemua lima ambang WCAG: teks biasa AA (4.5:1), teks besar AA (3:1), teks biasa AAA (7:1), teks besar AAA (4.5:1), dan komponen UI (3:1). Hasil dikemas kini pada setiap ketukan kekunci.
4
Cadangan pembetulan pengekal-hiu
Apabila pasangan gagal WCAG AA, alat ini mencari ruang kecerahan HSL — melangkah keluar daripada kecerahan asal dalam kedua-dua arah — untuk mencari varian terdekat setiap warna yang lulus 4.5:1 sambil mengekalkan hiu dan ketepuan yang sama. EyeDropper API (Chromium) juga tersedia untuk menyampel sebarang warna terus daripada skrin anda.

Alat berkaitan

👁️

Simulator Buta Warna

Lihat bagaimana reka bentuk anda kelihatan kepada orang dengan kekurangan penglihatan warna. Mensimulasikan protanopia, deuteranopia, tritanopia, akromatopsia, dan anomali yang lebih ringan.

CubaFail kekal tempatan

📐

Apakah Resolusi Skrin Saya

Lihat resolusi skrin anda dalam piksel CSS dan sebenar, saiz tetingkap, nisbah piksel, kedalaman warna, HDR, sokongan sentuh dan kadar segar semula, dan salin semuanya.

Cuba

🖥️

Ujian Piksel Mati

Periksa skrin anda untuk piksel mati atau tersekat dengan skrin penuh hitam, putih, merah, hijau, biru dan kelabu, serta pembaiki piksel tersekat pilihan.