Kebijakan Warna untuk Pengembang Kontras, Simulasi Kebutaan, dan Perbaikan Masalah

Kontras warna yang buruk adalah bug. Bukan kesalahan desain, bukan kelembutan pengalaman pengguna — sebuah bug yang menghancurkan antarmuka bagi sebagian besar pengguna. Berikut cara menemukannya, mensimulasikannya, dan memperbaikinya tanpa harus merancang ulang seluruh antarmuka.

Apa yang Dikatakan WCAG tentang Kontras

Pedoman Kebijakan Konten Web (WCAG) menetapkan rasio kontras minimum antara teks dan latar belakangnya. Rasio-rasio ini berkisar dari 1:1 (warna identik, tidak terlihat) hingga 21:1 (hitam pada putih, maksimum).

WCAG 2.1 menetapkan dua tingkat kepatuhan:

Tingkat WCAG	Rasio Kontras	Ukuran Teks	Contoh
AA	4.5:1	Teks normal (< 18pt / < 14pt tebal)	Sebagian besar teks isi
AA	3:1	Teks besar (≥ 18pt / ≥ 14pt tebal)	Judul
AAA	7:1	Teks normal	Kemampuan membaca terbaik
AAA	4.5:1	Teks besar	Judul (lebih ketat)
Setiap	3:1	Komponen antarmuka dan grafik	Ikon, batas form

Tingkat AA adalah dasar hukum bagi kebanyakan wilayah. Tingkat AAA bersifat aspiratif untuk teks kritis seperti isi, tetapi jarang diminta secara keseluruhan di seluruh situs.

Cara Menghitung Rasio Kontras

Rumus ini menggunakan luminansi relatif dari setiap warna:

Contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Di mana L1 adalah luminansi warna yang lebih terang dan L2 adalah warna yang lebih gelap. Luminansi itu sendiri berasal dari linearisasi setiap saluran RGB dan penimbangannya (merah: 0.2126, hijau: 0.7152, biru: 0.0722) — karena mata manusia paling sensitif terhadap hijau.

Anda tidak perlu melakukan perhitungan ini secara manual. Tempel dua nilai heksadesimal ke dalam Grid Kontras Warna dan Anda akan mendapatkan rasio, status lulus/kegagalan AA/AAA, serta tampilan grid yang membandingkan seluruh palet Anda sekaligus.

Apa yang dikatakan rumus dalam praktik: abu-abu tengah #767676 di atas putih #ffffff mencapai hampir tepat 4.5:1 — batas minimum AA. Jika lebih terang, Anda gagal. Jika lebih gelap, Anda mendapatkan margin.

Kecacatan Warna: Lebih Umum dari yang Anda Pikirkan

Sekitar 8% pria dan 0.5% wanita memiliki bentuk kecacatan penglihatan warna. Jenis utama:

• Deuteranopia — sensitivitas hijau yang berkurang. Bentuk paling umum (~5% pria). Merah dan hijau menjadi sulit dibedakan; keduanya bisa terlihat cokelat atau kuning.
• Protanopia — sensitivitas merah yang berkurang (~1% pria). Merah terlihat gelap dan tidak terang; kebingungan merah-hijau mirip dengan deuteranopia tetapi merah juga kehilangan kecerahan.
• Tritanopia — sensitivitas biru yang berkurang (sangat langka, ~0.003%). Pembedaan biru-hijau terganggu; biru terlihat hijau, kuning terlihat ungu.

Ini bukan kasus ekstrem. Jika produk Anda memiliki 10.000 pengguna bulanan, secara statistik 400–500 dari mereka memiliki bentuk kecacatan penglihatan warna.

Mengapa Warna Sendiri Tidak Cukup (WCAG 1.4.1)

Kriteria keberhasilan WCAG 1.4.1 — “Penggunaan Warna” — menyatakan bahwa warna tidak boleh digunakan sebagai hanya cara menyampaikan informasi, menunjukkan tindakan, atau membedakan elemen visual.

Kegagalan klasik: formulir yang menandai bidang tidak valid dengan warna merah. Orang dengan protanopia melihat bidang tersebut sebagai warna cokelat gelap — sama seperti bidang valid dalam cahaya redup. Tidak ada indikator lain.

Solusi bukan menghilangkan warna — melainkan menambahkan sinyal kedua. Ikon, perubahan batas, label, pesan kesalahan di dalam. Warna menjadi penunjang, bukan satu-satunya pembawa makna.

Cara Sebenarnya Memperbaiki Masalah Kontras

Intuisi adalah mengganti nuansa — mengubah biru menjadi biru lainnya. Biasanya ini tidak membantu. Perubahan nuansa hanya sedikit memengaruhi rasio kontras. Perubahan kecerahan justru lebih besar pengaruhnya.

