Pemeriksa Kontras Warna

Standar kontras adalah 4,5:1, dan teks abu-abu di atas putih lulus sampai #767676

Kontras warna adalah perbandingan tingkat kecerahan antara warna teks dan warna latar, dinyatakan dari 1:1 sampai 21:1. Dua warna yang sama menghasilkan 1:1, sedangkan hitam di atas putih menghasilkan 21:1. WCAG 2.2, standar internasional untuk aksesibilitas web, meminta rasio minimal 4,5:1 (tingkat AA) untuk teks berukuran biasa seperti isi artikel. Jika teks abu-abu dipakai di atas latar putih, #767676 adalah abu-abu paling terang yang lulus, dengan rasio 4,54:1. Satu tingkat lebih terang, #777777, hanya mencapai 4,47:1 dan tidak lulus. Rasio kontras tidak bergantung pada urutan kedua warna, jadi teks putih di atas latar #767676 juga menghasilkan 4,54:1.

Masukkan warna teks dan warna latar pada alat di atas, lalu rasio kontras dan status lulus untuk teks biasa, teks besar, dan ikon langsung ditampilkan. Jika Anda mengisi ukuran dan ketebalan huruf, alat ini memilih standar yang berlaku untuk teks tersebut. Bila belum lulus, alat mencari warna terdekat yang lulus dengan hanya mengubah kecerahan dan mempertahankan rona. Pratinjau di bagian bawah juga menunjukkan bagaimana dua warna yang sama terlihat oleh orang dengan gangguan penglihatan warna, lengkap dengan rasio kontrasnya.

Kapan kontras perlu diperiksa

Dokumen penjelasan W3C (Understanding SC 1.4.3) menyebut tujuan standar ini: agar teks dapat dibaca oleh orang dengan penglihatan rendah tingkat sedang atau gangguan persepsi kontras, tanpa harus memakai teknologi bantu yang menambah kontras. Rasio 4,5:1 dimaksudkan untuk mengimbangi kombinasi penglihatan rendah sedang, gangguan penglihatan warna bawaan atau yang didapat kemudian, dan penurunan sensitivitas kontras yang lazim terjadi seiring usia. Teks berkontras rendah mungkin hanya tampak agak pudar bagi orang berpenglihatan tajam, tetapi bisa sama sekali tidak terbaca bagi mereka. Perhitungan kontras berguna terutama pada situasi berikut.

• Saat warna merek dipakai untuk tombol dan tautan: biru, merah, dan hijau yang tampak cerah di layar sering kali berkontras rendah terhadap latar putih atau teks putih. Tautan #3B82F6 di atas putih hanya 3,67:1, dan teks putih di atas tombol #EF4444 hanya 3,76:1. Keduanya belum memenuhi standar untuk teks isi.
• Saat teks petunjuk dan keterangan dibuat abu-abu muda: #9CA3AF, warna yang sering dipakai untuk placeholder, tanggal, atau sumber, hanya 2,53:1 di atas putih. Niat membuatnya tampak kurang penting justru membuatnya tidak terbaca.
• Saat menentukan warna mode gelap: pada latar gelap, abu-abu yang sama memberi kontras yang sangat berbeda, jadi hitung terpisah dari tampilan terang.
• Saat menyusun token warna sistem desain: jika pasangan warna teks dan latar sudah ditetapkan dengan angka sejak awal, setiap layar baru tidak perlu diperiksa ulang dari nol.
• Saat menyiapkan audit aksesibilitas: kontras warna adalah salah satu butir yang paling sering diperiksa dalam audit aksesibilitas web.

Cara menghitung rasio kontras

WCAG 2.2 menghitung rasio kontras dengan nilai yang disebut luminans relatif. Pertama, bagi setiap nilai R, G, dan B (0 sampai 255) dengan 255. Jika hasilnya 0,04045 atau kurang, bagi dengan 12,92. Jika lebih besar, hitung nilai linearnya dengan ((nilai + 0,055) ÷ 1,055)^2,4. Luminans relatif adalah L = 0,2126 × R + 0,7152 × G + 0,0722 × B, dan rasio kontras adalah (L warna terang + 0,05) ÷ (L warna gelap + 0,05). Hijau mendapat bobot terbesar karena mata manusia paling peka terhadap kecerahan cahaya hijau.

