Pemeriksa Kontras

Periksa rasio kontras warna terhadap pedoman WCAG 2.1 secara instan. Pastikan teks Anda dapat dibaca dan desain Anda dapat diakses oleh semua orang. Gratis dan mudah digunakan.

A contrast checker evaluates the readability of text against a background color by calculating the WCAG (Web Content Accessibility Guidelines) contrast ratio. The ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast between black and white). WCAG 2.1 requires at least 4.5:1 for normal text and 3:1 for large text. This tool computes ratios using the official W3C formula, entirely in your browser.

Pastikan warna Anda memenuhi standar aksesibilitas WCAG

Real-time contrast ratio calculation with AA and AAA pass/fail indicators. Live text preview, instant HEX input, and copy-ready values — all in your browser.

WCAG 2.1 compliant

Pratinjau langsung

Gratis tanpa batas

Cara menggunakan

1
Masukkan Warna
Masukkan kode HEX untuk warna teks dan latar belakang.
2
Lihat Pratinjau
Lihat bagaimana tampilan teks Anda secara real-time.
3
Periksa Rasio
Tinjau rasio kontras yang dihitung.
4
Validasi Kepatuhan
Periksa apakah lolos standar WCAG AA/AAA.

Mengapa Aksesibilitas Penting

Jangkau Audiens yang Lebih Luas

Buat konten Anda dapat digunakan oleh penyandang buta warna (sekitar 1 dari 12 pria dan 1 dari 200 wanita) serta mereka yang memiliki penglihatan rendah.

Tingkatkan Pengalaman untuk Semua Orang

Kontras yang baik meningkatkan keterbacaan untuk semua orang, terutama pada layar redup atau di bawah sinar matahari yang cerah.

Memahami Kontras Warna dan Aksesibilitas

WCAG contrast requirements explained

Web Content Accessibility Guidelines (WCAG) 2.1, diterbitkan oleh W3C, menentukan rasio kontras minimum untuk memastikan bahwa konten web dapat dibaca oleh orang dengan berbagai tingkat penglihatan. Persyaratan ini mencakup rasio minimum 4,5:1 untuk teks normal dan 3:1 untuk teks besar. Mencapai kontras yang tepat adalah salah satu aspek aksesibilitas web yang paling mudah dan berdampak.

The contrast ratio is calculated using the relative luminance of the two colors. Relative luminance is a weighted sum of the linearized RGB channels: L = 0.2126*R + 0.7152*G + 0.0722*B, where R, G, and B are gamma-corrected values (each channel is linearized by applying: if c <= 0.03928 then c/12.92 else ((c+0.055)/1.055)^2.4). The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color. The 0.05 offset accounts for ambient light flare on the screen.

Persyaratan ini tidak sewenang-wenang -- mereka didasarkan pada penelitian ekstensif tentang penglihatan manusia. Sekitar 8% pria dan 0,5% wanita memiliki beberapa bentuk defisiensi penglihatan warna. Rasio kontras 4,5:1 memastikan bahwa teks dapat dibaca oleh sebagian besar pengguna, termasuk mereka dengan penglihatan yang berkurang. Untuk pengguna dengan penglihatan 20/40 (setara dengan penglihatan normal pada usia 40-50), kontras 4,5:1 setara dengan kontras 3:1 untuk pengguna dengan penglihatan 20/20.

Kesalahan kontras umum dan cara memperbaikinya

