Pembuat Palet Warna yang Dapat Diakses

Apa itu generator palet warna yang dapat diakses?

Generator palet warna yang dapat diakses adalah alat yang membantu Anda menyusun sekumpulan warna untuk situs web, aplikasi, atau desain cetak di mana setiap pasangan warna yang dimaksudkan untuk ditampilkan bersama (teks pada latar belakang, tombol pada kanvas, label pada bidang) memenuhi persyaratan kontras WCAG. Intinya adalah untuk menangkap kombinasi kontras rendah pada waktu desain daripada pada waktu audit. Anda menambahkan warna ke palet, alat menghitung rasio kontras antara setiap pasangan, dan memberi label setiap pasangan AAA lulus, AA lulus, atau gagal. Anda mengulangi sampai setiap pasangan yang sebenarnya Anda maksudkan untuk digunakan lulus.

Rasio kontras adalah angka antara 1:1 (warna identik, tidak terlihat) dan 21:1 (hitam pada putih). WCAG 2.2 Success Criterion 1.4.3 memerlukan 4.5:1 untuk teks tubuh pada ukuran standar (Level AA), 3:1 untuk teks besar (24px+ reguler atau 18.66px+ tebal), dan 4.5:1 untuk elemen grafis dan kontrol UI (SC 1.4.11). WCAG AAA menaikkan teks tubuh menjadi 7:1 dan teks besar menjadi 4.5:1. Sebagian besar situs web yang menghadap publik harus memenuhi setidaknya AA per ADA, EAA, AODA, dan undang-undang serupa; situs pemerintah di banyak yurisdiksi harus memenuhi AAA.

Alat ini berjalan di browser Anda. Anda memilih warna dengan pemilih warna, alat menghitung luminansi relatif dan rasio kontras menggunakan formula yang ditentukan WCAG, dan kisi menampilkan status setiap pasangan. Anda dapat mengekspor palet akhir sebagai properti khusus CSS (var(--brand-primary)), daftar HEX, cuplikan konfigurasi Tailwind, atau JSON untuk token desain. Tidak ada yang diunggah; seluruh palet tetap di perangkat Anda.

Apa yang ada di dalam alat

Bagian atas alat adalah pemilih warna ditambah tombol tambahkan ke palet. Pilih warna, beri nama (Brand Primary, Surface, Body Text, dll.), dan tambahkan. Palet tumbuh sebagai daftar swatch di sebelah kiri. Anda dapat mengedit swatch apa pun, menghapusnya, atau menariknya untuk mengatur ulang. Palet yang dapat diakses yang telah ditentukan tersedia sebagai titik awal (pasangan kontras tinggi, palet bergaya IBM Carbon, palet tonal Material Design 3); pilih satu, lalu sesuaikan.

Kisi kontras mengambil setiap pasangan swatch dan menampilkan rasio kontras ditambah lencana lulus/gagal untuk setiap tingkat WCAG: AA-normal (4.5:1), AA-large (3:1), AAA-normal (7:1), AAA-large (4.5:1). Pasangan yang ditampilkan sebagai 4.7:1 lulus AA-normal tetapi gagal AAA-normal; pasangan yang ditampilkan sebagai 2.1:1 gagal semuanya. Arahkan ke sel untuk melihat pratinjau pasangan sebagai teks sebenarnya. Urutkan kisi berdasarkan rasio untuk menemukan pasangan terburuk terlebih dahulu.

Panel ekspor memformat palet sesuai cara yang diharapkan toolchain Anda: properti khusus CSS untuk CSS modern, variabel Sass untuk pipeline lama, konfigurasi tema Tailwind untuk Tailwind CSS, token desain JSON (Style Dictionary, spek W3C Design Tokens Community Group) untuk sistem desain lintas platform, atau hanya daftar HEX untuk ditempel ke Figma. Konvensi penamaan dipertahankan; Anda dapat menyalin dan menempel langsung ke basis kode Anda.

Sejarah dan latar belakang

Kolorimetri CIE menetapkan warna ilmiah (1931)