Dalam HSL, nilai L mengendalikan luminansi. Untuk memperbaiki kegagalan kontras:

1. Gelapkan warna depan (meningkatkan perbedaan L terhadap latar belakang) — atau memperjelas latar belakang
2. Pertahankan nuansa dan saturasi — hanya sesuaikan kecerahan
3. Periksa kembali rasio

Pelanggaran umum: warna merek yang dipilih karena estetika, bukan kejelasan. Warna khas merek yang #00b4a2 di atas putih memberikan sekitar 2.4:1 — gagal AA. Gelapkan menjadi #007a6e dan Anda akan mencapai 4.7:1 — lulus. Sama keluarga nuansa, perubahan sangat tidak terlihat dalam identitas merek.

Untuk teks placeholder — seringkali digunakan dengan color: #999 atau serupa — cerita lebih buruk. Abu-abu di atas putih biasanya 2.5–3:1. Naik ke #767676 minimum, atau pertimbangkan untuk mengganti placeholder sebagai label utama (yang dilarang oleh WCAG).

Alur Pengujian

Alur keberlanjutan aksesibilitas memiliki tiga lapisan:

1. Pemeriksaan otomatis (cepat, tidak lengkap)
Pemeriksaan linter dan alat CI menangkap kegagalan yang jelas. axe-core terintegrasi dengan Jest, Playwright, dan Cypress. Lighthouse (dibangun dalam Chrome DevTools) memberikan skor keberlanjutan cepat. Alat-alat ini menangkap kegagalan kontras, teks yang hilang, dan penggunaan ARIA yang salah — tetapi hanya dapat mengevaluasi apa yang terlihat dalam DOM saat pengujian. alt 2. Simulasi (cepat, menangkap masalah layout nyata)

Simulasikan bagaimana antarmuka Anda terlihat di bawah kondisi penglihatan yang berbeda sebelum diluncurkan. Alat
Simulasi Kecacatan Penglihatan Warna memungkinkan Anda mengunggah screenshot dan melihatnya melalui deuteranopia, protanopia, tritanopia, dan mode lainnya. Chrome DevTools juga memiliki emulator kekurangan penglihatan di bawah Pengaturan Rendering. Simulasi menunjukkan masalah yang tidak terdeteksi oleh alat otomatis: dashboard di mana bar "kesalahan" tidak dapat dibedakan dari bar "keberhasilan" karena keduanya terlihat cokelat di bawah deuteranopia. Rasio kontras masing-masing bar mungkin lolos AA — tetapi tetap secara visual identik bagi pengguna yang mengalami kecacatan warna.

3. Pengujian pengguna nyata (lambat, otoritatif)

Tidak ada yang bisa menggantikan umpan balik dari orang yang memiliki kecacatan penglihatan warna nyata. Sertakan aksesibilitas dalam riset pengguna Anda. Organisasi seperti Paciello Group menawarkan layanan pengujian; rekrutmen melalui komunitas khusus disabilitas juga berhasil.
Alat untuk Dipertahankan dalam Alur

— tempel palet warna lengkap Anda, lihat setiap kombinasi depan-latar belakang dan status lolos/kegagalan WCAG dalam satu tampilan

• Grid Kontras Warna — unggah screenshot, lihat simulasi di bawah semua jenis kekurangan utama
• memungkinkan Anda mengunggah screenshot dan melihatnya melalui deuteranopia, protanopia, tritanopia, dan mode lainnya. Chrome DevTools juga memiliki emulator kekurangan penglihatan di bawah Pengaturan Rendering. axe DevTools
• (ekstensi browser) — jalankan pada halaman hidup, flag pelanggaran dengan referensi elemen Plugin Figma
• — “Stark” dan “A11y – Color Contrast Checker” bekerja secara langsung dalam file desain sebelum apa pun dibangun CLI
• color-contrast — pemeriksaan rasio yang dapat dijalankan secara script, berguna dalam hook pra-commit atau CI Periksa rasio kontras selama desain, bukan setelah QA. 4.5:1 untuk teks isi, 3:1 untuk teks besar dan komponen antarmuka. Saat Anda memperbaiki warna yang gagal, sesuaikan kecerahan — bukan nuansa. Jalankan simulasi untuk palet warna utama dan visualisasi data. Dan tidak pernah gunakan warna sebagai satu-satunya indikator keadaan.

Versi Singkat

Aksesibilitas bukan daftar cek yang dijalankan di akhir. Kontras yang buruk adalah bug yang diluncurkan secara diam-diam, memengaruhi pengguna nyata, dan hampir selalu dapat diperbaiki dalam waktu lima menit setelah Anda tahu di mana mencari.

Kebijakan Warna untuk Pengembang: Kontras, Simulasi Kecacatan, dan Perbaikan Masalah 2

Anda mungkin juga menyukai