Logo XTools
XTools

Pemeriksa Kontras

Periksa kontras teks dan latar belakang terhadap WCAG AA dan AAA
  • File tidak meninggalkan perangkat Anda
  • Berjalan di browser
  • Gratis, tanpa daftar, tanpa watermark

Contrast ratio

4.54:1

Passes AA for all text

  • AANormal text

    4.5:1

    Pass

  • AALarge text

    3:1 · 24px+, or 18.66px+ bold

    Pass

  • AAANormal text

    7:1

    Fail

  • AAALarge text

    4.5:1 · 24px+, or 18.66px+ bold

    Pass

  • AAUI components & graphics

    3:1 · Icons, borders of inputs, focus rings

    Pass

APCA lightness contrast

Lc 71.6

OK for content text, not long body copy

From the WCAG 3 draft. Polarity aware: negative Lc means light text on a dark background.

Preview

Large heading

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Body text is where low contrast hurts most: long paragraphs at small sizes tire the eyes quickly, especially on phones in sunlight.

The quick brown fox jumps over the lazy dog

Small print, captions and footnotes

ButtonButton

Nearest passing colors

AA · 4.5:1

Adjust textAlready passes
Adjust backgroundAlready passes

AAA · 7:1

Adjust text

#595959 · 7.00:1

Adjust backgroundNot reachable by changing lightness alone
Changes only lightness (in OKLCH), so the hue and feel of your color stay the same.
4.54:1 Passes AA for all text · #767676

Cara memakai Pemeriksa Kontras

Periksa pasangan warna teks dan latar terhadap WCAG 2 (AA dan AAA untuk teks normal, teks besar, dan komponen UI) serta lihat kontras kecerahan APCA dari draf WCAG 3. Jika pasangan gagal, alat ini menyarankan warna lulus terdekat.

  1. 1

    Masukkan Warna teks dan Warna latar sebagai HEX, rgb(), hsl(), oklch(), atau nama warna, atau klik contoh warna untuk membuka pemilih warna.

  2. 2

    Baca Rasio kontras dan hasil Lulus atau Gagal untuk setiap pemeriksaan AA dan AAA.

  3. 3

    Lihat Pratinjau, ketik Teks contoh Anda sendiri, dan gunakan Tukar warna untuk menguji kebalikannya.

  4. 4

    Di Warna lulus terdekat, klik Terapkan pada saran Sesuaikan teks atau Sesuaikan latar untuk AA (4.5:1) atau AAA (7:1).

  5. 5

    Setelah Anda mengubah warna, URL halaman menyimpan kedua warna, jadi Anda bisa menyalinnya untuk berbagi hasil.

Pertanyaan umum

Rasio kontras berapa yang saya butuhkan?

WCAG AA meminta 4.5:1 untuk teks normal dan 3:1 untuk teks besar (24px ke atas, atau 18,66px tebal) serta komponen UI seperti ikon dan batas input. AAA meminta 7:1 dan 4.5:1.

Mengapa 4.497:1 ditampilkan sebagai 4.49, bukan 4.50?

Rasio tidak pernah dibulatkan ke atas melewati ambang, jadi pasangan yang nyaris melewatkan 4.5:1 tidak tampak seolah lulus.

Bisakah saya menguji teks semi-transparan?

Ya. Gunakan penggeser Opasitas teks; teks tembus digabung di atas latar sebelum rasio diukur.

Apa itu angka APCA?

APCA berasal dari draf WCAG 3 dan memberi kontras kecerahan (Lc) yang bergantung pada warna mana yang menjadi teks; nilai negatif berarti teks terang di latar gelap. Ini masih draf, jadi rasio WCAG 2 tetap menjadi target kepatuhan yang biasa.

Bagaimana warna yang disarankan dipilih?

Hanya kecerahan yang diubah (dalam OKLCH), jadi rona dan kesan warna Anda tetap. Jika kedua arah tidak mencapai target, alat ini mengatakan Tidak tercapai hanya dengan mengubah kecerahan; coba sesuaikan warna yang lain.