Definisi sebelum Mei 2021 menuliskan ambang 0,03928, bukan 0,04045. WCAG 2.2 menyatakan perbedaan ini tidak berdampak nyata pada perhitungan, dan memang tidak ada nilai 8-bit yang jatuh di antara kedua ambang itu (10/255 = 0,0392 dan 11/255 = 0,0431). Berikut perhitungan #3B82F6 di atas latar putih.

Luminans relatifnya adalah 0,2126 × 0,0437 + 0,7152 × 0,2232 + 0,0722 × 0,9216 = 0,2355. Luminans putih adalah 1, jadi rasio kontrasnya (1 + 0,05) ÷ (0,2355 + 0,05) = 3,6779…. Dokumen penjelasan W3C menegaskan bahwa hasil perhitungan tidak dibulatkan, dan memberi contoh bahwa 4,499:1 tetap tidak memenuhi 4,5:1. Karena itu alat ini menampilkan 3,67:1, yaitu hasil yang dipotong pada dua angka desimal, dan penilaiannya memakai angka yang tampil di layar tersebut.

Ringkasan standar kontras WCAG 2.2

Standar teks memiliki pengecualian. Teks pada komponen antarmuka yang tidak aktif, dekorasi murni, teks yang tidak terlihat oleh siapa pun, dan teks dalam foto yang berisi konten visual penting lain tidak dikenai persyaratan kontras. Teks yang menjadi bagian dari logo atau nama merek juga tidak dikenai persyaratan. Kriteria 1.4.11 untuk ikon dan garis tepi menilai kontras terhadap warna di sekitarnya, dengan pengecualian komponen yang tidak aktif dan elemen yang tampil dengan gaya bawaan peramban.

AA adalah tingkat yang diminta oleh sebagian besar regulasi dan pedoman, sedangkan AAA ditujukan bagi tampilan yang lebih mudah dibaca. WCAG 2.2 sendiri menyatakan bahwa sebagian konten tidak mungkin memenuhi seluruh kriteria AAA, sehingga tidak menyarankan AAA sebagai kebijakan umum untuk seluruh situs.

Berapa px ukuran teks besar?

Teks besar dalam WCAG adalah teks berukuran 18pt ke atas, atau 14pt ke atas dengan huruf tebal. Dalam CSS, 1pt sama dengan 4/3px, sehingga teks dengan ketebalan normal harus 24px atau lebih, dan teks tebal 18,67px atau lebih. Dokumen penjelasan W3C menulis 14pt sebagai sekitar 18,5px, jadi teks tebal antara 18,5px dan 18,67px berada di perbatasan. Alat ini mengonversi secara tepat dengan 1pt = 4/3px. Ukuran huruf yang dihitung adalah ukuran saat konten disajikan, sebelum diperbesar oleh pengguna.

WCAG juga mencatat bahwa huruf dengan goresan sangat tipis atau bentuk yang tidak lazim lebih sulit dibaca pada kontras rendah. Jika Anda memakai jenis huruf yang tipis, pertimbangkan memenuhi 4,5:1 meskipun teksnya sudah tergolong besar.

Kontras warna yang sering dipakai di atas putih dan hitam

Nilai pada kolom latar putih sama dengan nilai teks putih di atas latar berwarna tersebut. Penilaian memakai standar AA untuk teks biasa (4,5:1).

Seperti terlihat pada tabel, abu-abu menengah di sekitar #767676 sedikit melampaui 4,5:1 baik dengan teks putih maupun hitam. Jika dihitung, di atas latar apa pun salah satu dari teks putih atau hitam selalu menghasilkan minimal 4,58:1, jadi AA selalu bisa dicapai dengan mengganti teks menjadi putih atau hitam. Sebaliknya, warna terang seperti kuning dan oranye sulit dipakai sebagai teks di atas putih, dan Anda perlu warna dari rona yang sama dengan kecerahan jauh lebih rendah (misalnya #B45309).

Cara memperbaiki warna yang belum lulus

Fitur “Sesuaikan dengan kecerahan” mengubah warna yang dipilih ke ruang warna OKLCH, mempertahankan sudut rona, lalu menggeser kecerahan 0,001 demi 0,001 untuk menemukan satu warna di sisi gelap dan satu di sisi terang yang pertama kali melampaui standar. Dari keduanya, alat mengusulkan yang bergerak lebih sedikit dari kecerahan asal, lalu memeriksa ulang kontrasnya setelah dibulatkan ke HEX 8-bit. Jika dalam proses itu warnanya keluar dari rentang yang dapat ditampilkan layar, hanya kroma yang dikurangi, seperti pemetaan gamut pada CSS Color 4. Karena itu warna yang diusulkan tampak sefamili dengan warna asal.

