Cara membuat skala warna Tailwind kustom yang lolos uji kontras

Menambahkan warna brand ke Tailwind adalah pekerjaan cepat. Mengetahui langkah mana dari sebelas langkahnya yang bisa dipakai untuk teks adalah bagian yang biasanya dilewati, dan itulah sebabnya langkah 500 yang cerah begitu sering berakhir sebagai teks isi. Alat warna Tailwind membuat skalanya, menampilkan pratinjaunya pada komponen yang benar-benar dipakai orang, dan mencantumkan rasio terukur di bawah masing-masing.

Skala warna Tailwind adalah skala sebelas langkah yang didaftarkan dengan satu nama, sehingga utility seperti bg-brand-500 dan text-brand-700 tersedia. Di Tailwind v4, skala ini dideklarasikan di CSS, di dalam blok @theme, bukan di config JavaScript, dan palet bawaan v4 sendiri ditulis dalam OKLCH.

Membuat skala

1. Atur warna dasar. Ketik kode hex di Base colour. Alat ini terbuka dengan #0066ff.
2. Atur nama. Apa pun yang Anda ketik di Name menjadi bagian tengah setiap utility, jadi “brand” menghasilkan bg-brand-500.
3. Baca skalanya. Langkah 50 sampai 950, masing-masing dengan hex-nya; “yours” menandai langkah yang paling dekat dengan warna dasar Anda.
4. Ganti antara Light dan Dark. Gunakan sakelar Light/Dark di kanan kontrol, atau tombol D. Pratinjau digambar ulang dengan tema lainnya.
5. Baca baris di bawah setiap pratinjau. Masing-masing memberi rasio terukur, apa yang diukur, dan ambangnya. Kotak terisi berarti lolos; kotak kosong berarti tidak.
6. Pilih output dan salin. Tailwind v4, Tailwind v3, atau CSS vars, lalu Copy. Copy scale di bilah bawah (atau tombol C) melakukan hal yang sama.
7. Tempelkan. Untuk v4, tambahkan blok @theme ke file CSS yang mengimpor Tailwind. Untuk v3, letakkan entri bernama itu di dalam theme.extend.colors di config Anda, yang mempertahankan palet bawaan Tailwind di sampingnya.

Gunakan pengalih output, bukan Export di bilah bawah, karena output Tailwind-nya menomori langkah 1 sampai 11, bukan 50 sampai 950.

Bentuk setiap output

Output v4 menuliskan setiap langkah sebagai OKLCH, kecerahan dengan satu angka desimal, kroma dengan tiga, dan hue dengan satu:

@theme {
  --color-brand-50: oklch(…);
  /* … nine more … */
  --color-brand-950: oklch(…);
}

Output v3 adalah entri colors dalam hex di bawah komentar // tailwind.config.js. CSS vars menghasilkan --brand-50 sampai --brand-950 dalam blok :root, tanpa awalan --color-, jadi di v4 output ini mendefinisikan variabel tetapi tidak menghasilkan utility. Gunakan saat skala harus menjangkau kode di luar Tailwind.

Langkah yang bisa membawa teks

Inilah angka yang ditampilkan alat untuk warna dasar bawaannya, #0066ff, diukur oleh kode yang sama yang menggambar pratinjau. Hue Anda akan menggesernya sedikit; polanya tetap.

Langkah	Hex	Di atas putih	Di atas hitam	Teks isi (4.5:1) di atas
50	#f1f6ff	1.08:1	19.36:1	Hitam
100	#e0ebff	1.20:1	17.49:1	Hitam
200	#c1d8ff	1.44:1	14.53:1	Hitam
300	#99bfff	1.86:1	11.25:1	Hitam
400	#659dff	2.68:1	7.82:1	Hitam
500	#2d79ff	3.96:1	5.29:1	Hitam; di atas putih hanya teks besar
600	#005ce8	5.68:1	3.69:1	Putih; di atas hitam hanya teks besar
700	#0048b9	7.99:1	2.62:1	Putih
800	#00358d	11.08:1	1.89:1	Putih
900	#012464	14.60:1	1.43:1	Putih
950	#011540	17.75:1	1.18:1	Putih

500 dan 600 adalah dua langkah yang hanya berfungsi ke satu arah, dan tidak ada langkah di skala ini yang bisa membawa teks isi di kedua latar. Itulah sebabnya 500 yang cerah dipakai sebagai teks isi di halaman putih akan gagal.

Apa yang diukur pratinjau

Setiap pratinjau menguji pasangan yang berbeda, dan tema gelap tidak sekadar membalik tema terang. Pratinjau terang berada di panel putih di atas halaman langkah 50; pratinjau gelap berada di panel langkah 900 di atas langkah 950.

Baris pratinjau	Pasangan tema terang	Pasangan tema gelap	Kebutuhan	#0066ff, terang / gelap
label primer	Putih atau hitam, mana yang lebih kuat, di atas 600	Sama, di atas 500	4.5:1	5.68 / 5.29
label sekunder	800 di atas 100	100 di atas 800	4.5:1	9.23 / 9.23
badge halus, 11px	700 di atas 100	200 di atas 800	4.5:1	6.65 / 7.67
border input	300 di atas putih	700 di atas 900	3:1	1.86 / 1.82
teks isi alert	700 di atas 50	300 di atas 900	4.5:1	7.37 / 7.82
header tabel	600 di atas 50	300 di atas 900	4.5:1	5.23 / 7.82
seri di atas permukaan	600 di atas putih	600 di atas 900	3:1	5.68 / 2.57

Border dan grafik gelap

Dua baris di tabel itu gagal, dan keduanya bukan pasangan teks.

Kontras non-teks adalah persyaratan WCAG, success criterion 1.4.11, bahwa bagian antarmuka yang diperlukan untuk mengenali sebuah kontrol, seperti border input atau focus ring, harus mencapai 3:1 terhadap apa yang ada di sebelahnya. Pratinjau input menggambar border-nya dengan 300 di atas putih: 1.86:1. Bahkan 400 hanya mencapai 2.68:1. Jika border adalah penanda keberadaan sebuah kolom isian, gunakan 500 atau lebih gelap di panel putih.

Tema gelap mengulang masalah yang sama secara terbalik. Border 700 di panel 900 bernilai 1.82:1, dan seri grafik 600 di panel itu bernilai 2.57:1, keduanya di bawah 3:1. Di panel 900, 500 adalah langkah pertama yang melewatinya, di 3.67:1.

Jadi saat Anda menulis komponen dengan skala baru, border dan warna grafik layak diperiksa seketat teks, dan di dark mode keduanya membutuhkan langkah yang lebih terang daripada yang disarankan kebiasaan dari tema terang.

Membuatnya secara manual

Tailwind tidak membuat skala dari satu warna; Anda menulis sebelas barisnya sendiri. Itu mudah dilakukan dan mudah salah, persis seperti yang ditunjukkan tabel di atas, jadi jika Anda membuatnya secara manual, uji border 300 dan label 600 di pemeriksa kontras sebelum apa pun dirilis. Alat ini menyimpan warna dasar dan nama setelah tanda # di alamatnya, yang tidak dikirim browser ke server, jadi warna yang sedang Anda kerjakan tetap di perangkat Anda.

Buka warna Tailwind, atur warna dasar Anda, dan baca baris border input sebelum yang lain. Jika Anda menginginkan token peran seperti warna teks dan warna border yang dipilih berdasarkan pengukuran, generator ramp dan token membuat sebelas langkah yang sama dan menetapkan perannya. Untuk alasan OKLCH menggantikan HSL dalam pekerjaan semacam ini, lihat OKLCH untuk desainer.