🎨
← Kembali ke Panduan

Kontras Warna yang Aksesibel: Panduan WCAG untuk Desainer

· Tag: accessibility, wcag, color-contrast, web-design, a11y, inclusive-design

Kontras Warna yang Aksesibel: Panduan WCAG

Kontras warna adalah salah satu aspek terpenting dari aksesibilitas web. Ini secara langsung memengaruhi apakah pengguna dapat membaca konten Anda, menavigasi antarmuka, dan menyelesaikan tugas mereka. Namun kegagalan kontras tetap menjadi salah satu masalah aksesibilitas paling umum di web — sering kali karena desainer memilih warna yang terlihat bagus di layar mereka sendiri tanpa memverifikasi rasionya.

Panduan ini menjelaskan semua yang perlu Anda ketahui tentang persyaratan kontras warna WCAG, cara memenuhinya, dan cara mendesain antarmuka yang aksesibel tanpa mengorbankan kualitas visual.

Apa Itu Rasio Kontras Warna?

Kontras warna adalah ukuran perbedaan luminansi yang dipersepsikan antara dua warna — biasanya latar depan (teks) dan latar belakang. Kontras dinyatakan sebagai rasio mulai dari 1:1 (warna identik, teks tidak terlihat) hingga 21:1 (teks hitam di atas latar putih, nilai maksimum yang mungkin).

Rasio kontras dihitung menggunakan luminansi relatif, yang memperhitungkan bagaimana mata manusia mempersepsikan panjang gelombang cahaya yang berbeda. Rumusnya adalah:

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

Di mana L1 adalah luminansi relatif dari warna yang lebih terang dan L2 adalah luminansi relatif dari warna yang lebih gelap. Mata manusia lebih sensitif terhadap cahaya hijau daripada merah atau biru, sehingga perhitungan luminansi membobotkan saluran secara berbeda.

Anda tidak perlu menghitung ini secara manual. Setiap alat pemeriksa kontras, termasuk konverter warna kami, melakukannya secara instan.

Persyaratan Kontras WCAG

Pedoman Aksesibilitas Konten Web (WCAG) mendefinisikan tiga tingkat kesesuaian: A, AA, dan AAA. Persyaratan kontras warna berlaku pada tingkat AA dan AAA.

Tingkat WCAG AA (Minimum yang Direkomendasikan)

AA adalah standar minimum untuk sebagian besar situs web dan diwajibkan oleh hukum di banyak yurisdiksi (termasuk European Accessibility Act dan regulasi aksesibilitas di AS, Kanada, dan Australia).

| Kategori Teks | Rasio Minimum | Contoh Abu-abu yang Memenuhi di Atas Putih | |---------------|--------------|-------------------------------------| | Teks normal (di bawah 18px / 14px tebal) | 4,5:1 | #767676 di atas putih | | Teks besar (18px+ tebal atau 24px+ reguler) | 3:1 | #9A9A9A di atas putih | | Komponen UI (bingkai, ikon, field formulir) | 3:1 | Bingkai komponen, indikator fokus | | Grafis non-dekoratif | 3:1 | Bagan, infografis, ikon |

Tingkat WCAG AAA (Ditingkatkan)

AAA adalah standar yang lebih tinggi yang memberikan keterbacaan lebih baik, terutama bagi pengguna dengan gangguan penglihatan rendah atau masalah sensitivitas kontras.

| Kategori Teks | Rasio Minimum | Contoh Abu-abu yang Memenuhi di Atas Putih | |---------------|--------------|-------------------------------------| | Teks normal | 7:1 | #595959 di atas putih | | Teks besar | 4,5:1 | #777777 di atas putih |

AAA tidak diwajibkan untuk kepatuhan terhadap sebagian besar regulasi, tetapi direkomendasikan untuk situs yang melayani lansia atau pengguna dengan gangguan penglihatan.

Apa yang Dicakup oleh Persyaratan Ini

Persyaratan kontras WCAG berlaku untuk:

  • Teks — Semua teks isi, judul, label, keterangan, dan teks tautan
  • Teks dalam gambar — Teks yang merupakan bagian dari gambar (kecuali teks dekoratif)
  • Komponen UI — Tombol, field formulir, slider, sakelar toggle, dan bingkainya
  • Ikon — Ikon penting yang menyampaikan informasi (non-dekoratif)
  • Indikator fokus — Garis luar fokus keyboard harus memiliki kontras 3:1 terhadap latar belakang di sekitarnya

