Bagaimana cara membuat kombinasi warna ini lebih mudah dibaca?

24

Saya mencoba meningkatkan situs web yang ada, dan inilah yang saya mulai dengan:

<body style='
        background-color: rgb(50,101,152);
        color: red;
        text-decoration-color: red;
        text-decoration-style: solid;
        font-size: 12px;
        font-weight: 700;
        font-family: "Bitstream Vera Sans", Verdana, Lucida, Arial, Helvetica, sans-serif;
        //text-shadow: 0px 0px 15px white;
    '>
    This is hard to read!
</body>

Saya menemukan bahwa kombinasi warna ini sulit dibaca. Yang lain tidak setuju, tetapi kami telah sepakat bahwa itu sangat tergantung pada kontras, kecerahan, dan properti tampilan lainnya (bahkan sudut tampilan):

masukkan deskripsi gambar di sini

Saya sudah bereksperimen sedikit dengan -webkit-text-stroke, text-shadow(lihat kode di atas), tetapi ketika saya memperbaiki hal-hal di satu layar, itu menjadi lebih buruk di yang lain.

Apa lagi yang bisa saya coba untuk membuatnya lebih mudah dibaca di berbagai tampilan, dengan tetap mempertahankan skema warna secara keseluruhan?

color  website-design  color-theory 
— bers
sumber
22
Jangan ragu untuk menunjukkan komentar ini kepada klien Anda. Saya memiliki pengalaman desain selama bertahun-tahun, dan saya dapat meyakinkan Anda bahwa "orang lain" dalam pertanyaan Anda di atas, yang berpikir bahwa itu dapat dibaca, sepenuhnya salah :) Seluruh skema harus diubah karena rusak karena tidak dapat diperbaiki.
— mayersdesign
15
Saya memiliki pengalaman lebih dari 30 tahun sebagai desainer ... Saya tidak mungkin setuju dengan komentar dari @mayersdesign di atas. skema warna itu harus segera ditolak.
— Scott
6
Pertama, Anda harus memahami tujuan skema warna Anda. Dalam skema warna untuk UI, masuk akal untuk menggunakan warna-warna netral sebagai warna utama, setiap warna aksen harus dibuang dengan hemat . Pikirkan tentang YouTube misalnya, warna apa yang muncul di benak Anda? Merah dan hitam, tetapi lihat halaman web YouTube yang sebenarnya, 98% putih dan abu-abu terang. Merah hanya digunakan sebagai aksen.
— Happy Hour Coding
Terima kasih semuanya (termasuk para penjawab)! Saya baru saja memeriksa ulang SE untuk melihat apa yang saya harapkan menjadi 1 atau 2 komentar sejak pagi ini, dan sekarang ini. Saya belajar banyak dan menerima beberapa argumen yang meyakinkan - terima kasih!
— bers
1
1995 disebut. Mereka ingin skema warnanya kembali.
— Mazura

Jawaban:

54

Ubah pikiran klien.

Tidak ada yang dapat memperbaiki fakta bahwa teks merah pada latar belakang biru adalah pilihan yang sangat buruk untuk keterbacaan karena kontrasnya terlalu rendah, dan karena secara khusus merah dan biru bekerja dengan buruk sebagai warna yang kontras.

Situs web ini webaim.org menunjukkan bahwa kontras antara kedua warna Anda adalah 1,52: 1 yang menyedihkan

Kontras penting untuk keterbacaan

Kontras teks adalah salah satu aspek yang lebih penting dari keterbacaan teks. Beruntung bagi kami Pedoman Aksesibilitas Konten Web (WCAG) 2.0 membahas kontras teks secara khusus, dan memberikan panduan yang walaupun bertujuan untuk menyediakan aksesibilitas web bagi para penyandang cacat, juga menawarkan saran yang bagus secara umum.

WCAG level AA membutuhkan rasio kontras minimal 4,5: 1 untuk teks normal dan 3: 1 untuk teks besar dan level AAA membutuhkan rasio kontras minimal 7: 1 untuk teks normal dan 4.5: 1 untuk teks besar.

Jadi situs web klien Anda bertentangan langsung dengan pedoman profesional yang diterbitkan . Ini juga bertentangan dengan selera estetika (menurut pendapat profesional saya)

Anda masih dapat menggunakan elemen merah dan biru dalam desain jika itu diperlukan. Tetapi meletakkan teks merah "konten-ukuran" di atas latar belakang biru hanya akan mengubah sebagian besar pengunjung ke situs Anda. Menurut pendapat saya, Anda memiliki tanggung jawab profesional untuk membujuk klien agar tidak menggunakannya.

