What contrast ratio do I actually need?

For normal body text, aim for at least 4.5:1 to meet WCAG AA — the level most accessibility laws require. Large text (24px+ regular or 18.66px+ bold) only needs 3:1. Icons, borders, and focus rings need 3:1 under WCAG 1.4.11. If you want the enhanced AAA level, normal text needs 7:1 and large text needs 4.5:1.

Why does my brand cyan/yellow fail on white?

Bright, saturated colors like neon cyan or pure yellow have very high luminance, so they sit close to white in brightness and produce a low contrast ratio — often under 2:1. They look vivid but are hard to read. Darken the text color (the Fix Suggestions tab shows how) while keeping the hue, or reserve the bright color for large headings and accents rather than body text.

What counts as 'large text'?

WCAG defines large text as at least 24px (18pt) for regular weight, or 18.66px (14pt) for bold. At that size the AA bar drops from 4.5:1 to 3:1 and the AAA bar drops from 7:1 to 4.5:1, because larger letterforms are easier to distinguish even at lower contrast.

How are semi-transparent colors handled?

Contrast is only meaningful between two opaque colors. If your foreground color has an alpha channel (e.g. rgba(0,0,0,0.6)), this tool composites it over the background first using out = fg·α + bg·(1−α), then measures the contrast of the resulting opaque color — which is what a viewer actually sees.

Is a higher contrast ratio always better?