Kesalahan kontras yang paling umum adalah menggunakan teks abu-abu terang pada latar belakang putih. Tren desain umum adalah menggunakan abu-abu terang untuk teks sekunder, tetapi ini sering gagal memenuhi persyaratan kontras WCAG. Solusinya adalah menggunakan abu-abu yang lebih gelap (setidaknya #767676 untuk teks normal pada putih) atau meningkatkan ukuran teks untuk memenuhi ambang batas teks besar.

For large text (headings, buttons), the 3:1 requirement is more forgiving, but don't abuse it. Large text that barely passes 3:1 is still hard to read for many users. Aim for 4.5:1 whenever possible, regardless of text size. When using colored backgrounds, test both the text color and any text that might appear on hover or focus states. CSS custom properties (variables) make it easier to maintain consistent contrast -- define your color palette with contrast-tested pairs and reuse them throughout your design system.

Memahami Peringkat WCAG

Level AA (Standar)

Membutuhkan 4.5:1 untuk teks normal, 3:1 untuk teks besar. Target standar untuk sebagian besar situs web.

Level AAA (Ditingkatkan)

Membutuhkan 7:1 untuk teks normal, 4.5:1 untuk teks besar. Aksesibilitas yang ditingkatkan untuk pengguna dengan kehilangan penglihatan yang signifikan.

Bagaimana ini dibandingkan dengan pemerja kontras lain?

A side-by-side comparison of popular WCAG contrast checking tools.

Fitur	NovaTools	WebAIM	Contrast-Ratio.com
WCAG 2.1 AA + AAA	Kedua level
Pratinjau langsung saat mengetik	Instan	Tombol kirim
HEX + RGB input	Keduanya	HEX only	HEX only
Integrasi pemilih warna	EyeDropper
Large text threshold	18pt / 14pt bold
Privasi (tanpa server)	100% lokal

Pemeriksa kontras kami menggunakan formula luminans W3C yang tepat dan berjalan sepenuhnya di browser Anda. Semua perhitungan bersifat lokal — tidak ada data yang dikirim ke server.

Pertanyaan yang sering diajukan

Apa itu kontras warna dan mengapa itu penting?

Kontras warna adalah perbedaan kecerahan antara warna latar depan dan latar belakangnya. Kontras yang tinggi memastikan bahwa orang dengan gangguan penglihatan dapat memahami konten Anda secara efektif.

Apakah logo diharuskan memenuhi standar ini?

Tidak, pedoman WCAG memberikan pengecualian untuk teks yang merupakan bagian dari logo atau nama merek, serta teks yang murni bersifat dekoratif.

Bagaimana cara memperbaiki rasio kontras yang rendah?

Tingkatkan perbedaan pencahayaan. Buat warna terang lebih terang atau warna gelap lebih gelap. Gunakan pratinjau langsung kami untuk bereksperimen.

Bagaimana cara memperbaiki rasio kontras yang rendah?

Increase the difference in luminance between the text and background. The most effective approach is to make the light color lighter or the dark color darker. For example, if your text is `#666666` on a white background (contrast ratio 5.7:1, passes AA), but you want to use a lighter gray for aesthetic reasons, you can darken the background instead. Our tool's live preview lets you experiment with different HEX values and see the contrast ratio update in real time. A general rule: pure black on pure white gives the maximum contrast ratio of 21:1. Any deviation from black/white reduces the ratio.

Bagaimana rasio kontras dihitung?

Rasio kontras dihitung menggunakan formula WCAG 2.1, yang menggunakan nilai luminans relatif. Pertama, luminans relatif dari setiap warna dihitung menggunakan saluran RGB yang dinormalisasi dan dikoreksi gamma. Kemudian, rasio kontras = (L1 + 0,05) / (L2 + 0,05), di mana L1 adalah luminans warna yang lebih terang dan L2 adalah luminans warna yang lebih gelap.

Apa perbedaan antara WCAG 2.1 dan WCAG 2.2?

WCAG 2.2, diterbitkan pada Oktober 2023, menambahkan beberapa kriteria keberhasilan baru tetapi tidak mengubah persyaratan kontras. Persyaratan kontras tetap sama: 4,5:1 untuk teks normal, 3:1 untuk teks besar (18pt atau 14pt bold), dan 3:1 untuk komponen antarmuka non-teks.

Apakah alat ini memeriksa aksesibilitas buta warna?

Alat ini secara khusus memeriksa kontras luminans, yang merupakan persyaratan WCAG. Buta warna (lebih akurat disebut defisiensi penglihatan warna) adalah kondisi yang berbeda yang memengaruhi kemampuan untuk membedakan warna tertentu. Seseorang dengan buta warna mungkin dapat melihat kontras yang baik antara dua warna yang terlihat serupa bagi orang lain. Alat ini tidak mendiagnosis atau menguji defisiensi penglihatan warna.

Apakah data warna saya dikirim ke server?

No. All contrast calculations happen entirely in your browser using JavaScript. The HEX values you enter are processed locally by the browser's JavaScript engine — they are never transmitted to our servers, stored in a database, or shared with third parties. The tool does not use cookies, local storage, or session storage to persist your color choices. There are no analytics scripts tracking which colors you test. This makes the tool safe to use for proprietary brand colors, confidential design systems, or client work where color choices should not be exposed to third parties.

Privasi Anda Adalah Prioritas Kami

Alat ini berjalan sepenuhnya di browser Anda. File Anda tidak diunggah, disimpan, atau dianalisis.

Kami tidak mengunggah, menyimpan, atau menganalisis file Anda.
Semua yang Anda proses tetap di perangkat Anda.
Tidak ada pemrosesan sisi server, penyimpanan cloud, atau analisis.

Bahkan jika koneksi internet Anda terputus, file Anda tetap aman.

Anda mungkin juga suka

Jelajahi topik ini

Semua alat dalam kategori iniAlat Warna Panduan untuk topik iniDesain & aksesibilitas

Pemilih Warna

Pilih warna dari gambar atau layar Anda.

Generator Palet

Buat palet warna yang indah.

Konverter HEX ↔ RGB ↔ HSL

Konversikan warna antara format HEX, RGB, dan HSL. Pratinjau langsung, preset cepat, salin nilai siap CSS. 100% sisi klien, tanpa unggahan.