Semoga tautan yang disediakan dapat membantu membuat kasus Anda dengan cara yang lebih kuat daripada sekadar berargumen bahwa Anda merasa sulit untuk membaca. Hal ini sebenarnya provably sulit untuk dibaca.

Chromostereopsis

Jika itu tidak cukup persuasif coba ini - Chromostereopsis adalah (secara singkat!) Ilusi optik yang menyebabkan masalah kedalaman lapangan bagi pemirsa. Itu tidak menyenangkan!

— mayersdesign
sumber
11
Untuk memperjelas, rasio kontras dalam dokumen W3C adalah minimum . Jangan katakan rasionya antara 4,5: 1 atau 7: 1; mereka mengatakan itu harus setidaknya salah satunya, tergantung pada tingkat aksesibilitas yang Anda targetkan.
— Adrian McCarthy
1
Poin yang sangat bagus, saya telah memperbarui jawaban untuk memasukkan lebih banyak detail, terutama yang ini.
— mayersdesign
8

Meskipun tidak berarti sempurna (atau bahkan bagus), menambahkan garis putih (atau lainnya) ke teks dapat membantu keterbacaan:

masukkan deskripsi gambar di sini

Ini mungkin berguna jika klien Anda bersikeras untuk mempertahankan warna.

— GREMLIN
sumber
Agar adil, itu hanya bekerja dengan tipe 36pt.
— user8356
Ya, konsep yang bagus. Tidak dimaksudkan sebagai sarkasme. Dan semakin Anda menerapkannya, semakin baik kita bisa membaca teksnya. Jadi, ambil garis putih sampai ke ujung layar ... Wink, wink.
— Martin Zaske
8

Kamu tidak bisa Nuansa merah dan biru keduanya gelap, warna jenuh, mereka praktis bergetar satu sama lain, dan teks itu akan membuat mata orang berdarah. Pengembang atau perancang yang tidak peduli dengan keterbacaan teks harus kehabisan kereta ruby.

Coba buat merah BANYAK lebih ringan. Ini akan terlihat merah muda tetapi akan lebih mudah dibaca. Atau gunakan putih atau kuning pucat di latar belakang itu. Latar belakang gelap terkenal sulit dibaca. Anda dapat memiliki warna umum yang sama - biru kehijauan - tetapi membuatnya jauh lebih ringan. Tapi teks merah cerah tidak pernah mudah dibaca, jadi saya hanya akan memo skema warna untuk teks.

— pengguna8356
sumber
7

Seperti yang telah ditunjukkan, itu kontras warna yang mengerikan . Ini juga merupakan palet buruk untuk orang buta warna (dengan buta warna merah-biru, rasio kontras turun ke sesuatu yang hampir mendekati 1: 1, yang sama sekali tidak dapat dibaca).

Taruhan terbaik Anda di sini adalah meyakinkan klien bahwa mereka tidak boleh mencampurkan teks dan latar belakang yang berwarna. Baik warna teks, atau latar belakang, bukan keduanya. Coba muat mock-up ke alat yang memungkinkan Anda mensimulasikan persepsi buta warna (Anda dapat menemukan beberapa opsi yang layak secara online), dan tunjukkan hasilnya kepada klien Anda, yang seharusnya secara signifikan membantu meyakinkan mereka.

