Saya ingin menunjukkan beberapa gambar seperti contoh ini
Warna isi ditentukan oleh bidang dalam basis data dengan warna dalam hex (mis: ClassX -> Color: # 66FFFF). Sekarang, saya ingin menampilkan data di atas isian dengan warna yang dipilih (seperti pada gambar di atas) tetapi saya perlu tahu apakah warnanya gelap atau terang jadi saya tahu apakah kata-katanya harus putih atau hitam. Apakah ada cara? tks
Jawaban:
Membangun jawaban saya untuk pertanyaan serupa .
Anda perlu memecah kode hex menjadi 3 bagian untuk mendapatkan intensitas merah, hijau, dan biru individu. Setiap 2 digit kode mewakili nilai dalam notasi heksadesimal (basis-16). Saya tidak akan membahas perincian konversi di sini, mudah dilihat.
Setelah Anda memiliki intensitas untuk masing-masing warna, Anda dapat menentukan intensitas keseluruhan warna dan memilih teks yang sesuai.
Ambang batas 186 didasarkan pada teori, tetapi dapat disesuaikan dengan selera. Berdasarkan komentar di bawah ambang batas 150 dapat bekerja lebih baik untuk Anda.
Sunting: Di atas sederhana dan berfungsi dengan cukup baik, dan tampaknya memiliki penerimaan yang baik di sini di StackOverflow. Namun, salah satu komentar di bawah ini menunjukkan hal itu dapat menyebabkan ketidakpatuhan terhadap pedoman W3C dalam beberapa keadaan. Dengan ini saya memperoleh formulir yang dimodifikasi yang selalu memilih kontras tertinggi berdasarkan pedoman. Jika Anda tidak perlu mematuhi aturan W3C maka saya akan tetap menggunakan rumus sederhana di atas.
Rumus yang diberikan untuk kontras dalam Rekomendasi W3C adalah
(L1 + 0.05) / (L2 + 0.05)
, di manaL1
luminans warna palingL2
terang dan luminans yang paling gelap pada skala 0,0-1,0. Luminance hitam adalah 0,0 dan putih 1,0, jadi dengan mengganti nilai-nilai itu Anda dapat menentukan nilai dengan kontras tertinggi. Jika kontras untuk hitam lebih besar dari kontras untuk putih, gunakan hitam, jika tidak gunakan putih. Mengingat pencahayaan warna yang Anda uji saatL
tes menjadi:Ini disederhanakan secara aljabar menjadi:
Atau kira-kira:
Satu-satunya yang tersisa adalah menghitung
L
. Rumus itu juga diberikan dalam pedoman dan sepertinya konversi dari sRGB ke RGB linier diikuti oleh rekomendasi ITU-R BT.709 untuk pencahayaan.Ambang batas 0,179 tidak boleh diubah karena terikat dengan pedoman W3C. Jika Anda menemukan hasilnya tidak sesuai dengan keinginan Anda, coba rumus sederhana di atas.
sumber
#D6B508
dari 171, maka kontras putih. Namun, kontrasnya harus hitam (dikonfirmasi di sini: webaim.org/resources/contrastchecker )Saya tidak mengambil kredit untuk kode ini karena ini bukan milik saya, tetapi saya meninggalkannya di sini agar orang lain dapat menemukan dengan cepat di masa depan:
Berdasarkan jawaban Mark Ransoms, inilah cuplikan kode untuk versi sederhana:
dan inilah cuplikan kode untuk versi lanjutan:
Untuk menggunakannya cukup hubungi:
Juga, terima kasih
Alx
danchetstone
.sumber
isDark(bgColor)
Penggunaan saya kemudian hanya'color': isDark(color)?'white':'black'
Bagaimana dengan ini (kode JavaScript)?
sumber
Selain solusi aritmatika, juga dimungkinkan untuk menggunakan jaringan saraf AI. Keuntungannya adalah Anda dapat menyesuaikannya dengan selera dan kebutuhan Anda sendiri (mis. Teks off-white pada merah jenuh cerah terlihat bagus dan sama mudah dibaca dengan hitam).
Berikut ini adalah demo Javascript yang menggambarkan konsep tersebut. Anda juga dapat membuat rumus JS Anda sendiri di demo.
https://harthur.github.io/brain/
Di bawah ini adalah beberapa bagan yang membantu saya menyelesaikan masalah . Pada bagan pertama, cahaya adalah konstanta 128, sedangkan rona dan saturasi bervariasi. Pada bagan kedua, saturasi adalah konstan 255, sedangkan rona dan cahaya bervariasi.
sumber
Inilah solusi saya di Java untuk Android:
sumber
Berdasarkan jawaban @MarkRansom, saya membuat skrip PHP yang dapat Anda temukan di sini:
sumber
Ini adalah versi cepat dari jawaban Mark Ransom sebagai perpanjangan dari UIColor
sumber
Ini hanyalah contoh yang akan mengubah warna tanda centang SVG saat mengklik elemen. Ini akan mengatur warna tanda centang menjadi hitam atau putih berdasarkan warna latar belakang elemen yang diklik.
https://gist.github.com/dcondrey/183971f17808e9277572
sumber
Saya menggunakan fungsi JavaScript ini untuk mengonversi
rgb
/rgba
ke'white'
atau'black'
.Anda dapat memasukkan salah satu format ini dan itu akan menampilkan
'black'
atau'white'
rgb(255,255,255)
rgba(255,255,255,0.1)
color:rgba(255,255,255,0.1)
255,255,255,0.1
sumber
Jawaban terperinci Markus sangat berhasil. Berikut ini adalah implementasi dalam javascript:
Kemudian dapat memanggil fungsi ini
lum([111, 22, 255])
untuk mendapatkan putih atau hitam.sumber
Saya belum pernah melakukan hal seperti ini, tetapi bagaimana dengan menulis fungsi untuk memeriksa nilai masing-masing warna terhadap warna median Hex 7F (FF / 2). Jika dua dari tiga warna lebih besar dari 7F, maka Anda bekerja dengan warna yang lebih gelap.
sumber
Berdasarkan input berbeda dari tautan, buat foregroundcolor hitam atau putih tergantung pada latar belakang dan utas ini, saya membuat kelas ekstensi untuk Warna yang memberi Anda warna kontras yang diperlukan.
Kodenya seperti di bawah ini:
sumber
Jika seperti saya Anda mencari versi RGBA yang memperhitungkan alpha, berikut ini yang berfungsi sangat baik untuk memiliki kontras tinggi.
sumber
Ini adalah versi R dari jawaban Mark Ransom, menggunakan basis R saja.
sumber
@ SoBiT, saya melihat jawaban Anda, yang terlihat bagus, tetapi ada kesalahan kecil di dalamnya. Fungsi Anda hexToG, dan hextoB perlu diedit minor. Angka terakhir dalam substr adalah panjang string, dan dalam hal ini harus "2", bukan 4 atau 6.
sumber
KURANG memiliki
contrast()
fungsi bagus yang bekerja dengan baik untuk saya, lihat http://lesscss.org/functions/#color-operations-contrast"Pilih mana dari dua warna yang memberikan kontras terbesar dengan yang lain. Ini berguna untuk memastikan bahwa warna dapat dibaca dengan latar belakang, yang juga berguna untuk kepatuhan aksesibilitas. Fungsi ini bekerja dengan cara yang sama seperti fungsi kontras dalam Kompas untuk SASS. Sesuai dengan WCAG 2.0, warna dibandingkan dengan menggunakan nilai luma yang dikoreksi gamma, bukan terang mereka. "
Contoh:
Keluaran:
sumber
Dari hex menjadi hitam atau putih:
sumber
Kode versi objektif-c untuk iOS berdasarkan pada jawaban Mark:
sumber
Bagaimana dengan pengujian dengan semua 24 bit warna?
Sadarilah bahwa metode YIQ akan mengembalikan rasio kontras minimum 1,9: 1, yang tidak lulus tes AA dan AAA WCAG2.0, dengan asumsi ambang batas 128.
Untuk metode W3C, itu akan mengembalikan rasio kontras minimum 4,58: 1, yang lulus tes AA dan AAA untuk teks besar, dan tes AA untuk teks kecil, itu tidak akan lulus tes AAA untuk teks kecil untuk setiap warna.
sumber
Inilah metode saya sendiri yang telah saya gunakan dan belum memiliki masalah dengan sejauh ini 😄
sumber
Saya membuat modul Python untuk memilih warna latar depan berdasarkan nilai warna latar RGB atau HEX: https://github.com/azaitsev/foreground
sumber
Ini kode saya untuk Java Swing berdasarkan jawaban Mark yang luar biasa:
sumber