Bagaimana cara menghitung warna jenis terbaik untuk warna latar belakang acak?

8

Saya mungkin perlu menyajikan konten di berbagai tingkatan tergantung pada jarak pengamat ke layar. Katakanlah dari jauh pengguna merasakan warna datar, tetapi dari jarak dekat pengguna harus dapat membaca beberapa teks. Bagian yang sulit adalah warna latar belakang datar diberikan / dapat diubah / saya tidak punya kendali atas.

Sejauh ini saya telah mengeluarkan prototipe yang sangat dasar untuk mengerjakan warna teks dari warna latar belakang (klik untuk memilih latar belakang acak). Ini adalah pendekatan yang sangat sepele: Saya mengambil rona dan mengimbanginya dengan 90 derajat (jadi cukup berbeda) dan membalikkan kecerahan dalam ruang warna HSB jadi saya mendapatkan warna yang cukup berbeda untuk dapat dibaca / memiliki kontras yang layak dengan latar belakang .

Ini terkadang berhasil:

bagus 1 bagus 2 bagus 3

terkadang tidak:

buruk 1 buruk 2 buruk 3

Apakah pendekatan ini baik / dalam arah yang baik? Jika demikian, bagaimana saya bisa menjadikan ini lebih baik? Jika tidak, arah mana yang harus saya ikuti?

Sayangnya saya tidak tahu banyak tentang teori jenis dan warna sehingga petunjuk / tips dari orang-orang dengan pengalaman sangat membantu. Ini akan ditampilkan di layar, bukan dicetak.

Apa hubungan antara warna latar belakang dan latar depan yang saya cari?

typography color-theory contrast George Profenza
sumber

Jawaban:

7

Keterbacaan adalah tentang kontras. Saya akan mencoba dan menentukan seberapa gelap setiap warna latar belakang dalam skala abu-abu, dan jika warnanya di atas 50% abu-abu (lebih gelap dari cahaya), gunakan teks putih, di bawah 50% gunakan teks hitam. Ini akan memastikan bahwa Anda memiliki setidaknya 50% kontras (perbedaan nada) untuk membuat teks Anda dapat dibaca.

Metode ini jauh lebih mudah daripada mencoba bermain dengan warna gratis atau pembalik dan menjamin kontras tonal maksimum pada warna apa pun.

John
sumber
keren, saya akan coba ini
George Profenza
Cukup sederhana dan sangat efektif. Saya telah bermain dengan beberapa opsi dan ambang kecerahan berfungsi dengan baik seperti yang Anda lihat di sketsa yang diperbarui . Instruksi ada di komentar di sebelah kiri. Jika saya punya waktu saya mungkin ingin mencoba bermain dengan ruang warna yang berbeda (seperti mengkonversi ke L a b * dan bermain dengan komponen), tetapi untuk sekarang ini melakukan pekerjaan dengan baik dan sederhana.
George Profenza
3

Di sini jawaban saya sebelumnya pada dasarnya pertanyaan yang sama di Game Development Stack Exchange.

Untuk meringkas, seperti jawaban lain yang disarankan di sini, Anda biasanya harus menggunakan hitam atau putih , tergantung mana yang lebih kontras dengan latar belakang. (Tentu saja, jika Anda suka, memberi sedikit warna pada kedua warna tidak akan terlalu memengaruhi kontras.)

Perhatikan bahwa, untuk menentukan dengan benar seberapa gelap atau terang sebuah warna muncul kepada pengguna, itu tidak cukup hanya dengan rata-rata nilai warna RGB (atau untuk mengambil kecerahan / nilai warna HSL / HSV). Sebaliknya, Anda harus memperhitungkan (setidaknya) dua efek:

  1. non-linearitas perangkat yang warna ditampilkan , yang (untuk warna RGB pada layar komputer, setidaknya) cenderung untuk menggelapkan warna tengah, dan

  2. sensitivitas spektral mata manusia , yang, secara kasar, menyebabkan warna di dekat bagian tengah spektrum yang terlihat (hijau, kuning, cyan) tampak lebih terang daripada yang di dekat tepi (biru, merah, ungu).

Masalah pertama dapat diperhitungkan dengan ekspansi gamma , sedangkan yang kedua hanya membutuhkan bobot yang tidak seragam dari saluran warna R / G / B. Secara bersama-sama, inilah cara kira-kira menghitung kecerahan yang dirasakan dari warna RGB, dan memutuskan apakah hitam atau putih akan kontras dengan yang lebih baik:

const float gamma = 2.2;
float L = 0.2126 * pow( R, gamma )
        + 0.7152 * pow( G, gamma )
        + 0.0722 * pow( B, gamma );

boolean use_black = ( L > 0.5 );

Itu dengan asumsi itu R, Gdan Bangka floating-point antara 0,0 hingga 1,0. Jika Anda memiliki mis. Integer dari 0 hingga 255, konversikan menjadi float dan bagilah dengan 255.

Konstanta dalam kode di atas (kurang-lebih) benar untuk input sRGB ; Anda dapat menyesuaikannya jika Anda bekerja di ruang warna lain, meskipun nilai yang tepat tidak terlalu penting: untuk warna yang cukup gelap atau terang, jawabannya tetap sama, sedangkan warna yang jatuh di dekat garis batas akan kontras hampir sama baiknya dengan hitam atau putih pula.

Ilmari Karonen
sumber
Saya sedang mempertimbangkan untuk mengubah dari RGB ke CIE XYZ atau L a b *. Saya mungkin menawarkan kedua opsi pada akhirnya. Jawaban yang bagus (+1)
George Profenza
2

Saya setuju dengan John, simpan teks sebanyak mungkin hitam / putih hanya untuk memastikan, Anda dapat menambahkan sedikit saturasi ke teks juga dan Anda aman. Ini adalah tes kecil:

masukkan deskripsi gambar di sini

Lihat di 100% di sini: http://flavius.clickgarden.net/random-hsb-bg-readable-text/test-01.png Unduh file .ai (sumber) di sini untuk diputar: http: // flavius. clickgarden.net/random-hsb-bg-readable-text/test.ai

Flavius ​​Frantz
sumber
Perhatikan bagaimana, dalam contoh Anda, teks hitam terlihat OK pada sebagian besar warna kecerahan / saturasi 100%, tetapi sangat buruk pada warna biru. Itu karena 100% biru hanya memiliki sekitar sepersepuluh dari kecerahan yang dirasakan, katakanlah, 100% hijau, yang merupakan sesuatu yang perlu dipertimbangkan ketika memilih warna teks. (Lihat jawaban saya untuk detailnya.) Pada dasarnya, Anda tidak pernah ingin menggunakan teks hitam pada latar belakang biru jenuh.
Ilmari Karonen