24

Varolan bir web sitesini geliştirmeye çalışıyorum ve bu benim başladığım şey:

<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>

Bu renk kombinasyonunun okunmasının zor olduğunu biliyorum. Diğerleri aynı fikirde değil, ancak kontrast, parlaklık ve diğer ekran özelliklerine (görüntüleme açısına bile) çok bağlı olduğuna karar verdik:

Ben zaten biraz denedim -webkit-text-stroke, text-shadow(yukarıdaki koda bakın), ancak bir ekranda bir şeyleri geliştirdiğimde, diğerine göre daha da kötüleşiyor.

Genel renk şemasını korurken başka çeşitli ekranlarda bunu daha okunaklı hale getirmek için başka ne deneyebilirim?

color website-design color-theory

— Bers
kaynak

22

Bu yorumu müşterinize göstermekten çekinmeyin. Yıllarca süren tasarım deneyimim var ve yukarıdaki sorunda “okunabilir” olduğunu düşünen “diğerlerinin” tamamen yanlış olduğunu garanti edebilirim :) Tüm plan değiştirilmeli çünkü tamir edilemeyecek şekilde kırılmış.

— mayersdesign

15

Bir tasarımcı olarak 30 yıldan fazla bir deneyime sahibim ... yukarıdaki @ mayersdesign'ın yorumuna daha fazla katılamadım. bu renk şeması derhal reddedilmelidir.

— Scott

6

İlk önce, renk düzeninizin amacını anlamalısınız. Kullanıcı Arabirimi renk şemasında, ana renkler olarak nötr renkleri kullanmak mantıklıdır, vurgulu renkler az miktarda atılmalıdır . Örneğin YouTube’u düşünün, aklınıza hangi renk geliyor? Kırmızı ve siyah, ancak% 98 beyaz ve açık gri olan gerçek YouTube web sayfasına bakın. Kırmızı sadece aksan olarak kullanılır.

— Happy Hour Kodlama

Herkese teşekkürler (cevaplayıcılar dahil)! Sadece bu sabahtan beri 1 ya da 2 yorum olmasını beklediğim şeye bakmak için SE'yi kontrol ettim ve şimdi bu. Çok şey öğrendim ve ikna edici argümanlar aldım - teşekkür ederim!

— Bers

1

1995 denir. Renk şemalarını geri istiyorlar.

— Mazura

54

Müşterinin fikrini değiştir.

Mavi bir arka plandaki kırmızı metnin okunaklılık için son derece zayıf bir seçim olduğu gerçeğini düzeltebilecek hiçbir şey yoktur, çünkü kontrast çok düşüktür ve özellikle kırmızı ve mavi kontrast renkler olarak zayıf çalışır.

Bu web sitesi webaim.org , iki renginiz arasındaki kontrastın zavallı bir 1,52: 1 olduğunu gösteriyor

Kontrast okunaklılık için önemlidir

Metin kontrastı, metin okunabilirliğinin en önemli yönlerinden biridir. Neyse ki, bizim için Web İçeriği Erişilebilirlik Kılavuzları (WCAG) 2.0, özellikle metin kontrastını ele almaktadır ve engelli insanlara web erişilebilirliği sağlamayı amaçlamasına rağmen, genel olarak sağlam bir tavsiye de sunan kılavuzlar sunmaktadır.

WCAG AA seviyesi normal metin için en az 4.5: 1, büyük metin için 3: 1 ve AAA seviyesinin normal metin için en az 7: 1, büyük metin için 4.5: 1 olan bir kontrast oranı gerektirir.

Bu nedenle, müşterilerinizin web sitesi, yayınlanan mesleki yönergelerin doğrudan çelişkisidir . Aynı zamanda estetik tadıyla çelişiyor (benim görüşüme göre)

Gerekirse, yine de bir tasarımda kırmızı ve mavi unsurlarını kullanabilirsiniz. Ancak, "içerik boyutunda" kırmızı metni mavi bir arka plan üzerine koymak, sitenizi ziyaret edenlerin büyük bir kısmını geri çevirir. Kanımca müşterinizi kullanmamaya ikna etmek için profesyonel bir sorumluluğunuz var.

Umarım sağlanan bağlantılar sadece savunarak daha sağlam bir şekilde Çalışmanız yardımcı olabilir size zor okumak için bulabilirsiniz. Aslında kanıtlanabilir okumak zor.