Komisi Internasional untuk Pencahayaan (CIE) menerbitkan ruang warna CIE 1931 pada tahun 1931, deskripsi matematis formal pertama tentang bagaimana manusia mempersepsikan warna dari spektrum elektromagnetik. Setiap sistem warna modern (RGB, HSL, OKLCH, Lab, XYZ) dibangun pada CIE 1931 baik secara langsung maupun melalui transformasi turunan. Formula luminansi relatif yang digunakan WCAG untuk menghitung kontras adalah perhitungan turunan CIE: ia membobot saluran merah, hijau, dan biru berdasarkan seberapa kuat mata manusia merespons masing-masing (hijau paling, biru paling sedikit).

WCAG 1.0 memperkenalkan pedoman kontras (1999)

Web Content Accessibility Guidelines 1.0 (W3C, Mei 1999) memperkenalkan kontras sebagai kriteria aksesibilitas formal (Checkpoint 2.2: memastikan kombinasi warna latar depan dan latar belakang memberikan kontras yang cukup). Versi pertama bersifat kualitatif; ambang batas tidak jelas. WCAG 2.0 (Desember 2008) adalah yang pertama menentukan rasio kontras numerik menggunakan formula luminansi relatif WCAG. Ambang batas 4.5:1 dan 7:1 di 2.0 tetap tidak berubah melalui 2.1 (2018) dan 2.2 (2023) karena mereka menyeimbangkan keterbacaan di sebagian besar disabilitas (penglihatan rendah, kehilangan sensitivitas kontras terkait usia, buta warna) dengan kendala desain praktis.

Sistem desain berkode warna matang (2014 dan seterusnya)

Material Design Google (2014), Sistem Desain Carbon IBM (2015), dan kebangkitan token desain yang lebih luas (Salesforce 2014, Atlassian 2016) semuanya menekankan warna yang dapat diakses sebagai perhatian tingkat sistem. Material Design 3 (2021) memperkenalkan palet tonal (rangkaian kecerahan 13 langkah per rona) yang secara eksplisit dirancang sehingga nada apa pun 600+ pada skala kecerahan lulus kontras 4.5:1 pada putih. Pergeseran ini menjadikan palet yang dapat diakses secara default sebagai praktik standar dalam sistem desain modern, menggantikan pendekatan merek-pertama-aksesibilitas-kedua yang lebih lama.

APCA diusulkan sebagai alternatif yang lebih akurat (2019 dan seterusnya)

Accessible Perceptual Contrast Algorithm (APCA) diusulkan oleh Andrew Somers mulai 2019 sebagai pengganti formula kontras WCAG yang lebih akurat secara perseptual. Kontras WCAG terlalu menilai keterbacaan warna terang dan kurang menilai teks gelap pada latar belakang gelap; APCA mengoreksi ini. WCAG 3.0 (penerus draf 2.x, dalam pengembangan selama bertahun-tahun sekarang) diharapkan untuk mengadopsi APCA atau algoritma yang ditingkatkan serupa. Sampai WCAG 3 dirilis dan diadopsi dalam hukum, rasio kontras WCAG 2.x tetap menjadi standar hukum dan industri. Alat ini menggunakan formula WCAG 2.x.

Token desain menjadi standar lintas platform (2020 dan seterusnya)

Grup Komunitas W3C Design Tokens dibentuk pada tahun 2020 untuk menstandardisasi token desain (nama warna, jarak, nilai tipografi yang diterjemahkan di seluruh CSS, iOS, Android, Figma, dan platform lain). Alat seperti Style Dictionary, Tokens Studio, dan spek W3C yang muncul semuanya bergantung pada format token yang dapat dibaca mesin. Palet warna yang dapat diakses semakin dikirim sebagai token desain sehingga palet yang diperiksa sama digunakan di mana-mana, menghilangkan mode kegagalan di mana situs web lulus kontras tetapi aplikasi seluler tidak.

OKLCH dan ruang warna seragam secara perseptual (2020 dan seterusnya)

CSS Color Module Level 4 (Rekomendasi Kandidat 2024) menambahkan OKLCH, OKLab, Lab, LCH, dan ruang warna seragam secara perseptual lainnya ke CSS asli. OKLCH (diperkenalkan oleh Bjorn Ottosson pada tahun 2020) sangat berguna untuk menghasilkan palet yang dapat diakses karena langkah kecerahan yang sama terlihat sama di mata, tidak seperti HSL di mana langkah dalam kecerahan menghasilkan lompatan visual yang tidak rata. Generator palet modern (Leonardo dari Adobe, Polychrom, alat ini ketika diatur ke mode input OKLCH) memanfaatkan ruang ini untuk menghasilkan palet yang lebih konsisten secara visual yang memenuhi target kontras pada tingkat kecerahan yang sama.

