Konverter warna & pemeriksa kontras

Apa yang dilakukan alat ini

Dua pekerjaan yang selalu ternyata satu. Anda punya sebuah warna dan membutuhkannya dalam notasi berbeda — berkas desain mengatakan satu hal, lembar gaya menginginkan yang lain. Dan Anda punya dua warna dan perlu tahu apakah teks pada yang pertama terbaca di atas yang kedua. Jadi halaman ini mengambil dua warna, menampilkan masing-masing dalam setiap format sekaligus, dan mengukur kontras di antaranya.

Semuanya berjalan di browser Anda. Tak ada tentang palet merek yang belum dirilis yang perlu berkelana ke server untuk dikonversi.

Kelima notasi

Salah satu dari ini bisa ditempel masuk, dan semuanya keluar kembali:

• Heksadesimal — tiga, empat, enam, atau delapan digit. Bentuk pendek menggandakan tiap digit, jadi #f0a berarti #ff00aa. Empat dan delapan digit membawa alfa pada posisi terakhir.
• RGB — ketiga kanal sebagai angka atau persentase. Baik rgb(59, 130, 246) maupun rgb(59 130 246 / 50%) diterima; bentuk koma adalah yang ditulis kembali alat ini, karena itu masih yang dipakai kebanyakan kode di sekitar Anda.
• HSL — rona dalam derajat, lalu saturasi dan kecerahan sebagai persentase. Rona membungkus, jadi 480 dan -120 valid dan berarti 120 dan 240.
• OKLCH — kecerahan, kroma, dan rona dalam sebuah ruang yang seragam secara perseptual. Kecerahan boleh ditulis 62.8% atau 0.628.
• Nama CSS — seluruh 148-nya, termasuk rebeccapurple dan kedua ejaan setiap grey. Sebuah nama hanya ditampilkan dalam keluaran ketika ia cocok persis.

Satu keanehan yang layak diketahui: heksadesimal, RGB, dan OKLCH semuanya bertahan berpulang-pergi tanpa perubahan, tetapi HSL tak sepenuhnya. Ia dicetak pada presisi yang benar-benar dibaca orang — derajat bulat, satu desimal persen — dan itu tak cukup untuk menjangkau seluruh 16,7 juta warna sRGB. Konversi sebuah heksadesimal ke HSL dan kembali dan sebuah kanal bisa bergerak satu. Alternatifnya adalah keluaran seperti hsl(217.22, 91.19%, 59.8%), yang tak ada yang mau menempelnya. Galatnya jauh di bawah yang bisa dilihat mata.

Mengapa OKLCH ada

HSL tampak seperti menjelaskan kecerahan, dan ia tidak. Angka kecerahannya adalah sebuah sifat dari angkanya, bukan dari cahayanya. Kuning murni dan biru murni keduanya 50% kecerahan dalam HSL:

yellow  #ffff00   hsl 50% lightness    oklch 96.8% lightness
blue    #0000ff   hsl 50% lightness    oklch 45.2% lightness

Siapa pun bisa melihat bahwa kuning adalah yang lebih terang dari keduanya, dan OKLCH mengatakannya. Ini bukan akademis: inilah sebabnya sebuah palet yang dibangun dengan menahan kecerahan HSL konstan dan memutar rona menghasilkan sekumpulan warna yang tampak sangat tak rata, dan mengapa trik yang sama dalam OKLCH menghasilkan sekumpulan yang tampak seperti sebuah keluarga. Ini juga sebabnya, dalam OKLCH, dua warna dengan kecerahan sama biasanya punya kontras serupa terhadap latar belakang yang sama — sesuatu yang tak bisa dijanjikan HSL sama sekali.

Kedua angka lainnya adalah kroma — kira-kira seberapa berwarna, dari 0 untuk kelabu — dan rona dalam derajat. Tak seperti saturasi HSL, kroma bukan persentase dari apa pun, itulah sebabnya nilai maksimum yang dapat dipakai bergantung pada kecerahan sekaligus rona.

Ketika sebuah warna tak bisa ditampilkan

OKLCH bisa menjelaskan lebih banyak warna daripada yang bisa dihasilkan layar biasa. Minta kecerahan 70% pada kroma 0.4 dan Anda telah menamai sebuah hijau yang ada pada prinsipnya dan tak di mana pun dalam sRGB. Alat ini menjepit warna semacam itu ke dalam rentang dan menandainya sebagai di luar sRGB, ketimbang diam-diam menyerahkan kembali sesuatu yang lain.