Chromostereopsis

Bu yeterince ikna edici değilse, şunu deneyin - Chromostereopsis (kısaca!) İzleyiciler için alan derinliği sorunlarına neden olan optik bir yanılsamadır. Hoş değil!

— mayersdesign
kaynak

11

Netleştirmek için, W3C belgesindeki kontrast oranları minimumdur . Oranın 4.5: 1 veya 7: 1 arasında olması gerektiğini söyleme; Hangi erişilebilirlik seviyesini hedeflediğinize bağlı olarak, en az bunlardan biri olması gerektiğini söylerler .

— Adrian McCarthy

1

Çok güzel bir nokta, cevabı daha fazla ayrıntı içerecek şekilde güncelledim, özellikle bu.

— mayersdesign

8

Hiçbir şekilde mükemmel olmasa da (hatta iyi), metne beyaz (veya başka) bir taslak eklemek okunabilirliğe yardımcı olabilir:

Müşteriniz renkleri koruma konusunda ısrar ederse, bu yararlı olabilir.

— cin
kaynak

Adil olmak gerekirse, bu sadece 36pt tipinde çalışır.

— user8356

Evet, harika bir konsept. Alaycılık demek değildir. Ne kadar çok uygularsanız metni o kadar iyi okuyabiliriz. Öyleyse beyaz ana hatları ekranın kenarına kadar götürün… Göz kırp, göz kırp.

— Martin Zaske

8

Yapamazsın Kırmızı ve mavinin bu tonları, koyu, doygun renklerdir, pratik olarak birbirlerine karşı titrerler ve bu metin insanların gözlerinin kanamasına neden olur. Metin okunaklılığı ile ilgilenmeyen herhangi bir geliştirici veya tasarımcı, yakut bir ray üzerinde şehir dışına çıkarılmalıdır.

Kırmızı A LOT'u daha hafif yapmayı deneyin. Pembeye benzeyecek ama daha okunaklı olacak. Veya bu arka plan üzerinde beyaz veya soluk sarı renk kullanın. Koyu arka planlar okunaklı olması konusunda oldukça zor. Aynı genel renge sahip olabilirsiniz - yeşilimsi mavi - ancak daha açık hale getirin. Ancak parlak kırmızı metnin hiçbir zaman okunması kolay değildir, bu yüzden metin için o renk şemasını kaldırırdım.

— user8356
kaynak

7