Alur kerja praktis

Mendesain palet merek baru

Mulailah dengan warna merek yang harus Anda pertahankan (warna logo, primer yang diberkati tim pemasaran). Tambahkan ke palet, kemudian bangun rona (versi yang lebih terang) dan bayangan (versi yang lebih gelap) bersama dengan warna netral (putih, permukaan, varian permukaan, teks). Periksa setiap pasangan teks-pada-latar-belakang terhadap AA-normal. Jika warna merek utama Anda gagal pada putih, Anda memiliki dua opsi: gunakan hanya untuk elemen besar (logo, aksen dekoratif) dan pasangkan teks tubuh dengan varian yang lebih gelap, atau kompromikan warna merek sedikit. Alat ini memunculkan pilihan tersebut pada waktu desain.

Mengaudit keputusan warna situs yang ada

Tarik nilai warna dari token desain Anda yang ada (properti khusus CSS, konfigurasi Tailwind, variabel Sass), masukkan ke alat ini, dan tinjau kisi kontras. Kegagalan umum: teks abu-abu redam pada putih (sering #999 atau #aaa, yang memberikan 2.8:1 atau 2.5:1), tombol warna merek dengan teks putih di mana tombol berwarna nada tengah, warna tautan pada latar belakang sibuk. Dokumentasikan kegagalan dengan rasio mereka dan kriteria WCAG mana yang mereka langgar; dokumentasi itu adalah awal dari rencana remediasi.

Memilih warna aksen untuk grafik dan visualisasi data

Untuk visualisasi data, Anda memerlukan warna aksen yang lulus kontras terhadap latar belakang grafik dan yang juga dapat dibedakan satu sama lain untuk pengguna dengan defisiensi penglihatan warna. Pasangkan alat ini dengan ColorBrewer (Cynthia Brewer, Penn State, 2002) yang menerbitkan palet yang dirancang agar tetap dapat dibedakan di bawah simulasi buta warna. Jalankan palet kandidat melalui kedua alat: kontras terhadap latar belakang (alat ini), dapat dibedakan antara warna palet (ColorBrewer atau Viz Palette).

Membangun pelengkap mode gelap untuk palet terang

Mode gelap bukan hanya mode terang yang dibalik; persyaratan kontras masih berlaku tetapi mata mempersepsikan teks terang pada gelap secara berbeda dari teks gelap pada terang (perdebatan APCA sebagian besar tentang ini). Bangun palet gelap sebagai satu set paralel token yang diberi nama (surface-dark, text-dark, accent-dark) dan periksa setiap pasangan mode gelap terhadap AA. Kegagalan umum mode gelap: putih murni (#fff) pada hitam murni (#000) menyebabkan halasi (perdarahan cahaya), jadi desainer sering menggunakan #e5e5e5 pada #121212; ini masih lulus AA tetapi lebih nyaman dibaca.

Menghasilkan varian palet untuk permukaan yang berbeda

UI modern memiliki beberapa tingkat permukaan (latar belakang, kartu, kartu-tinggi, modal, popover). Setiap permukaan harus berpasangan dengan benar dengan setiap warna teks dan aksen yang digunakan di atasnya. Tambahkan setiap permukaan sebagai swatch palet dan periksa setiap warna teks terhadap setiap permukaan. Kisi kontras dengan cepat menunjukkan apakah pasangan teks-pada-modal Anda gagal saat teks-pada-kartu lulus (modal biasanya memiliki rona latar belakang yang sedikit berbeda untuk menunjukkan elevasi, yang dapat menurunkan kontras di bawah AA tanpa Anda perhatikan).

Dokumentasi kepatuhan untuk pengajuan hukum atau audit

Untuk dokumentasi kepatuhan ADA atau EAA, Anda biasanya perlu menunjukkan bahwa setiap kombinasi warna dalam sistem desain Anda lulus tingkat WCAG yang relevan. Ekspor palet ditambah kisi kontras sebagai bagian dari pernyataan aksesibilitas atau VPAT (Voluntary Product Accessibility Template) untuk produk Anda. JSON yang diekspor cukup terstruktur untuk diumpankan ke laporan kepatuhan otomatis; kisi visual baik untuk tinjauan manusia.

Jebakan umum

Memperlakukan warna merek sebagai tidak dapat disentuh

Pola paling umum: pemasaran bersikeras pada warna utama perusahaan, tetapi gagal kontras AA pada putih. Pilihan: gunakan warna merek hanya untuk elemen besar atau dekoratif (lulus bilah teks-besar 3:1 yang lebih lunak), gelapkan warna sedikit untuk penggunaan teks (sebagian besar merek memiliki fleksibilitas untuk varian yang lebih gelap), atau ubah warna teks tubuh dari hitam menjadi abu-abu gelap yang kurang keras sehingga warna merek terbaca sebagai aksen. Alat seperti Leonardo (dari Adobe) menghasilkan varian yang dapat diakses dari warna merek secara otomatis; pasangkan dengan alat ini untuk verifikasi.

Menggunakan kontras sebagai satu-satunya pemeriksaan aksesibilitas

Lulus kontras tidak menjamin keterbacaan. Rasio 4.5:1 adalah lantai; beberapa pengguna (penglihatan rendah, kehilangan sensitivitas kontras terkait usia, disleksia) mendapat manfaat dari rasio yang lebih tinggi. WCAG SC 1.4.6 (Contrast Enhanced, AAA) merekomendasikan 7:1 untuk teks tubuh tepatnya karena 4.5:1 adalah minimum, bukan target. Gabungkan kontras tinggi dengan ukuran font yang memadai (16px+ untuk tubuh), tinggi baris yang memadai (1.5x ukuran font), dan pilihan font yang menjaga bentuk huruf (hindari bobot ultra-tipis untuk teks tubuh).

Melupakan kontras non-teks (SC 1.4.11)

WCAG 1.4.11 (ditambahkan di WCAG 2.1, 2018) memerlukan kontras 3:1 untuk komponen UI dan elemen grafis: batas bidang formulir, garis besar tombol, ikon, indikator fokus. Ini mudah terlewat karena desainer berpikir kontras hanya berlaku untuk teks. Formulir bersih dengan batas bidang abu-abu halus pada putih dapat gagal 1.4.11 bahkan jika semua teks lulus 1.4.3. Audit setiap elemen visual yang menyampaikan makna atau status, bukan hanya teks pada latar belakang.

Salah mengira aturan teks besar

Ambang batas teks besar WCAG (3:1 daripada 4.5:1) berlaku untuk teks yang 18pt atau lebih besar (sekitar 24px), atau 14pt tebal (sekitar 18.66px tebal). Apa pun yang lebih kecil adalah teks normal dan memerlukan 4.5:1. Desainer terkadang menerapkan aturan teks-besar 3:1 ke semua tingkat heading, tetapi h5 pada 16px adalah teks normal menurut definisi WCAG. Periksa ukuran yang dirender, bukan tingkat heading. Modifier tebal penting: 18px tebal lulus sebagai teks besar; 18px reguler tidak.

Mengandalkan warna saja untuk menyampaikan informasi

WCAG 1.4.1 (Use of Color, Level A) terpisah dari kontras. Bahkan dengan rasio kontras yang sempurna, Anda tidak dapat menggunakan warna sebagai satu-satunya indikator status (merah sama dengan tidak valid, hijau sama dengan valid, biru sama dengan tautan). Pasangkan warna dengan isyarat kedua: ikon (segitiga peringatan untuk kesalahan), pola (garis bawah untuk tautan), atau label teks (Required di samping bidang wajib). Pengguna buta warna (sekitar 8% pria, 0.5% wanita) dan pengguna pada layar monokrom skala abu-abu mengandalkan isyarat sekunder ini.

Melupakan keadaan hover, fokus, dan aktif

Tombol lulus kontras dalam keadaan default tetapi gaya :hover mencerahkannya di bawah ambang batas; garis besar :focus adalah abu-abu halus yang gagal 3:1 terhadap latar belakang tombol; keadaan :active membalik warna dan kombinasi baru gagal. Uji setiap keadaan interaktif di kisi kontras Anda, bukan hanya default. Indikator fokus secara khusus sangat penting (SC 2.4.7 Focus Visible, AA): jika fokus tidak terlihat jelas, pengguna hanya keyboard kehilangan tempat mereka di halaman.

Privasi dan penanganan data

Warna yang Anda tambahkan, nama palet, dan token yang diekspor semua tetap di browser Anda. Perhitungan kontras berjalan dalam JavaScript di mesin Anda; tidak ada yang diunggah. Ini kurang penting untuk palet warna daripada untuk dokumen tetapi masih penting ketika palet adalah bagian dari penyegaran merek yang belum diumumkan atau proyek klien rahasia: Anda tidak ingin itu bocor ke validator SaaS pihak ketiga sebelum peluncuran.

Setelah halaman dimuat, alat berfungsi offline. Anda dapat memutuskan koneksi dari internet, membangun palet, menjalankan pemeriksaan, dan mengekspor. Token yang diekspor diunduh langsung melalui dialog penyimpanan normal browser. Banyak alat warna cloud (Coolors, Adobe Color, bahkan beberapa pemeriksa aksesibilitas) menyimpan palet di sisi server dan mungkin menggunakannya untuk analitik atau pelatihan; untuk pekerjaan rahasia, pilih alat sisi klien.

Kapan tidak menggunakan alat ini

Untuk simulasi buta warna lengkap (gunakan alat khusus)

Kontras tidak sama dengan kompatibilitas buta warna. Palet dapat lulus semua pemeriksaan kontras dan masih membingungkan pengguna buta warna (merah dan hijau pada luminansi yang sama terlihat identik bagi deuteranope). Untuk simulasi buta warna, gunakan Absolutool Color Blindness Simulator atau tampilan aksesibilitas Adobe Color, keduanya menerapkan transformasi warna deuteranopia, protanopia, dan tritanopia yang sebenarnya. Jalankan palet kandidat melalui alat ini dan simulator.

Untuk menghasilkan skema warna dari awal (gunakan Leonardo atau Coolors)

Alat ini memeriksa dan mengaudit palet; itu tidak menghasilkannya dari satu warna benih. Untuk pembuatan palet dari awal (skema analog, komplementer, triadik, komplementer terpisah), gunakan Adobe Color, Coolors, atau Leonardo (yang menghasilkan varian merek yang dapat diakses). Hasilkan dengan alat-alat tersebut, kemudian validasi dengan yang ini. Leonardo secara khusus menghasilkan warna yang ditargetkan pada rasio kontras tertentu, yang merupakan format input alami untuk langkah verifikasi alat ini.

Untuk kontras berbasis APCA (ketika WCAG 3 dikirim)

Alat ini menggunakan formula kontras WCAG 2.x, yang merupakan standar hukum dan industri saat ini. Jika Anda secara khusus perlu mendesain untuk APCA (algoritma WCAG 3 yang diusulkan), gunakan APCA Contrast Calculator dari Myndex Research. APCA menghasilkan peringkat yang berbeda (dan mungkin lebih akurat secara perseptual), terutama untuk teks gelap-pada-gelap dan terang-pada-terang. Sampai WCAG 3 diratifikasi dan diadopsi dalam hukum (mungkin beberapa tahun lagi), WCAG 2.x adalah yang akan diperiksa auditor kepatuhan.

Untuk audit WCAG lengkap (gunakan alat komprehensif)

Kontras adalah satu kriteria di antara lusinan. Untuk audit aksesibilitas lengkap, gunakan axe DevTools, Lighthouse, WAVE, atau solusi berbayar seperti Tenon atau PowerMapper. Ini memeriksa kontras, teks alt, ARIA, label formulir, urutan fokus, struktur heading, dan banyak lagi dalam satu lintasan. Gunakan alat ini selama desain palet, dan alat komprehensif selama pengujian integrasi.

Pertanyaan lainnya

Apa perbedaan antara kontras AA dan AAA?

AA adalah standar, secara hukum diperlukan oleh sebagian besar undang-undang aksesibilitas (ADA, EAA, AODA, dll.) dan apa yang harus dipenuhi setiap situs yang menghadap publik. AAA lebih ketat: 7:1 untuk teks tubuh, 4.5:1 untuk teks besar. AAA umumnya diperlukan hanya untuk konten taruhan tinggi (situs web pemerintah di beberapa yurisdiksi, informasi medis dan hukum, konten untuk pengguna dengan penglihatan rendah sebagai audiens utama). Mendesain untuk AAA bersifat membatasi; sedikit merek dapat memenuhinya tanpa batasan warna yang signifikan. Targetkan AA secara default dan AAA di mana audiens konten membenarkannya.

Mengapa WCAG menggunakan secara spesifik 4.5:1?

Ambang batas 4.5:1 dipilih sehingga teks tetap dapat dibaca untuk pengguna dengan penglihatan 20/40 (ambang batas untuk kebutaan hukum di banyak yurisdiksi) tanpa pembesaran bantuan. Ini juga kira-kira rasio kontras di mana pengguna defisiensi penglihatan warna dapat dengan andal membedakan latar depan dari latar belakang. Angka ini dikalibrasi secara empiris dari penelitian penglihatan; itu tidak sewenang-wenang. 7:1 AAA sesuai kira-kira dengan penglihatan 20/80, mengakomodasi disabilitas yang jauh lebih banyak.

Bagaimana formula kontras bekerja?

Konversi setiap warna dari sRGB ke luminansi relatif menggunakan formula: koreksi gamma setiap saluran (R, G, B) dengan menerapkan fungsi sepotong-sepotong (linear untuk nilai rendah, eksponensial untuk tinggi), kemudian bobot dengan 0.2126 R + 0.7152 G + 0.0722 B (sensitivitas mata manusia relatif terhadap setiap saluran). Rasio kontras antara dua warna adalah (L1 + 0.05) / (L2 + 0.05) di mana L1 adalah luminansi yang lebih terang dan L2 yang lebih gelap. Offset 0.05 menyumbang refleksi layar ambien. Hasilnya adalah angka antara 1 (identik) dan 21 (maks).

Haruskah saya khawatir tentang kontras untuk teks placeholder di bidang formulir?

Ya. Teks placeholder dihitung sebagai teks di bawah WCAG dan harus memenuhi kontras 4.5:1. Default browser untuk placeholder adalah abu-abu terang (#a9a9a9 di sebagian besar browser), yang gagal pada putih. Timpa dengan CSS: ::placeholder { color: #595959; } atau yang serupa yang lulus AA. Lebih baik lagi, hindari placeholder sepenuhnya untuk bidang penting; gunakan label yang terlihat di atas bidang dan cadangkan placeholder untuk pemformatan contoh. Pola label mengambang menggabungkan label yang terlihat dan kejelasan contoh.

Apakah kontras berlaku untuk tombol dan bidang formulir yang dinonaktifkan?

Tidak. WCAG SC 1.4.3 secara eksplisit membebaskan kontrol yang dinonaktifkan karena tampilan yang teredam itu sendiri merupakan sinyal visual bahwa kontrol tidak tersedia. Tombol yang dinonaktifkan biasanya pudar menjadi sekitar 38% opasitas dan akan gagal kontras dalam keadaan dinonaktifkan mereka secara desain. Namun, keadaan dinonaktifkan masih harus dapat dibedakan dengan jelas dari keadaan yang diaktifkan, jadi jangan hanya menghapus semua perlakuan visual; gunakan perbedaan visual yang jelas ditambah atribut dinonaktifkan yang dapat diakses oleh pembaca layar.

Bagaimana dengan kontras untuk konten grafis seperti grafik dan ikon?

WCAG 1.4.11 Non-text Contrast (ditambahkan di 2.1) memerlukan kontras 3:1 untuk komponen UI (tombol, batas formulir, indikator fokus) dan elemen grafis yang bermakna (ikon yang menyampaikan status, elemen grafik yang membedakan rangkaian data). Ambang batas 3:1 lebih rendah dari 4.5:1 untuk teks karena grafik umumnya memiliki area yang terlihat lebih besar. Grafik dekoratif yang tidak menyampaikan makna dibebaskan. Terapkan 3:1 ke setiap ikon yang menyampaikan status (mata terbuka untuk terlihat, X untuk menghapus, tanda centang untuk dipilih) dan setiap segmen grafik yang perlu dibedakan.