Peringatan muncul hanya ketika jepitan benar-benar mengubah warna yang Anda dapatkan. Perbedaan itu lebih penting daripada kedengarannya. Merah sRGB duduk persis pada batas gamut, jadi sebuah nilai OKLCH terbitan untuknya, dibulatkan ke empat desimal, secara teknis mendarat sehelai di luar — sekitar dua bagian dalam sepuluh ribu, yang mendarat pada bita yang sama dan tak terlihat. Memperingatkan tentang itu akan melatih Anda mengabaikan peringatan. Sebuah warna dari palet gamut-lebar meleset dengan langkah utuh: Tailwind v4 blue-500 meminta 261 dari kemungkinan 255 dalam kanal biru, dan pada layar sRGB ia benar-benar bukan warna yang diminta.

Kontras, dan ketiga ambang

Rasio kontras membandingkan luminans relatif dua warna. Ia berjalan dari 1:1 untuk dua warna identik hingga 21:1 untuk hitam di atas putih, dan tak ada yang lain bisa mengalahkan itu. WCAG 2.1 menetapkan tiga ambang, dan mereka tak dapat dipertukarkan:

• 4,5:1 untuk teks tubuh — apa pun di bawah 18pt, atau di bawah 14pt saat tebal. Ini yang orang maksudkan ketika mereka mengatakan sebuah warna "gagal kontras".
• 3:1 untuk teks besar — 18pt ke atas, atau 14pt tebal ke atas. Bentuk huruf lebih besar membawa lebih banyak sinyal itu sendiri, jadi ambangnya lebih rendah.
• 3:1 untuk kontrol dan grafik — batas sebuah masukan, panah dalam sebuah select, batang sebuah grafik. Ditambahkan dalam WCAG 2.1 dan luas terlewat, karena orang memeriksa teksnya dan tak pernah memeriksa kotak di sekitarnya.

AAA menaikkan dua yang pertama ke 7:1 dan 4,5:1. Ia layak dibidik dalam salinan tubuh dan benar-benar sulit dicapai dalam sebuah palet merek; AA adalah yang diminta regulasi dan audit.

Ukuran titik dalam aturan itu adalah titik CSS, bukan piksel: 18pt adalah 24px dan 14pt sekitar 18,7px pada setelan default. Mudah mengira sebuah judul 20px dihitung sebagai teks besar. Ia tidak.

Warna tembus cahaya

Teks setengah-transparan di atas latar belakang legap punya rasio kontras yang sangat terdefinisi dengan baik: browser mencampur kedua warna sebelum melukis, dan begitu pula alat ini. Teks kelabu pada opasitas 60% cukup sebuah kelabu yang lebih terang begitu ia mendarat, dan ia diukur sebagai apa ia mendarat. Alat yang mengabaikan kanal alfa melaporkan rasio warna yang Anda tulis ketimbang warna yang dilihat siapa pun, yang selalu melebih-lebihkannya — sebuah pemeriksa aksesibilitas yang salah demi keuntungan Anda lebih buruk daripada tak ada.

Sebuah latar belakang tembus cahaya adalah situasi berbeda, dan alat ini menolaknya. Apa yang tampak melaluinya bergantung pada apa pun yang di bawahnya, yang bukan sesuatu yang bisa dijawab kedua warna pada halaman ini. Selesaikan latar belakang ke warna yang benar-benar dikompositnya dan ukur itu.

Apa yang tak diberitahukan rasio kepada Anda

Rasio yang lulus adalah lantai, bukan vonis. Tiga hal yang tak dicakupnya:

• Buta warna. Merah dan hijau berluminans identik punya rasio kontras dekat 1:1 dan tak terbedakan bagi siapa pun — tetapi dua warna bisa lulus rasio dan tetap menjadi satu-satunya hal yang memisahkan dua keadaan, yang gagal bagi siapa pun yang tak bisa membedakannya. Jangan pernah membawa makna dalam rona saja.
• Huruf tipis. Rumus tak tahu apa pun tentang berat guratan. Sebuah berat setipis-rambut pada 4,5:1 bisa lebih sulit dibaca daripada berat biasa pada 4:1.
• Rumus itu sendiri. Kontras WCAG 2 diketahui tak ramah pada teks terang di atas latar belakang gelap, melaporkan rasio yang terasa lebih tinggi daripada bacaannya. APCA, dirancang untuk WCAG 3, memodelkan ini lebih baik — tetapi ia tak normatif, tak ada audit yang menerimanya, dan menampilkan dua skor yang berbeda tak akan membantu siapa pun. Itulah sebabnya ia dibahas di sini dan tak dicetak di atas.

Satu catatan implementasi untuk siapa pun yang membandingkan hasil dengan kodenya sendiri: rumus luminans memakai ambang 0.03928, yang berbeda sangat sedikit dari 0.04045 dalam definisi sRGB saat ini. WCAG mengutip nilai yang lebih lama, jadi itulah nilai yang dipakai di sini. Menyamai spesifikasi lebih penting daripada rapi secara internal, dan perbedaannya tak pernah mengubah sebuah kelulusan menjadi sebuah kegagalan.