Jika itu bukan pilihan, hal-hal lain yang dapat Anda coba untuk meningkatkan keterbacaan termasuk (perhatikan bahwa tidak ada yang menyelesaikan masalah buta warna, mereka hanya membantu dengan kontras atau keterbacaan umum:

  • Gunakan font satu spasi. Kedengarannya bodoh, tetapi ini sebenarnya membantu kebanyakan orang membaca teks dengan lebih mudah. Jelas bukan Courier New, tetapi Bitstream Vera Sans Mono, (atau bahkan sesuatu seperti Droid Sans Mono) harus tetap terlihat layak, dan akan lebih mudah dibaca.
  • Buat font yang berat, dan mungkin ukurannya juga sedikit. Teks yang lebih besar dan lebih berani lebih mudah dibaca, terlepas dari kontrasnya.
  • Tukar skema warna (yaitu, buatlah teks biru tua dengan latar belakang merah cerah). Kedengarannya sederhana, tetapi umumnya lebih mudah bagi kebanyakan orang untuk menyiapkan biru tua dengan warna merah terang daripada sebaliknya.
  • Tambahkan drop shadow sempit kontras tinggi ke teks dengan offset. Apa yang Anda inginkan di sini bukanlah perpaduan latar belakang, ini adalah keunggulan yang memberikan kontras yang baik. Mengimbangi bayangan juga bisa membantu, terutama offset diagonal sederhana. Saya juga menggunakan warna hitam di sini alih-alih putih (Anda ingin menonjolkan teks, bukan latar belakang, jadi gunakan kontras yang tinggi terhadap teks). Secara keseluruhan, sesuatu di sepanjang garis text-shadow: 2px 2px 4px black;mungkin merupakan tempat awal yang layak.
  • Meringankan merah secara signifikan. Saat ini, Anda menggunakan rgb(255,0,0). Saya akan mencoba dengan sesuatu seperti rgb(255,204,204)(atau mungkin lebih ringan) terlebih dahulu, dan sesuaikan dari sana.
  • Gelapkan biru. Sesuatu yang lebih dekat rgb(25,51,77)adalah tentang rona yang sama, tetapi harus cukup gelap untuk membuat teks lebih mudah dibaca.

Satu lagi opsi yang juga membantu beberapa orang dengan masalah buta warna:

  • Desaturate latar belakang biru. Meskipun bukan pilihan terbaik (itu agak condong ke skema warna), ini akan membantu keterbacaan paling banyak dari hal-hal lain yang saya daftarkan, karena itu akan secara aktif meningkatkan kontras. Saya akan mencoba saturasi 30% lebih rendah (itu rgb(82,102,122)) sebagai titik awal.
— Austin Hemmelgarn
sumber
6

Jika Anda sudah mencoba bayangan teks, saya pikir satu-satunya kemungkinan menjaga warna yang sama adalah membuat rentang teks

masukkan deskripsi gambar di sini

<div> <span0>This is hard to read!</span></div><br>
<div> <span1>This is hard to read!</span></div><br>
<div> <span2>This is hard to read!</span></div><br>

Gaya

span0 {text-shadow: 0px 2px 1px black;
}

span1 {padding:0 4px;
background-color: rgba(255,255,255,0.25);
position:relative;
display:inline-block;
}

span2 {padding:0 4px;
background-color: rgba(0,0,0,0.35);
position:relative;
display:inline-block;
}
— Danielillo
sumber
1
Atau bahkan putih polos yang keras lebih baik
— aloisdg mengatakan Reinstate Monica
1
itu masih sulit dibaca untukku ..
— Happy Hour Coding
@Dylan apa pendapatmu tentang jsfiddle.net/bersbers/xdkj76L3
— bers
2
Itu bisa dibaca. Saya pikir itu bukan ide yang bagus. Tetapi bisa dibaca.
— Happy Hour Coding
— yunzen
5

Anda harus memiliki rasio kontras yang cukup tinggi antara latar belakang dan teks (objek di latar depan) agar dapat dibaca, dengan rasio kontras minimal 4,5: 1. https://www.oss-usa.com/color-check-ada-image-compliance menunjukkan bahwa latar belakang dan latar depan Anda terlalu dekat untuk dapat dibaca.

Terkadang klien harus diberi tahu bahwa skema warna tidak dapat dipertahankan sepenuhnya dan perlu direvisi untuk memenuhi persyaratan keterbacaan. Jelas, membalikkan teks ke warna terang akan memberikan kontras yang cukup terhadap latar belakang gelap.

— Max Tokman
sumber
3

"Bagaimana Anda membuat teks lebih mudah dibaca?" Singkatnya, kamu tidak! Kombinasi warna tidak memenuhi pedoman aksesibilitas web dan tidak boleh digunakan. Warna latar depan atau latar belakang yang berbeda harus digunakan. Tidak peduli siapa yang menjadi target audiens Anda, Anda harus selalu bertujuan untuk melayani orang-orang dengan gangguan penglihatan, dan ini adalah perbaikan yang mudah.

Rasio kontras untuk kombinasi warna Anda dapat dilihat di sini ... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

— Andrew
sumber
2

(Tidak cukup poin untuk berkomentar)

Anda dapat mencoba menambahkan goresan ke teks. Saya menggunakan istilah "stroke" dalam arti photoshop, pada dasarnya warna garis tepi / garis besar teks untuk berfungsi sebagai kontras. Hitam / putih harus baik-baik saja (terutama jika Anda bermain dengan ketebalan goresan), tetapi saya membayangkan nuansa merah / biru tertentu juga bisa bekerja.

— allthemikeysaretaken
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.