BerandaAlatGenerator palet aksesibel
Generator palet warna aksesibel dari warna merek
Masukkan warna merek dan dapatkan skala sepuluh langkah dari 50 sampai 900 yang dibangun di ruang warna perseptual OKLCH. Setiap langkah menampilkan kontras dengan teks putih dan hitam, palet mencantumkan pasangan langkah yang lolos WCAG AA, dan hasilnya bisa diekspor sebagai CSS custom properties, warna Tailwind, atau design token.
—
| Token | Warna | OKLCH | Teks putih | Teks hitam | APCA Lc P / H |
|---|
Pasangan teks dan latar yang lolos AA (4,5:1)
Langkah latar → langkah dari palet yang sama yang bisa dipakai sebagai teks di atasnya.
Metode. Langkah-langkah disebar merata pada kecerahan OKLCH antara warna merek dan ujung skala (L ≈ 97,5 % untuk 50, ≈ 25 % untuk 900); rona tetap, kroma berkurang ke arah putih, dan warna di luar gamut kehilangan kroma sampai muat di sRGB. Kontras: rasio WCAG 2.2, tidak dibulatkan ke atas.
Semua dihitung di browser Anda — data yang Anda masukkan tidak dikirim ke mana pun.
Cara memakai
- Masukkan warna merekTempel HEX dari panduan merek atau pilih dengan pemilih warna. Generator mencari langkah dengan kecerahan yang cocok lalu membuat warna lebih terang di atasnya dan lebih gelap di bawahnya.
- Periksa tabel kontrasSetiap langkah menampilkan kontras dengan teks putih dan teks hitam. “AA” berarti 4,5:1 untuk teks normal; “Besar” berarti hanya 3:1 untuk teks besar dan komponen antarmuka.
- Pilih pasangan teks dan latarDaftar pasangan menunjukkan langkah mana yang bisa dipakai sebagai teks di setiap latar — misalnya teks 700 di latar 50 untuk banner informasi.
- EksporPilih variabel CSS, konfigurasi Tailwind, JSON, atau design token W3C, beri nama palet, lalu salin kodenya ke proyek Anda.
Mengapa membuat skala warna dengan OKLCH
Cara paling sederhana membuat versi terang atau gelap sebuah warna adalah mencampurnya dengan putih atau hitam di sRGB, atau mengubah L pada HSL. Keduanya menghasilkan skala yang tidak rata. Kecerahan HSL tidak perseptual: kuning 50 % tampak jauh lebih terang daripada biru 50 %, sehingga langkah yang “sama” punya kontras sangat berbeda di tiap rona. Mencampur dengan putih di sRGB menggeser rona: biru condong ke ungu, merah ke merah muda.
OKLCH, bentuk silinder dari ruang warna OKLab yang diterbitkan Björn Ottosson pada 2020 dan kini bagian dari CSS Color Level 4, memisahkan tiga hal yang penting bagi desainer:
Karena L mengikuti seberapa terang warna tampak, langkah L yang sama menghasilkan skala yang terasa rata di semua rona, dan kontras dengan putih atau hitam berubah secara terduga dari langkah ke langkah. Itulah sebabnya Tailwind CSS v4 mendefinisikan palet bawaannya dengan OKLCH.
Cara generator ini membangun skala
- Warna merek diubah ke OKLCH dan diletakkan di langkah dengan kecerahan acuan terdekat (atau di langkah yang Anda pilih). Nilai HEX-nya dipertahankan persis.
- Langkah yang lebih terang disebar merata pada L antara warna merek dan L ≈ 97,5 % (langkah 50); langkah yang lebih gelap antara warna merek dan L ≈ 25 % (langkah 900).
- Rona tidak berubah. Kroma berkurang ke arah terang — warna sangat terang dengan kroma penuh terlihat seperti neon — dan turun paling banyak sepertiga ke arah gelap.
- Warna di luar gamut sRGB dikembalikan dengan mengurangi kroma sambil mempertahankan L dan H, sesuai rekomendasi CSS Color 4.
- Setiap HEX dibulatkan ke 8 bit per kanal, dan kontras dihitung dari nilai yang dibulatkan — nilai yang benar-benar Anda pakai.
Cara membaca kolom kontras
Untuk setiap langkah, tabel menampilkan rasio kontras WCAG 2.2 dengan teks putih murni (#fff) dan hitam murni (#000):
- AA — minimal 4,5:1: aman untuk teks isi, label, dan tautan.
- Besar — antara 3:1 dan 4,5:1: hanya untuk teks mulai 24 px (18,66 px tebal) dan elemen non-teks seperti ikon, garis tepi, dan indikator fokus (WCAG 1.4.11).
- Tidak — di bawah 3:1: hanya dekorasi, bukan teks.
Karena langkah mengikuti kecerahan perseptual, hasilnya mirip untuk sebagian besar rona: teks putih lolos AA di 600–900 dan teks hitam di 50–500. Hampir tidak ada warna yang lolos dengan keduanya: 4,5:1 terhadap putih dan hitam sekaligus hanya mungkin pada rentang luminans relatif yang sangat sempit (0,175–0,183). Karena itu design system memakai 600 atau 700 untuk tombol utama dengan teks putih, dan menyisakan 400–500 untuk isian, grafik, dan teks besar.
Kolom APCA menampilkan kontras kecerahan (Lc) dari draf WCAG 3 untuk teks putih dan hitam. Di atas 75 nyaman untuk teks isi, di atas 60 untuk label antarmuka, di atas 45 untuk judul. APCA belum menjadi standar; gunakan untuk memilih di antara opsi yang sudah lolos WCAG 2.2.
Pasangan di dalam palet
Antarmuka berwarna lembut — banner informasi, baris terpilih, tag, petunjuk onboarding — menaruh langkah gelap di atas langkah terang dari rona yang sama. Daftar pasangan menunjukkan, untuk setiap latar, langkah teks mana yang mencapai 4,5:1. Sebagai patokan, langkah yang berjarak lima atau lebih (50 dengan 600, 100 dengan 700) biasanya lolos; langkah yang bersebelahan tidak pernah.
Cara memakai palet di design system
- Beri nama berdasarkan peran, bukan nilai. Ekspor skala sebagai
--brand-50 … --brand-900, lalu petakan peran di atasnya:--color-primary: var(--brand-600),--color-primary-text: var(--brand-700),--color-info-bg: var(--brand-50). Jika merek berubah, cukup satu daftar yang diubah. - Catat pasangan yang disetujui. Dokumentasikan langkah teks mana yang boleh di latar mana, agar tidak ada yang tergesa-gesa menaruh teks 400 di latar 100.
- Tema gelap adalah pemetaan tersendiri. Pakai skala yang sama secara terbalik — langkah terang untuk teks, langkah gelap untuk permukaan — dan periksa pasangannya lagi: pasangan gelap yang lolos WCAG 2 masih bisa terasa pudar, dan APCA menunjukkannya lebih baik.
- Status juga perlu kontras. Hover dan ditekan biasanya bergeser satu langkah lebih gelap; indikator fokus perlu 3:1 terhadap latar di sekitarnya.
- Warna semantik (sukses, peringatan, bahaya) dibuat dengan cara yang sama, masing-masing dari satu warna dasar. Kuning dan hijau muda hanya dikenali di langkah terang, di mana teks putih gagal — gunakan teks gelap di atasnya.
Untuk memeriksa satu pasangan, termasuk warna di luar palet atau lapisan semi-transparan, gunakan pemeriksa kontras warna.
Sumber
- Ottosson B. A perceptual color space for image processing, 2020 — OKLab dan OKLCH, matriks konversi.
- W3C. CSS Color Module Level 4 — notasi oklch() dan pemetaan gamut dengan pengurangan kroma.
- W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — kriteria 1.4.3, 1.4.6, dan 1.4.11, luminans relatif dan rasio kontras.
- Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 0.0.98G-4g — nilai Lc.
- W3C Design Tokens Community Group. Design Tokens Format Module, draf — struktur $type dan $value pada ekspor token.
Pertanyaan umum
Apa arti angka 50 sampai 900 dalam palet warna?
Itu adalah langkah kecerahan dari satu rona, dipopulerkan oleh Material Design dan Tailwind CSS: 50 paling terang, 900 paling gelap, dan 500 atau 600 biasanya dekat dengan warna merek. Angka tersebut adalah nama, bukan ukuran, jadi setiap langkah bisa disesuaikan.
Mengapa memakai OKLCH, bukan HSL, untuk membuat skala warna?
Kecerahan OKLCH sesuai dengan kecerahan yang dipersepsikan, sedangkan HSL tidak: kuning dan biru dengan kecerahan HSL yang sama tampak sangat berbeda dan kontrasnya pun berbeda. Langkah OKLCH yang sama menghasilkan skala yang rata di semua rona tanpa pergeseran rona saat dicerahkan.
Langkah palet mana yang dipakai untuk teks di atas putih?
Langkah pertama di tabel dengan minimal 4,5:1 terhadap putih. Pada palet dari generator ini biasanya 600, karena langkah mengikuti kecerahan perseptual; pada palet berbasis HSL, kuning, hijau limau, dan sian sering butuh 800 atau lebih gelap. Untuk teks besar dan ikon cukup 3:1, jadi satu langkah lebih terang mungkin sudah cukup.
Mengapa tidak ada langkah yang lolos dengan teks putih dan hitam sekaligus?
Untuk mencapai 4,5:1 terhadap putih dan hitam sekaligus, warna harus punya luminans relatif antara 0,175 dan 0,183 — rentang yang sangat sempit sehingga hampir tidak ada langkah yang jatuh di sana. Itu wajar: gunakan teks putih di langkah gelap dan teks gelap di langkah terang.
Apakah warna merek saya persis ada di palet?
Ya. Warna merek mempertahankan HEX yang persis di langkah yang kecerahannya paling cocok, atau di langkah yang Anda pilih, dan langkah lain dibangun di sekitarnya.
Bagaimana memakai hasil ekspor di Tailwind CSS?
Untuk Tailwind v3, tempel ekspor Tailwind ke theme.extend.colors di tailwind.config.js dan pakai kelas seperti bg-brand-600. Untuk Tailwind v4, ekspor variabel CSS dan ganti namanya menjadi --color-brand-600 di dalam blok @theme.
Lainnya di Desain produk
- Pemeriksa kontras warna
Apakah pasangan warna teks dan latar ini lolos WCAG AA atau AAA?
- Generator skala tipografi
Ukuran font apa yang membentuk skala tipografi yang konsisten dan fluid?
- Waktu baca tooltip dan tour
Apakah pengguna punya cukup waktu membaca tooltip atau langkah tur?
- Pemeriksa teks tooltip
Apakah tooltip ini cukup singkat, jelas, dan mendorong tindakan?
- Kalkulator SUS
Berapa skor System Usability Scale, dan apakah usability-nya baik?