Higher contrast is generally more legible, but extreme contrast (pure #000 on pure #fff at 21:1) can cause visual fatigue and halation for some users, especially those with dyslexia or light sensitivity. Many designers use a very dark grey on off-white (around 12–16:1) for long-form reading. Comfortably clearing AA, not maximizing the number, is the goal.

Does passing contrast make my site fully accessible?

No — contrast is one requirement among many. You also need keyboard operability, meaningful alt text, proper headings and landmarks, visible focus states, and to avoid using color as the only way to convey information. Use this checker as part of a broader accessibility review, not as a complete audit.

Can I share or export a result?

Yes. The Share button copies a link with your two colors encoded in the URL, so a colleague opens the exact same pair. The Copy button puts a text summary on your clipboard, and the CSV button downloads the ratio plus every pass/fail verdict for documentation or design-review notes.

Pemeriksa Kontras Warna — Rasio Kontras Wcag

📋

Panduan langkah demi langkah

Cara menggunakan kalkulator ini

3 langkah

1

Masukkan dua warna Anda

Ketikkan warna latar depan (teks) dan warna latar belakang, atau gunakan pemilih contoh. Format umum apa pun dapat digunakan: hex (#1a1a2e atau #f00), rgb()/rgba(), hsl()/hsla(), atau nama warna CSS seperti slategray. Alat pilih dan bidang teks tetap sinkron, dan rasio langsung dihitung ulang.

2

Baca rasio dan lencana

Judulnya menunjukkan rasio kontras WCAG dari 1:1 (identik) hingga 21:1 (hitam putih). Kelima lencana memberi tahu Anda secara sekilas apakah pasangan tersebut melewati AA dan AAA untuk teks normal dan besar, ditambah bilah 3:1 untuk komponen UI dan grafis. Pratinjau langsung menampilkan warna sebenarnya pada teks contoh sebenarnya.

3

Perbaiki jika gagal

Jika pasangan kurang dari AA (4,5:1 untuk teks normal), buka tab Saran Perbaiki. Ini menawarkan versi warna teks yang lebih gelap dan lebih terang yang mempertahankan rona yang sama tetapi meneruskan bilah 4,5:1 pada latar belakang Anda. Klik saran apa pun untuk menerapkannya, lalu bagikan kombinasi passing dengan tombol Bagikan.

⚡

Referensi

Rumus dan metodologi

3 rumus

Pencahayaan relatif (linierisasi per saluran)

L = 0.2126·R + 0.7152·G + 0.0722·B, where each channel c (0–1) is linearized: c ≤ 0.03928 → c/12.92, else ((c+0.055)/1.055)^2.4

Setiap saluran sRGB terlebih dahulu dibagi 255, kemudian diubah dari sRGB berkode gamma menjadi cahaya linier. Tiga saluran linier tersebut diberi bobot berdasarkan seberapa kuat mata manusia memandang warna merah, hijau, dan biru dan dijumlahkan menjadi satu nilai pencahayaan relatif L antara 0 (hitam) dan 1 (putih).

Rasio kontras

ratio = (L_lighter + 0.05) / (L_darker + 0.05)

Luminansi warna yang lebih terang ditambah 0,05 dibagi dengan luminansi warna yang lebih gelap ditambah 0,05. Layar ambien model istilah 0,05 menyala. Hasilnya berkisar dari 1:1 (tanpa kontras) hingga 21:1 (hitam murni di atas putih murni). Jika latar depan memiliki alfa, maka latar depan dikomposisikan terlebih dahulu.

Ambang batas WCAG

AA normal ≥ 4.5 · AA large ≥ 3.0 · AAA normal ≥ 7.0 · AAA large ≥ 4.5 · UI/graphics ≥ 3.0

Teks besar berarti setidaknya 24 piksel biasa atau 18,66 piksel (14pt) tebal. Kontras UI (WCAG 1.4.11) berlaku untuk elemen non-teks seperti ikon, batas masukan, indikator fokus, dan bagian bagan yang bermakna.

📖

Glosarium

Penjelasan istilah penting

6 istilah

Angka dari 1:1 hingga 21:1 yang menjelaskan perbedaan pencahayaan antara dua warna. Lebih tinggi lebih mudah dibaca. WCAG 1.4.3 menetapkan 4.5:1 sebagai minimum AA untuk teks isi normal.

Kecerahan warna yang dirasakan pada skala 0–1, dihitung dari saluran merah, hijau, dan biru yang dilinearisasi dengan bobot 0,2126 / 0,7152 / 0,0722. Warna hijau mendominasi karena mata paling sensitif terhadapnya.

Tingkat kesesuaian Pedoman Aksesibilitas Konten Web. AA (tingkat referensi sebagian besar undang-undang) memerlukan 4,5:1 untuk teks normal; AAA adalah target yang ditingkatkan pada 7:1.

Teks setidaknya berukuran 24 piksel (18pt) biasa, atau 18,66 piksel (14pt) tebal. Mesin terbang yang lebih besar lebih mudah dibaca, jadi WCAG melonggarkan standarnya menjadi 3:1 untuk AA dan 4,5:1 untuk AAA.

WCAG 1.4.11 memerlukan rasio 3:1 untuk objek grafis dan komponen antarmuka yang menyampaikan makna — ikon, lingkaran fokus, batas masukan, status peralihan, dan bagian penting bagan.

Jika warna latar depan semi-transparan, warna efektifnya bergantung pada apa yang ada di belakangnya. Alat ini memadukan latar depan dengan latar belakang menggunakan out = fg·α + bg·(1−α) sebelum mengukur kontras.

👥

Skenario

Contoh dalam kehidupan nyata

3 contoh nyata

📝

Teks isi pada halaman ringan

Teks paragraf abu-abu tengah berwarna putih

Latar depan #777777 Latar Belakang #ffffff

Pasangan ini mendapat skor sekitar 4,48:1 — tepat di bawah bilah AA 4,5:1 untuk teks normal, meskipun pasangan ini menghapus bilah teks besar 3:1. Ini adalah kejadian nyaris celaka yang klasik. Menggelapkan teks ke #767676 (≈4.54:1) atau #717171 akan mendorongnya melewati garis. Tab Saran Perbaiki mengusulkan perubahan warna sama terkecil yang berhasil.

🌙

UI mode gelap

Teks putih pada permukaan biru laut yang dalam

Latar depan #ffffff Latar Belakang #0d1117

Putih pada #0d1117 mendarat sekitar 17,9:1 — jauh di atas bilah AAA 7:1. Ini adalah kombinasi yang luar biasa dan memiliki keterbacaan tinggi untuk teks isi mode gelap dan berfungsi untuk pengguna dengan gangguan penglihatan. Tidak diperlukan perubahan.

🔗

Warna tautan merek

Teks tautan Cyan berwarna putih

Latar depan #22d3ee Latar Belakang #ffffff

Cyan cerah (#22d3ee) pada warna putih hanya sekitar 1,6:1 — gagal memenuhi setiap ambang batas teks dan hampir tidak terlihat. Tab Saran Perbaikan mengusulkan warna sian gelap seperti #0e7490 (≈4.5:1+) yang mempertahankan rona merek saat meneruskan AA, itulah sebabnya palet mode terang situs ini menggunakan #0891b2 alih-alih nilai mode gelap neon.

🔗

Referensi

Sitasi kalkulator ini

APA & MLA

Gunakan salah satu format ini untuk menyitasi kalkulator dalam makalah, laporan, atau daftar sumber.

APA

MLA

📄

Ulasan mendalam

Memahami Kontras Warna dan WCAG

3 bab · 5 menit membaca

Kontras warna menentukan apakah orang sungguhan benar-benar dapat membaca teks Anda. Pemeriksa Kontras Warna mengukur rasio kontras WCAG antara dua warna dan memberi tahu Anda apakah pasangan tersebut aman untuk teks normal, teks besar, dan elemen antarmuka. Panduan ini menjelaskan asal angkanya, arti ambang batasnya, dan cara memperbaiki kombinasi yang gagal.

Bagaimana rasio kontras dihitung

Kontras bukan sekadar perbedaan nilai warna — kontras didasarkan pada pencahayaan relatif, sebuah model kecerahan yang dirasakan. Saluran merah, hijau, dan biru setiap warna dinormalisasi menjadi 0–1, diubah dari sRGB berkode gamma menjadi cahaya linier, kemudian diberi bobot (0,2126 merah, 0,7152 hijau, 0,0722 biru) dan dijumlahkan. Warna hijau memiliki bobot paling besar karena mata manusia paling sensitif terhadapnya.

Kedua nilai pencahayaan memberikan rasio (L_lighter + 0.05) / (L_darker + 0.05). Konstanta 0,05 menjelaskan cahaya sekitar yang dipantulkan dari layar. Hasilnya berkisar dari 1:1 (warna yang sama) hingga 21:1 (hitam murni di atas putih murni). Jika warna latar depan bersifat semi-transparan, alat ini akan menggabungkan warna tersebut dengan latar belakang terlebih dahulu, karena itulah yang sebenarnya dilihat oleh pemirsa.

Apa yang dimaksud dengan ambang batas

WCAG mendefinisikan tingkatan. Untuk teks isi normal, AA memerlukan 4,5:1 dan AAA memerlukan 7:1. Untuk teks besar — setidaknya berukuran 24 piksel biasa atau 18,66 piksel tebal — bilahnya dikurangi menjadi 3:1 (AA) dan 4,5:1 (AAA), karena mesin terbang yang lebih besar secara inheren lebih mudah dibaca. Aturan terpisah, WCAG 1.4.11, menetapkan minimum 3:1 untuk elemen non-teks: ikon, batas masukan, indikator fokus, dan bagian penting dari bagan dan grafik.

AA adalah dasar praktisnya. Sebagian besar undang-undang aksesibilitas — ADA di AS, Undang-Undang Aksesibilitas Eropa, Bagian 508 — mengacu pada WCAG AA. Mencapai AAA di mana pun merupakan hal yang mengagumkan, tetapi tidak selalu dapat dicapai untuk warna merek; AA untuk teks isi ditambah 3:1 untuk UI adalah target realistis untuk sebagian besar produk.

Memperbaiki pasangan yang gagal

Jika kombinasi gagal, penyebab umum adalah warna latar depan yang terlalu terang dengan latar belakang. Perbaikan paling tepat adalah dengan menyesuaikan kecerahan warna teks sambil mempertahankan ronanya, sehingga desain tetap terasa sesuai merek. Tab Saran Perbaiki pada alat ini melakukan hal tersebut — tab ini mengubah warna teks menjadi lebih gelap dan terang hingga melintasi 4,5:1, dan melaporkan perubahan terkecil yang terjadi.

Dua peringatan. Pertama, kontras memang diperlukan, namun tidak cukup: warna tidak boleh menjadi satu-satunya cara Anda memberi sinyal makna, karena pengguna buta warna mungkin tidak dapat melihat perbedaannya. Kedua, gambar latar belakang yang besar dan gradien tidak dapat melakukan pemeriksaan rasio tunggal — uji titik terburuk di mana teks tumpang tindih dengan bagian paling terang atau paling gelap pada gambar.

❓

Pertanyaan

Pertanyaan umum

7 pertanyaan

Rasio kontras apa yang sebenarnya saya perlukan?+

Untuk teks isi normal, usahakan setidaknya 4,5:1 untuk memenuhi WCAG AA — tingkat yang disyaratkan oleh sebagian besar undang-undang aksesibilitas. Teks besar (24px+ reguler atau 18,66px+ tebal) hanya membutuhkan 3:1. Ikon, batas, dan cincin fokus memerlukan rasio 3:1 pada WCAG 1.4.11. Jika Anda ingin tingkat AAA yang ditingkatkan, teks normal memerlukan 7:1 dan teks besar memerlukan 4,5:1.

Mengapa merek saya cyan/kuning gagal dalam warna putih?+

Warna-warna cerah dan jenuh seperti neon cyan atau kuning murni memiliki luminansi yang sangat tinggi, sehingga kecerahannya mendekati putih dan menghasilkan rasio kontras yang rendah — seringkali di bawah 2:1. Mereka tampak jelas tetapi sulit dibaca. Gelapkan warna teks (tab Saran Perbaiki menunjukkan caranya) sambil mempertahankan rona, atau simpan warna cerah untuk judul dan aksen besar, bukan teks isi.

Apa yang dianggap sebagai 'teks besar'?+

WCAG mendefinisikan teks besar setidaknya berukuran 24 piksel (18pt) untuk bobot biasa, atau 18,66 piksel (14pt) untuk tebal. Pada ukuran tersebut batang AA turun dari 4,5:1 menjadi 3:1 dan batang AAA turun dari 7:1 menjadi 4,5:1, karena bentuk huruf yang lebih besar lebih mudah dibedakan bahkan pada kontras yang lebih rendah.

Bagaimana cara menangani warna semi transparan?+

Kontras hanya bermakna antara dua warna buram. Jika warna latar depan Anda memiliki saluran alfa (mis. rgba(0,0,0,0.6)), alat ini akan menggabungkannya dengan latar belakang terlebih dahulu menggunakan out = fg·α + bg·(1−α), lalu mengukur kontras dari warna buram yang dihasilkan — yaitu apa yang sebenarnya dilihat oleh pemirsa.

Apakah rasio kontras yang lebih tinggi selalu lebih baik?+

Kontras yang lebih tinggi umumnya lebih mudah dibaca, namun kontras yang ekstrim (murni #000 pada #fff murni pada 21:1) dapat menyebabkan kelelahan penglihatan dan sesak napas bagi sebagian pengguna, terutama mereka yang menderita disleksia atau sensitivitas cahaya. Banyak desainer menggunakan warna abu-abu yang sangat gelap pada warna putih pudar (sekitar 12–16:1) untuk pembacaan jangka panjang. Tujuannya adalah menyelesaikan AA dengan nyaman, bukan memaksimalkan jumlahnya.

Apakah melewatkan kontras membuat situs saya dapat diakses sepenuhnya?+

Tidak - kontras adalah salah satu persyaratan di antara banyak persyaratan. Anda juga memerlukan pengoperasian keyboard, teks alternatif yang bermakna, judul dan landmark yang tepat, status fokus yang terlihat, dan menghindari penggunaan warna sebagai satu-satunya cara untuk menyampaikan informasi. Gunakan pemeriksa ini sebagai bagian dari tinjauan aksesibilitas yang lebih luas, bukan sebagai audit lengkap.

Bisakah saya membagikan atau mengekspor hasilnya?+

Ya. Tombol Bagikan menyalin tautan dengan dua warna yang dikodekan di URL, sehingga rekan kerja membuka pasangan yang sama persis. Tombol Salin menempatkan ringkasan teks di papan klip Anda, dan tombol CSV mengunduh rasio ditambah setiap keputusan lulus/gagal untuk dokumentasi atau catatan tinjauan desain.

Unduh PDF satu halaman berisi hasil Anda. Masukkan alamat email untuk menerima kiat kalkulator sesekali. Tanpa spam, dan Anda dapat berhenti berlangganan kapan saja. Privasi.

Pemeriksa Kontras Warna