Lewati ke konten utama
ImageColorPix

Kontras Checker

Periksa apakah kombinasi teks dan latar Anda aksesibel. Pilih warna manual dengan jendela warna, gunakan preset White / Black, atau unggah gambar dan klik piksel mana pun. Nilai WCAG AA dan AAA instan.

Warna teks

rgb(59, 130, 246)

Lihat detail →

Warna latar belakang

rgb(255, 255, 255)

Lihat detail →

Rasio kontras

5.20 : 1

Kontras baik

A+A

Nilai WCAG

Teks normal AA (≥ 4.5)✓ Lulus
Teks besar AA (≥ 3)✓ Lulus
Teks normal AAA (≥ 7)✕ Gagal
Teks besar AAA (≥ 4.5)✓ Lulus

Rubah cokelat cepat melompati anjing malas, teks normal 16px.

Teks besar 24px tebal

Apa itu pemeriksaan kontras?

Teks terbaca untuk semua orang

Rasio kontras mengukur seberapa jelas teks dibedakan dari latarnya, dari 1:1 (warna sama) hingga 21:1 (hitam di atas putih). Pemeriksa kami memakai rumus luminance relatif WCAG, standar yang sama yang dipakai auditor dan design system.

Targetkan minimal 4.5:1 untuk teks normal (AA), 3:1 untuk teks besar, dan 7:1 untuk AAA. Uji warna brand, gaya tombol, atau overlay teks gambar mana pun sebelum rilis.

Cara menggunakan

01

Pilih warna

Ketik HEX, gunakan jendela warna bawaan, atau tekan preset White / Black / Random. Tukar kapan saja.

02

Atau pilih dari gambar

Klik ikon gambar, unggah JPG/PNG/WebP apa pun, lalu klik gambar atau palet hasil ekstraknya. Alihkan target Text / Background.

03

Kirim UI aksesibel

Baca rasio, nilai AA/AAA, dan pratinjau langsung.

04

Bagikan dan ekspor

Salin URL (?text=…&bg=…) untuk membagikan pasangan tepat, Salin CSS untuk handoff, atau Unduh laporan TXT.

Contoh nyata

Teks isi 16px: #767676 di atas #FFFFFF (4.54:1 lolos) vs #999999 (2.85:1 gagal)

Pemeriksaan nyata nomor 1. Teks abu-abu sekunder terlihat bersih tetapi abu terang gagal. Coba kedua pasangan di atas: gelapkan teks redup ke #767676 atau #595959 untuk melewati AA. Teks bacaan panjang terkecil butuh penuh 4.5:1.

Label tombol: putih di atas biru

Pemeriksaan UI paling sering diuji. Biru cerah (~3.9:1) hanya lolos teks besar. gelapkan isian tombol hingga ~5–6:1 untuk label ukuran normal. Uji status normal, hover dan nonaktif terpisah.

Tautan di dalam teks isi

Pengguna menempel biru tautan plus latar isi untuk melihat apakah tautan yang dikenali hanya dari warna tetap mencapai 4.5:1. Jika tidak, gelapkan tautan atau tambah garis bawah (warna saja tidak boleh jadi satu-satunya petunjuk).

Input, border dan cetakan kecil 13px

Border input, checkbox dan disclaimer 13px adalah tempat kontras mati. Border/UI butuh 3:1. caption 13px butuh 4.5:1 seperti isi. Tempel abu border plus latar kolom Anda di sini.

Judul 24–32px dan grafis

Teks besar (24px+, atau 19px bold+) hanya butuh 3:1, sama seperti ikon, goresan bagan dan cincin fokus. Uji judul, ikon dan garis visualisasi data sebagai pasangan terpisah dari salinan isi.

Teks di atas foto dan gradien

Kasus gambar teratas: unggah hero, klik piksel paling terang dan paling gelap di balik headline. Jika salah satu gagal, tambah scrim atau text-shadow dan uji ulang warna campurannya. Jangan pernah uji hanya satu stop gradien.

Pertanyaan yang sering diajukan

1Berapa rasio kontras WCAG yang disyaratkan: AA atau AAA?
Kueri paling sering ditanyakan. AA: 4.5:1 teks normal, 3:1 teks besar, target legal/praktis untuk kebanyakan situs. AAA: 7:1 normal, 4.5:1 besar, untuk konten sangat aksesibel. Kebanyakan tim merilis AA. kami menilai keempatnya agar Anda melihat keduanya.
2Apakah ukuran dan ketebalan font mengubah syarat?
Ya, pertanyaan umum kedua. Besar sama dengan 24px+ reguler atau 19px+ bold (18pt / 14pt bold). Teks besar hanya butuh 3:1 untuk AA. Uji isi dan judul terpisah: pasangan yang sama bisa gagal untuk isi tetapi lolos untuk judul.
3Bagaimana memperbaiki kombinasi gagal tanpa rebranding?
Alur kerja pengguna teratas: pertahankan hue, geser lightness: gelapkan teks atau terangkan latar sampai melewati ambang. Atau batasi warna gagal untuk teks besar/ikon (3:1), tambah scrim/outline di atas gambar, atau pasangkan dengan warna lebih gelap yang patuh untuk salinan isi.
4Bisakah saya memeriksa gradien, gambar atau transparansi?
Pemeriksa bekerja pada pasangan solid, jadi pengguna menguji piksel terburuk: unggah hero, klik titik paling terang plus paling gelap di balik teks, dan uji keduanya. Untuk opacity, tangkap layar UI campuran dan sampel piksel hasil render, overlay 50% bukan HEX mentahnya.
5Apakah tautan, tombol, input dan ikon perlu diperiksa?
Ya, set UI paling sering diuji. Tombol/tautan butuh rasio teks (4.5:1 normal). Border input, checkbox, ikon, goresan bagan dan cincin fokus butuh 3:1 non-text terhadap warna bersebelahan. Uji tiap status: default, hover, fokus, nonaktif.
6Bagaimana memakai eyedropper / pilih dari layar?
Klik ikon gambar, unggah atau tempel tangkapan layar apa pun, lalu klik piksel mana pun untuk memuatnya sebagai Text atau Background (sakelar di atas). Klik swatch palet untuk varian cepat.
7Apakah bisa untuk aplikasi seluler dan mode gelap?
Matematika luminance sama berlaku untuk iOS/Android dan tema gelap. Pengguna memeriksa kedua mode terpisah, pasangan yang lolos di terang sering gagal di gelap. Uji tiap tema, termasuk tampilan terang luar ruang.
8Bisakah saya membagikan, menyimpan atau mengotomatiskan hasil?
Salin URL (?text=…&bg=…) untuk membagikan pasangan tepat, Salin CSS untuk handoff, atau Unduh laporan TXT. Pengguna mahir menambahkan pasangan ke dokumen atau menguji matriks token brand satu per satu.

Jelajahi alat warna lainnya

Konverter Warna

HEX RGB HSL HSV CMYK LAB

Generator Palet

Harmoni acak + mode gambar

Pemilih Warna Gambar

Pilih piksel mana pun dari gambar apa pun

Generator Gradien

CSS linear, radial & konikal