Apa yang TIDAK Dicakup oleh Persyaratan Ini

  • Logo — Teks yang merupakan bagian dari logo merek atau nama perusahaan
  • Elemen dekoratif — Gambar dekoratif murni tanpa tujuan fungsional
  • UI tidak aktif — Tombol atau kontrol formulir yang dinonaktifkan (meskipun tetap harus dapat dipersepsikan)
  • Teks sensoris — Teks yang merupakan bagian dari gambar latar di mana teks tersebut tidak penting

Kegagalan Kontras Umum dan Cara Memperbaikinya

1. Teks Abu-abu Terang

Teks abu-abu terang di atas latar putih adalah kegagalan kontras yang paling umum. Warna seperti #CCCCCC di atas putih memiliki rasio kontras hanya 1,6:1 — jauh di bawah minimum 4,5:1.

Perbaiki: Gelapkan teks abu-abu Anda. Untuk teks isi di atas putih, targetkan setidaknya #595959 (memenuhi AAA). Bahkan #767676 (minimum AA untuk teks 14px) secara nyata lebih gelap daripada kebanyakan pilihan abu-abu "halus".

2. Warna Merek Digunakan untuk Teks Isi

Warna merek sering kali terlalu terang saat diterapkan sebagai teks. Biru sedang seperti #3366CC di atas putih memiliki rasio sekitar 3,5:1 — di bawah standar 4,5:1.

