Cara membuat palet warna yang benar-benar bisa dipakai untuk teks

Palet hasil generator hampir selalu tampak bagus sebagai deretan kotak warna. Masalahnya baru muncul saat Anda memakai salah satu warna untuk judul, meletakkannya di atas warna lain, lalu mendapati pasangan yang Anda sukai nyaris tidak punya kontras. Panduan ini membahas cara memakai palette generator agar palet yang Anda simpan berisi warna yang bisa dipakai untuk teks, di atas latar belakang yang benar-benar akan Anda rilis.

Setiap warna lolos di atas putih atau di atas hitam

Mulailah dari fakta yang mengubah cara pandang terhadap pekerjaan ini. Rasio kontras sebuah warna terhadap putih, dikalikan dengan rasionya terhadap hitam, selalu 21. Rumus WCAG memberi 1.05 ÷ (L + 0.05) terhadap putih dan (L + 0.05) ÷ 0.05 terhadap hitam, dengan L sebagai luminans relatif warna tersebut, dan suku L saling menghilangkan: 1.05 ÷ 0.05 = 21. Jadi, kasus terburuk untuk rasio yang lebih baik dari sebuah warna adalah √21, sekitar 4.58, dan setiap warna yang ada pasti lolos 4.5:1 terhadap salah satu dari keduanya.

Warna teks, dengan demikian, bukanlah sifat sebuah warna yang berdiri sendiri. Warna teks adalah warna yang lolos 4.5:1 terhadap latar belakang tertentu tempat ia akan diletakkan. Pertanyaan apakah warna ini bisa dipakai untuk teks tidak punya jawaban sampai Anda menyebutkan di atas apa.

Karena itulah audit di alat ini tidak bertanya soal putih dan hitam. Dulu ia bertanya: hitungannya atas warna yang bisa “carry body text on white or black” menganggap setiap warna layak pakai di setiap palet yang pernah dibuat, dan tombol perbaikannya tidak pernah bisa muncul. Kami baru menyadarinya saat menulis panduan ini. Sekarang audit menanyakan hal yang sebenarnya menjadi tujuan palet: bisakah warna ini dipakai untuk teks di atas warna lain dalam set yang sama?

Membuat palet, langkah demi langkah

1. Masukkan warna yang wajib dipertahankan. Kode hex di setiap kolom adalah kolom isian yang bisa diedit: klik lalu ketik atau tempel nilainya. Setelah itu, tekan ikon gembok di kanan atas kolom tersebut untuk menguncinya.
2. Tekan spasi, atau tombol Generate. Setiap kolom yang tidak dikunci akan diacak ulang, sedangkan kolom yang dikunci tetap. Jika set yang Anda inginkan hilang, Undo (atau tombol Z) kembali satu langkah, dan hanya satu.
3. Atur jumlah kolom. Add dan Remove membuat palet berisi dua sampai delapan warna.
4. Baca bagian bawah setiap kolom. Di sana tertulis pasangan terkuat kolom itu di dalam palet, beserta rasio di antara keduanya. “Carries text in this palette” berarti ada pasangan yang mencapai 4.5:1; jika tidak, tautan fix → menawarkan warna terdekat dengan hue yang sama yang akan mencapainya, diukur terhadap warna tergelap atau terterang di palet itu sendiri. Tombol Audit menampilkan dan menyembunyikan baris-baris ini; baris tersebut sudah aktif saat halaman dibuka.
5. Kunci yang ingin Anda simpan dan acak ulang sisanya. Lock all (tombol L) mengunci semua kolom sekaligus; menekannya lagi membuka kunci semuanya.
6. Simpan. Share menyalin tautan yang membuka kembali palet ini persis seperti sekarang, Save here menyimpannya di aktivitas terbaru Anda di perangkat ini, dan Export menyalinnya sebagai CSS, OKLCH, Tailwind v4, SCSS, JSON, token Figma, atau kotak warna SVG.

Cara pengacakan ulang menempatkan warna yang bebas

Mengunci tidak sekadar membiarkan satu kolom apa adanya. Warna terkunci paling kiri menjadi jangkar, dan hue serta kromanya menentukan posisi semua warna lain. Kolom-kolom bebas disusun bertahap menyusuri hue, mulai dari 60° di bawah hue jangkar menuju 60° di atasnya, masing-masing digeser acak hingga 12° ke salah satu arah. Kromanya diatur antara 45% dan 125% dari kroma jangkar, dengan jangkar dianggap memiliki kroma minimal 0.06.

Kecerahan disusun dari kiri ke kanan di seluruh kolom bebas, dimulai dari kecerahan OKLCH 0.22 lalu naik dengan langkah yang sama besar yang membagi rata 0.62 di antara kolom-kolom itu. Dengan satu kolom terkunci dan empat bebas, kolom bebas diarahkan ke 0.22, 0.375, 0.53, dan 0.685, masing-masing bergeser hingga 0.04.

Dua konsekuensi praktis muncul dari hitungan itu.