Jika luminans relatif latar berada antara 0,10 dan 0,30, seperti pada tombol #EF4444, baik teks putih maupun teks hitam tidak mencapai 7:1, sehingga AAA tidak bisa dipenuhi dengan warna teks apa pun. Dalam kasus ini warna latar yang harus diubah, dan dengan memilih “Warna latar” pada alat Anda bisa langsung melihat seberapa pekat tombol itu harus dibuat. Jika warna merek harus dipertahankan, pakai warna itu hanya untuk teks besar (24px ke atas, atau 18,67px ke atas yang tebal), dan gunakan warna yang lebih pekat untuk teks isi.

Teks semitransparan dihitung dari warna campurannya

Teks semitransparan yang ditulis dengan rgba() atau HEX 8 digit tampak bercampur dengan latarnya. Warna campuran dihitung per kanal dengan rumus teks × opasitas + latar × (1 − opasitas), dibulatkan ke nilai 8-bit seperti pada layar, lalu kontrasnya dihitung. Untuk teks hitam di atas latar putih, kontras berubah menurut opasitasnya seperti berikut.

Karena warna yang tampak ikut berubah ketika latar berubah, periksa teks yang sama pada setiap latar tempat teks itu diletakkan. Untuk teks di atas gradasi atau foto, memasukkan warna di titik tempat kontras paling rendah di belakang teks sebagai warna latar adalah cara yang aman.

Kontras bagi orang dengan gangguan penglihatan warna

Rumus rasio kontras memakai bobot yang didasarkan pada penglihatan warna yang umum. Bagi orang dengan tipe 1 (protanopia), warna merah tampak lebih gelap, sehingga teks merah di atas latar hitam bisa terasa berkontras lebih rendah daripada angka perhitungannya. Pratinjau pada alat ini meniru gangguan dengan tingkat terkuat memakai model Machado, Oliveira, dan Fernandes (2009), model yang sama dengan emulasi gangguan penglihatan di Chrome DevTools, lalu menghitung ulang rasio kontras dua warna yang telah berubah.

Pasangan merah dan hijau pada baris terakhir sejak awal hanya 1,27:1 sehingga tidak layak untuk teks, dan pada tipe 2 (deuteranopia) turun menjadi 1,01:1, hampir sama persis. Informasi yang dibedakan hanya lewat warna (merah untuk galat, hijau untuk normal) juga bertentangan dengan WCAG 1.4.1, terlepas dari rasio kontrasnya, sehingga tambahkan teks atau pola. Angka simulasi hanyalah perkiraan untuk membantu pemahaman, sedangkan penilaian standar tetap memakai rasio kontras warna asli. Untuk memeriksa penglihatan warna Anda sendiri, coba juga tes buta warna.

Aksesibilitas web di Indonesia: dasar hukum yang dapat dipastikan

Undang-Undang Nomor 8 Tahun 2016 tentang Penyandang Disabilitas mendefinisikan Aksesibilitas sebagai kemudahan yang disediakan untuk Penyandang Disabilitas guna mewujudkan Kesamaan Kesempatan (Pasal 1 angka 8). Pasal 18 menyebut hak aksesibilitas, yaitu hak mendapatkan aksesibilitas untuk memanfaatkan fasilitas publik dan hak mendapatkan akomodasi yang layak sebagai bentuk aksesibilitas bagi individu. Untuk informasi, Pasal 24 huruf b menjamin hak penyandang disabilitas untuk mendapatkan informasi dan berkomunikasi melalui media yang mudah diakses.

Teks undang-undang tersebut tidak memuat kata WCAG maupun web, dan tidak menetapkan tingkat atau angka kontras tertentu. Dalam penelusuran untuk artikel ini, peraturan pemerintah yang secara khusus mewajibkan WCAG juga tidak ditemukan. Karena itu WCAG tidak dapat disebut sebagai kewajiban hukum tertentu, tetapi karena menjadi standar internasional untuk aksesibilitas web, WCAG layak dipakai sebagai acuan teknis ketika Anda ingin menilai apakah sebuah situs benar-benar “media yang mudah diakses”. Untuk kebutuhan resmi seperti pengadaan pemerintah atau audit, tanyakan persyaratan yang berlaku kepada pihak pemberi pekerjaan.

Kesalahan yang sering terjadi