Perbaiki: Cadangkan warna merek untuk judul dan aksen. Gunakan hampir-hitam (#1A1A1A hingga #333333) untuk teks isi. Periksa bahwa teks berwarna apa pun memenuhi rasio.

3. Indikator Tautan Hanya Warna

Tautan yang berbeda dari teks isi hanya berdasarkan warna gagal memenuhi Kriteria Keberhasilan WCAG 1.4.1 (Penggunaan Warna). Pengguna dengan buta warna mungkin tidak dapat membedakan perbedaannya.

Perbaiki: Selalu sediakan indikator non-warna untuk tautan. Pendekatan umum:

  • Garis bawahi tautan (solusi paling andal)
  • Tambahkan ikon (simbol panah atau tautan eksternal)
  • Gunakan ketebalan tebal untuk tautan sebaris
  • Berikan sorotan latar belakang

4. Teks di Atas Gambar Latar

Teks yang ditempatkan di atas foto atau gradien jarang memiliki kontras yang cukup di seluruh gambar.

Perbaiki:

  • Tambahkan overlay semi-transparan antara gambar dan teks
  • Gunakan text-shadow untuk efek garis luar yang halus
  • Tempatkan teks dalam kotak overlay berwarna solid
  • Pastikan bagian gambar mana pun yang dapat muncul di belakang teks memenuhi rasio minimum

5. Teks Placeholder Kontras Rendah

Placeholder formulir seperti #BDBDBD di atas putih (1,9:1) umum tetapi gagal memenuhi persyaratan kontras.

Perbaiki: Gelapkan placeholder menjadi setidaknya #757575 (4,6:1). Lebih baik lagi, gunakan label alih-alih placeholder — label selalu terlihat dan tidak pernah hilang saat pengguna mulai mengetik.

Menguji Kontras Warna

Alat Otomatis

  • Browser DevTools — Chrome dan Firefox DevTools memiliki pemeriksaan kontras bawaan. Inspeksi elemen dan cari rasio kontras di panel "Styles" atau "Accessibility".
  • Pemeriksa kontras online — Masukkan dua warna dan dapatkan status lulus/gagal instan untuk AA dan AAA.
  • Plugin alat desain — Stark, A11y, dan Contrast tersedia untuk Figma, Sketch, dan Adobe XD. Ini memeriksa kontras langsung di file desain Anda.
  • Lighthouse — Audit Lighthouse Google secara otomatis melaporkan kegagalan kontras.

Pengujian Manual

Alat otomatis hanya dapat memeriksa kontras teks. Untuk tinjauan aksesibilitas yang lengkap:

  1. Matikan monitor Anda — Dapatkah Anda membedakan semua elemen antarmuka?
  2. Gunakan filter skala abu-abu — Apakah informasi masih tersampaikan dengan benar tanpa warna?
  3. Uji dengan simulator buta warna — Alat seperti Colorblindly (ekstensi Chrome) menunjukkan bagaimana situs Anda tampak bagi pengguna dengan berbagai jenis defisiensi penglihatan warna.
  4. Uji di bawah sinar matahari langsung — Cahaya sekitar yang tinggi mengurangi kontras yang dipersepsikan.

Mendesain untuk Buta Warna

Sekitar 1 dari 12 pria (8%) dan 1 dari 200 wanita (0,5%) memiliki beberapa bentuk defisiensi penglihatan warna. Jenis yang paling umum adalah:

  • Deuteranopia (buta hijau, 6% pria) — Kesulitan membedakan merah dari hijau
  • Protanopia (buta merah, 2% pria) — Merah tampak lebih gelap, kebingungan dengan hijau
  • Tritanopia (buta biru, jarang) — Kesulitan membedakan biru dari kuning

Strategi Desain

  1. Jangan pernah hanya mengandalkan warna — Informasi apa pun yang disampaikan melalui warna (status kesalahan, indikator status, kategori bagan) juga harus disampaikan melalui teks, ikon, pola, atau posisi.

  2. Hindari kombinasi bermasalah — Merah/hijau, biru/ungu, hijau/coklat, dan hijau/biru adalah pasangan yang paling sering tertukar.

  3. Gunakan pola dan tekstur — Dalam bagan dan grafik, gunakan garis putus-putus, isian arsir, dan bentuk yang berbeda selain warna.

  4. Tambahkan label secara langsung — Dalam visualisasi data, beri label titik data secara langsung daripada mengandalkan legenda berkode warna.

  5. Uji dengan simulator — Setiap desain harus diuji melalui simulator deuteranopia dan protanopia sebelum dirilis.

Membangun Sistem Warna yang Aksesibel

Langkah 1: Pilih Warna Dasar yang Aksesibel

Mulailah dengan warna yang secara alami memberikan kontras yang baik. Biru tua, hijau tua, dan merah kaya semuanya dapat menjadi warna dasar yang aksesibel saat dipasangkan dengan tepat.

Langkah 2: Hasilkan Skala yang Memenuhi Standar

Buat skala kecerahan di mana setiap langkah mempertahankan kontras yang cukup dengan tetangga yang lebih terang dan lebih gelap. OKLCH ideal untuk ini karena saluran kecerahannya seragam secara perseptual:

--text-primary: oklch(10% 0.01 0);    /* Hampir-hitam, ~19:1 di atas putih */
--text-secondary: oklch(35% 0.02 0);  /* Abu-abu gelap, ~9:1 di atas putih */
--text-muted: oklch(45% 0.02 0);      /* Abu-abu sedang, ~5,5:1 di atas putih */
--text-disabled: oklch(60% 0.02 0);   /* Abu-abu terang, ~3:1 di atas putih */

Langkah 3: Verifikasi Setiap Kombinasi

Setiap pasangan latar depan-latar belakang dalam sistem desain Anda harus diverifikasi:

  • Teks primer di atas permukaan — Minimum 4,5:1 (7:1 direkomendasikan)
  • Teks sekunder di atas permukaan — Minimum 4,5:1
  • Teks redup di atas permukaan — Minimum 3:1 (hanya untuk teks non-esensial)
  • Elemen interaktif — Minimum 3:1 untuk state
  • Indikator fokus — Minimum 3:1

Daftar Periksa Praktis untuk Pengembang

  • [ ] Semua teks isi memenuhi atau melampaui rasio kontras 4,5:1
  • [ ] Semua teks besar memenuhi atau melampaui rasio kontras 3:1
  • [ ] Tautan memiliki indikator non-warna (garis bawah, ikon, atau perubahan ketebalan)
  • [ ] Input formulir memiliki bingkai atau latar belakang yang terlihat (bukan hanya teks placeholder)
  • [ ] Indikator fokus memiliki kontras 3:1 terhadap latar belakang di sekitarnya
  • [ ] State kesalahan menggabungkan warna dengan teks atau ikon
  • [ ] Bagan dan grafik menggunakan pola atau label langsung selain warna
  • [ ] Teks placeholder memenuhi minimum 4,5:1
  • [ ] Elemen yang dinonaktifkan dapat dibedakan secara visual tetapi tetap dapat dipersepsikan
  • [ ] Desain telah diuji dengan simulator buta warna

Kesimpulan

Kontras warna yang aksesibel bukanlah opsional — ini adalah persyaratan fundamental dari desain web inklusif. Memenuhi standar WCAG AA membuat konten Anda dapat diakses oleh pengguna dengan gangguan penglihatan, meningkatkan keterbacaan untuk semua orang, dan sering kali menghasilkan desain yang lebih bersih dan lebih terencana. Mulailah dengan pemeriksaan kontras dalam alur kerja Anda, gunakan warna sebagai pelengkap — bukan pengganti — indikator visual lainnya, dan selalu uji desain Anda melalui lensa aksesibilitas.

Gunakan konverter warna online gratis kami dengan pemeriksaan kontras bawaan untuk memverifikasi kombinasi warna Anda terhadap standar WCAG AA dan AAA.