• Kolom bebas paling kiri selalu yang tergelap. Kolom itu diarahkan ke 0.22, sehingga paling mungkin menjadi warna teks di halaman terang.
• Pengacakan ulang tidak pernah menghasilkan warna permukaan yang pucat. Bahkan dengan delapan kolom dan satu terkunci, kolom bebas yang paling terang diarahkan ke 0.22 + 0.62 × 6/7, sekitar 0.75. Jika Anda ingin warna halaman atau kartu yang mendekati putih ada di dalam set, ketik warna itu di sebuah kolom lalu kunci. Palet bawaan saat alat dibuka melakukan hal yang persis sama: warna kelimanya, #f4f1ea, diketik manual, bukan dihasilkan generator.

Palet pembuka, diuji terhadap dirinya sendiri

Alat ini dibuka dengan #0f172a, #1e5aa8, #3ba0c9, #e8b04b, dan #f4f1ea. Kolom di atas putih hanya untuk perbandingan; alat ini tidak lagi menampilkannya. Kolom pasangan adalah yang tertulis di bagian bawah setiap kolom, dibulatkan ke bawah hingga dua angka desimal seperti cara alat ini membulatkan.

Warna	Di atas putih (untuk perbandingan)	Pasangan terkuat di dalam palet
#0f172a	17.85:1	#f4f1ea, 15.82:1
#1e5aa8	6.81:1	#f4f1ea, 6.03:1
#3ba0c9	2.97:1	#0f172a, 5.99:1
#e8b04b	1.95:1	#0f172a, 9.13:1
#f4f1ea	1.12:1	#0f172a, 15.82:1

Strip menunjukkan 5 dari 5 di sini, dan kali ini angkanya memang benar: setiap warna punya pasangan untuk dipakai sebagai teks, karena set pembuka dibangun dengan ujung gelap dan ujung terang. Jika hanya diuji di atas putih, cuma dua dari lima warna yang lolos.

Palet nada tengah yang populer menunjukkan seperti apa kegagalan itu. #264653, #2a9d8f, #e9c46a, #f4a261, dan #e76f51, set teal, pasir, dan koral, mendapat skor 3 dari 5. Pasangan terbaik untuk teal tengah adalah teal gelap dengan 3.03:1, dan perbaikannya adalah #53bfb0, yang mencapai 4.53:1 terhadap #264653 dengan hue tetap di 183°. Koral paling tinggi hanya mencapai 3.25:1. Tidak ada warna yang salah; set itu hanya tidak punya warna yang cukup terang untuk dipasangkan dengan keduanya.

Warna amber adalah contoh yang paling mendidik. Dengan 1.95:1, amber tidak berguna sebagai teks di atas putih, tetapi amber di atas navy mencapai 9.13:1. Apakah sebuah warna layak menjadi warna teks sepenuhnya bergantung pada apa yang ada di belakangnya.

Pemeriksaan yang memang dilakukan strip

Kalimat kedua di strip adalah uji tingkat palet yang tidak pernah dijalankan oleh pemeriksa kontras, karena pemeriksa kontras membandingkan satu warna depan dengan satu warna lain. Uji ini menyimulasikan setiap pasangan warna di bawah delapan jenis gangguan penglihatan warna, memakai model Machado, Oliveira, dan Fernandes (2009), lalu menyebut pasangan mana pun yang jarak CIEDE2000-nya di bawah 11 pada salah satu jenis tersebut. Dua warna masing-masing bisa lolos 4.5:1 terhadap halaman tetapi tetap sulit dibedakan oleh penderita deuteranomali, yang menurut catatan alat ini dialami sekitar 5% pria.

Jika strip menyebut sebuah pasangan, colour blindness simulator menampilkannya di bawah setiap jenis penglihatan, dan cara membuat palet yang aman bagi buta warna membahas cara memperbaikinya.

Cara lain untuk melakukannya

Tidak ada metode bawaan di macOS, Windows, atau iPhone untuk membuat palet sekaligus mengauditnya, dan tidak ada jalur command line di antara yang kami rekomendasikan dalam panduan-panduan ini. Alternatif manualnya adalah generator apa saja yang dilanjutkan dengan contrast checker, satu pasangan demi satu pasangan, untuk setiap pasangan yang akan Anda pakai sebagai teks.

	Alat ini	Generator spasi pada umumnya
Penguncian	Hue yang dikunci menjadi jangkar posisi warna lain	Slot terkunci dilewati, sisanya acak
Kontras per warna	Pasangan terkuatnya di dalam palet, beserta rasionya	Tidak ada, atau hanya terhadap putih
Pemeriksaan tingkat palet	Pasangan yang runtuh dalam simulasi penglihatan warna, disebutkan	Tidak tersedia
Penyimpanan	Warna dibawa di dalam tautan	Harus punya akun

Memastikan tidak ada yang keluar dari tab

Tidak ada file yang diunggah di sini, dan palet tersimpan di bilah alamat setelah tanda #. Browser tidak mengirim bagian URL tersebut ke server, jadi tautan yang dibagikan terbuka tanpa warna-warnanya pernah sampai ke situs. Untuk memastikannya, buka DevTools, masuk ke panel Network, lalu tekan spasi beberapa kali: tidak ada permintaan keluar yang membawa warna Anda.

Buka palette generator, kunci warna yang tidak bisa Anda ubah, dan baca pasangan setiap kolom sebelum menetapkan sebuah set. Untuk ambang batasnya sendiri, rasio kontras yang sebenarnya Anda butuhkan menjelaskan angka mana yang berlaku di mana.