cv.cm
Semua pelajaran

Teks

Cara cek kontras warna untuk WCAG

Anda punya warna teks dan warna latar. Baca rasio kontrasnya dan lihat apakah pasangan itu lolos WCAG 2 AA dan AAA. Abu-abu #777777 di atas putih adalah 4.48:1 dan gagal AA untuk teks normal nyaris saja; #767676 lolos. Tidak ada yang keluar dari tab ini.

6 mnt

Hasil hari ini Rasio seperti 4.48:1, lolos atau gagal untuk AA dan AAA pada ukuran normal dan besar, dan warna teks terdekat yang lolos saat pasangannya gagal.

Buka pemeriksa kontras dengan kedua kode hex di tangan. Cek teks isi terhadap 4.5:1, judul di atas 24px terhadap 3:1, dan ikon atau garis tepi terhadap 3:1. Tidak diunggah.

Buka Pemeriksa kontras
Dalam duduk ini

  1. Kenali ambangnya

    WCAG 2 AA: 4.5:1 untuk teks normal dan 3:1 untuk teks besar. AAA: 7:1 dan 4.5:1. Teks besar adalah 24px biasa atau sekitar 18,7px tebal. Ikon, garis tepi, dan kontrol formulir butuh 3:1.

    Ambang rasio: 3:1 untuk teks besar dan UI, 4.5:1 untuk AA teks normal, 7:1 untuk AAA teks normal.
    Ambang rasio: 3:1 untuk teks besar dan UI, 4.5:1 untuk AA teks normal, 7:1 untuk AAA teks normal.

  2. Buka Pemeriksa kontras warna di cv.cm

    Pasangan contoh merah muda di atas krem sudah terisi. Rasio dan baris lolos/gagal ada di kanan, di bawah contoh teks. Tidak diunggah.

    Buka Pemeriksa kontras

  3. Masukkan kedua warna

    Ketik kode hex seperti #777777 untuk teks dan #ffffff untuk latar, atau pilih dengan kotak warna. Kode tiga digit seperti #777 juga bisa. Contohnya berubah saat Anda mengetik.

  4. Baca rasio dan barisnya

    #777777 di atas #ffffff adalah 4.48:1: AA teks besar dan UI lolos, AA teks normal gagal. Tiap baris menyebut Lolos atau Gagal terhadap ambangnya.

  5. Ambil warna yang disarankan

    Saat teks normal gagal AA, halaman menyarankan warna teks terdekat yang mencapai 4.5:1, bergerak ke arah hitam atau putih. Untuk #777777 di atas putih disarankan #767676. Tukar menukar teks dan latar.

    #777777 di atas putih adalah 4.48:1 dan gagal AA teks normal; #767676 mencapai 4.54:1 dan lolos.
    #777777 di atas putih adalah 4.48:1 dan gagal AA teks normal; #767676 mencapai 4.54:1 dan lolos.

  6. Cek tiap keadaan, lalu salin

    Ulangi untuk warna tautan, hover, dan nonaktif, dan untuk teks di atas gambar pakai bagian tergelap gambar sebagai latar. Salin menaruh warna, rasio, dan hasil di papan klip.

Pakai dengan alat ini

Tanya jawab

Bisa cek kontras warna gratis online?

Ya. cv.cm menghitung rasio WCAG di tab ini. Tidak diunggah.

Rasio berapa yang dibutuhkan teks normal?

4.5:1 untuk AA dan 7:1 untuk AAA. Teks besar butuh 3:1 dan 4.5:1.

Apa itu teks besar?

Minimal 18pt (24px) biasa atau 14pt (sekitar 18,7px) tebal.

Apakah urutan warna berpengaruh?

Tidak. Rasionya sama dua arah. Tukar hanya mengubah pratinjau.

Kenapa #777777 gagal?

Rasionya di atas putih adalah 4.48:1, tepat di bawah 4.5:1. #767676 mencapai 4.54:1 dan lolos.