Belirtildiği gibi, bu korkunç renk kontrastı. Ayrıca renk körü insanlar için kötü bir palettir (kırmızı-mavi renk körlüğü ile kontrast oranı, tamamen okunamayan 1: 1'e yakın bir şeye düşer).

Buradaki en iyi bahis, müşteriyi renkli metinleri ve arka planları karıştırmamaları gerektiğine ikna etmektir. Her ikisi de değil, metni veya arka planı renklendirin. Renk körü algılarını simüle etmenize olanak sağlayan bir araca mock-up yüklemeyi deneyin (çevrimiçi olarak birkaç iyi seçenek bulabilirsiniz) ve sonucu müşterinize ikna etmenize yardımcı olacak önemli sonuçları gösterin.

Bu bir seçenek değilse, okunabilirliği artırmak için deneyebileceğiniz diğer şeyler şunlardır (bunlardan hiçbirinin renk körlüğü sorununu çözmediğine dikkat edin, yalnızca kontrast veya genel okunabilirliğe yardımcı olurlar:

Tek aralıklı bir font kullanın. Aptalca geliyor, ama bu aslında çoğu insanın metni daha kolay okumasına yardımcı oluyor. Açıkçası Courier New değil, ancak Bitstream Vera Sans Mono (veya Droid Sans Mono gibi bir şey) hala iyi görünmeli ve biraz daha okunaklı olacak.
Yazı tipi ağırlığını ve muhtemelen boyutunu da biraz yapın. Kontrasttan bağımsız olarak daha büyük, daha kalın metinlerin okunması daha kolaydır.
Renk düzenini değiştirin (yani, parlak kırmızı bir arka plan üzerinde koyu mavi metin yapın). Kulağa basit geliyor, ancak çoğu insan için koyu maviyi parlak kırmızıya hazırlamak, diğer taraftan daha kolaydır.
Bir ofset ile metne yüksek kontrastlı dar gölge ekleyin . Burada istediğin şey, arka plana bir karışım değil, iyi bir kontrast sağlayan zor bir kenar. Gölge dengelemek de bu konuda yardımcı olabilir, özellikle basit bir çapraz ofset. Ben de burada beyaz yerine siyahla giderdim (metni vurgulamak istiyorsun, arka planı değil, bu yüzden metne karşı yüksek kontrast elde etmek istiyorsun). Genel olarak, çizgileri boyunca bir şey text-shadow: 2px 2px 4px black;muhtemelen iyi bir başlangıç yeridir.
Kırmızıyı belirgin şekilde hafifletin. Şu anda kullanıyorsun rgb(255,0,0). rgb(255,204,204)Önce gibi bir şey (veya muhtemelen daha hafif) dener ve oradan uyarlarım.
Maviyi karartın. Daha yakındaki bir şey rgb(25,51,77)aynı renk tonu hakkında, ancak metni daha okunaklı hale getirmek için yeterince karanlık olmalıdır.

Renk körlüğü sorununda bazılarına yardımcı olan bir seçenek daha:

Mavi arka planı desaturate edin. En iyi seçenek olmasa da (renk şemasını biraz eğriyorsa) bu, listelenen diğer şeylerin çoğunda okunabilirliğe yardımcı olmalıdır, çünkü kontrastı aktif olarak artıracaktır. rgb(82,102,122)Başlangıç noktası olarak yaklaşık% 30 daha düşük doygunluğu (bu ) deneyebilirim .

— Austin Hemmelgarn
kaynak

6

Metin gölgesini zaten denediyseniz, aynı renkleri koruyabilmenin tek olasılığının bir metin yayılma yapmak olduğunu düşünüyorum.

<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>

stiller

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
kaynak

1

Ya da sert bir düz beyaz bile daha iyidir

— aloisdg Reinstate Monica'nın

1

Bu benim için hala okumak zor ..

— Happy Hour Kodlama

Eğer düşünmek ne @Dylan jsfiddle.net/bersbers/xdkj76L3

— BERS

2

Okunabilir. Bunun iyi bir fikir olduğunu sanmıyorum. Ancak okunabilir.

— Happy Hour Kodlama,

blog.theteamw.com/2009/11/09/…

— yunzen

5

4.5: 1 minimum kontrast oranıyla okunabilmesi için arka plan ve metin (ön planda nesne) arasında yeterince yüksek bir kontrast oranına sahip olmanız gerekir. https://www.oss-usa.com/color-check-ada-image-compliance , arka planınızın ve ön planınızın okunaklı olmak için birbirine çok yakın olduğunu gösterir.

Bazen müşteriye, okunabilirlik gereksinimlerini karşılamak için renk şemasının tamamen korunamayacağı ve revize edilmesi gerektiği söylenmelidir. Açıkçası, metni açık bir renge ters çevirmek koyu arka plana karşı yeterli kontrastı sağlar.

— Max Tokman
kaynak

3

"Metni nasıl daha okunaklı hale getirirsiniz?" Kısacası, yapmazsın! Renk kombinasyonu web erişilebilirliği kurallarına uymuyor ve kullanılmamalıdır. Farklı bir ön plan veya arka plan rengi kullanılmalıdır. Varsayılan hedef kitlenizin kim olduğu önemli değildir, her zaman görme engelli kişilere hitap etmeyi amaçlamalısınız ve bu kolay bir düzeltmedir.

Renk kombinasyonlarınız için kontrast oranları burada görülebilir ... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

— Andrew
kaynak

2

(Yorum yapmak için yeterli puan yok)

Metne kontur eklemeyi deneyebilirsiniz. Photoshop anlamında “vuruş” terimini kullanıyorum, temelde kontrast olarak kullanılacak metnin kenarlığının / anahatlarının rengi. Siyah / beyaz iyi olmalı (özellikle strok kalınlığında oynuyorsanız), ancak bazı kırmızı / mavi tonlarının da işe yarayabileceğini hayal ediyorum.

— allthemikeysaretaken
kaynak

Bu renk kombinasyonunu nasıl daha okunaklı hale getirebilirim?

Müşterinin fikrini değiştir.