• Membulatkan lalu menganggap lulus: #777777 di atas putih adalah 4,478…:1. Jika dibulatkan tampak seperti 4,5, tetapi tidak memenuhi standar.
• Menganggap teks tebal 18px sebagai teks besar: 14pt sama dengan 18,67px, jadi teks tebal 18px memakai standar teks biasa (4,5:1).
• Menganggap teks petunjuk sebagai pengecualian: pengecualian WCAG hanya komponen yang tidak aktif, dekorasi, teks yang tidak terlihat, teks dalam foto, dan logo. Teks petunjuk pada kolom isian yang aktif dan teks pendukung tidak ada dalam daftar itu.
• Melupakan warna saat kursor diarahkan: warna pada keadaan hover, fokus, dan terpilih juga harus dihitung masing-masing.
• Hanya memeriksa tampilan terang: mode gelap memiliki latar berbeda sehingga kontrasnya berubah total. Hitung secara terpisah.
• Melewatkan tombol yang hanya berisi ikon: tombol ikon tanpa teks dan garis tepi kolom isian memerlukan 3:1 menurut 1.4.11.

Keterbatasan

• Rumus kontras WCAG 2.2 hanya membagi ukuran teks menjadi biasa dan besar, dan tidak memperhitungkan ketebalan goresan huruf. Pada 4,5:1 yang sama, huruf tipis tetap lebih sulit dibaca.
• WCAG 3.0 masih berupa draf kerja, dan metode penghitungan kontras barunya belum ditetapkan. Alat ini memakai rumus WCAG 2.2, rekomendasi yang berlaku saat ini.
• Kecerahan layar, cahaya sekitar, dan perbedaan warna antarmonitor tidak diperhitungkan. Perhitungan mengacu pada warna sRGB.
• Hanya satu warna latar yang dapat dimasukkan. Untuk latar gradasi atau foto, periksa terpisah dengan warna di titik yang paling tidak menguntungkan.
• Pratinjau gangguan penglihatan warna adalah perkiraan berdasarkan model, dan penglihatan sebenarnya berbeda pada tiap orang.
• Kontras hanyalah satu butir aksesibilitas. Butir lain seperti penggunaan keyboard, teks alternatif, dan pembesaran teks harus diperiksa tersendiri.
• Warna yang Anda masukkan dihitung hanya di dalam peramban dan tidak dikirim ke server.

Tanggal acuan: 20 Oktober 2026. Ditulis berdasarkan WCAG 2.2 (Rekomendasi W3C, versi 12 Desember 2024) dan Undang-Undang Nomor 8 Tahun 2016 tentang Penyandang Disabilitas (salinan resmi dari peraturan.bpk.go.id).

Sumber

• 01W3C — Web Content Accessibility Guidelines (WCAG) 2.2Definisi luminans relatif, rasio kontras, dan teks besar; kriteria sukses 1.4.3, 1.4.6, 1.4.11; catatan kesesuaian (versi 12 Desember 2024)
• 02W3C — Understanding SC 1.4.3: Contrast (Minimum)Tujuan dan alasan (penglihatan rendah, penurunan sensitivitas kontras karena usia), rasio tidak dibulatkan (4,499:1 tidak lulus), 14pt dan 18pt ≈ 18,5px dan 24px
• 03W3C — Understanding SC 1.4.6: Contrast (Enhanced)AAA 7:1 dan teks besar 4,5:1
• 04W3C — Understanding SC 1.4.11: Non-text ContrastKomponen antarmuka dan grafik 3:1
• 05Undang-Undang Nomor 8 Tahun 2016 tentang Penyandang Disabilitas (peraturan.bpk.go.id)Pasal 1 angka 8 (Aksesibilitas), Pasal 18 (hak aksesibilitas), Pasal 24 huruf b (informasi dan komunikasi melalui media yang mudah diakses)
• 06Machado, Oliveira, Fernandes (2009) — A Physiologically-based Model for Simulation of Color Vision DeficiencyMatriks simulasi gangguan penglihatan warna (tingkat 1,0)
• 07Chrome for Developers — Simulating color vision deficiencies in the Blink RendererPenjelasan bahwa emulasi gangguan penglihatan di DevTools memakai model yang sama
• 08Björn Ottosson (2020) — A perceptual color space for image processingRumus konversi OKLab (Sesuaikan dengan kecerahan)
• 09W3C — CSS Color Module Level 4, 14. Gamut MappingWarna di luar gamut diperbaiki dengan menurunkan kroma sambil mempertahankan rona

Pertanyaan yang sering diajukan

Alat yang sering dipakai bersama