web-gelistirme-sc.com

Beyaz arka planlarda siyah metin kullanmayla ilgili bir sorun mu var?

Birçok web sitesi arka plan beyaz olduğunda neden #000000 Dışında bir metin rengi kullanıyor?

Örneğin, bu metin koyu gri kullanılarak görüntülenecektir:

.post-text {
   color: #333;
}

Bu konuda bazı çalışmalar yapıldı mı?

87
Yannick Blondeau

Beyaz üzerine siyah gibi yüksek kontrast göz yorgunluğuna neden olabilir. Ayrıca disleksi olan insanlar için özellikle kötü olduğuna dair kanıtlar vardır. Daha fazla bilgi için X Hareketi ve Bristol Disleksi Merkezi adresindeki makaleleri okuyun.

WCAG ayrıntıları sağlar kabul edilebilir renk kontrastı nedir, ancak bir üst sınır belirtmeyin. Şahsen, üst kontrast uyarısı sağlayan farklı bir algoritma kullanmayı seviyorum. Daha fazla bilgi için Spider Trax'taki şu makaleye bakın: "W3C Kontrastlarını Yanlış Anlıyor mu?"

Biraz konu dışı, ancak erişilebilir renk şemaları seçmek için Das Plankton tarafından yapılmış iyi bir araç olan Contrast-A konusuna bakın.

94
Sheff

Kapalı siyah renkler (# 333, # 222, # 2a2a2a, # 444) web tipografisinde baskı malzemesi kontrastını simüle eder. Ayrıca Sheff'ın yukarıda belirtildiği gibi saf beyaz ve saf siyahtan daha kolay okunabilirliği artırabilir.

15
rohicks

İşte ilginç bir parça: Tasarım İpucu: Asla Siyah Kullanmayın

Bu bir çalışma değil, ama bunu ilginç buldum. Düşünce, gerçek dünyada şey gerçekten siyah gerçekten beyaz ve bir süre önce önemli olmadığını, ancak şimdi ekranların o kadar yüksek kontrastı var ki, beyazdaki saf siyah sizin için iyi değil.

12
radex

Siyah metin sorun değil. Göze batan beyaz arka plan var. Bu arka plan parlaması göz yorgunluğunun nedenidir. Gri metin, kullanıcılar genellikle okumak için zorlandıkça bunu daha da kötüleştirir - bu nedenle gri metnin okunması genellikle siyah metinden daha uzun sürer. Aslında, birçok insan siyah metnin bir sayfasını "görebilir" ve mesajı anında anlayabilir - gri metinle bu kadar hızlı bir tarama yapmak neredeyse imkansızdır. Bu damarda, yazı tipi ve boyutu önemli olmasına rağmen, siyah üzerine beyaz göz için daha kolay olabilir. Klasik Windows Masaüstü'nün (orta mavi/gri renkte beyaz) okunması çok kolaydır.

İlgili bir konuda, "Düz" tasarım eğilimi tüm sayfaların beyaza döndüğünü gördü. Parlama dışında, tıklanabilir alanlar pasif alanlardan ayırt edilemez hale gelir. Bu kullanılabilirliği nasıl geliştirir? Sorun nedir: - Menüler/Bağlantılar/İçindekiler zıt panellerde mi? - "Düğmeler" gölgeli, eğimli veya eğimli mi? - Simgeler ilkel ve monotondan çok renkli ve dokulu mi kalıyor?

8
Tarian

Disleksik okuyucular için son derece yüksek kontrast kullanarak bir sorun vardır, ancak büyük ölçüde abartılmış ve mitin ucuna yayılmıştır (buna bakın seminal rapor , ancak bunun unsurları arasında yeterli kontrast sağlamak için " bir sayfa "ve" soluk bir arka plan üzerinde koyu renkli bir metin kullanın "). Ayrıca, popüler bloglar tarafından yayılan beyaz arka planlarda, özellikle güzel bir etki elde etmeye çalışan, ancak okunabilirliğe zarar veren tasarımcılar tarafından gereksiz yere açık gri metin kullanan bir suistimal eğilimi var.

Çok sayıda akademik makale * yüksek kontrastlı metnin düşük kontrasttan daha hızlı okunabileceğini göstermektedir; W3C web erişilebilirlik yönergeleri minimum kontrast için bir formül sağlar (bkz. AERT ). Bildirilen web sitesi Kontrast İsyanı , metin okunabilirliği hakkındaki akademik araştırma makalelerine bağlantılar ve beyaz arka planlarda açık gri renklerden kaçınmanın bir mantığı sunar.

* Bir çift göndermeye çalıştım, ancak bu sitenin itibar sistemi ikiden fazla bağlantı göndermeme izin vermiyor. Asıl araştırmanın başlangıç ​​noktası olarak ContrastRebelion sitesindeki bağlantıları ziyaret edin (Siteyle hiçbir şekilde bağlantılı değilim).

5
TuringTest

Beyaz arka planda siyah metin kullanmak, ekranınızın kontrastını belirgin hale getirebilir. Ekranınızı rahatça görüntüleyebilmek için parlaklığı değiştirebilir ve F.Lux adlı bir uygulamaya başvurabilirsiniz. Bu, bilgisayarınızın rengini günün saatine göre otomatik olarak değiştiren, gözleriniz parlamayan ücretsiz bir yazılımdır.

Aslında renk nokta değildir, ona bakma zamanı önemlidir. Monitörünüzün ve bilgisayar ekranınızın en tehlikeli kısmı mavi ışıktır. Okülerinize kolayca zarar verebilir, göz yorgunluğunu ve diğer sorunları getirebilir. Daha fazla bilgi mavi ışığın insan sağlığı ile tehlikeleri daha fazla göz koruması için gerçekten önemlidir.

4
Daphne Yang

Disleksikim ve beyazdaki gri ve grideki gri ile ilgili bir sorunum var. Beyaz üzerine siyah veya açık gri üzerine siyah ile ilgili bir sorunum yok. Tüm disleksik insanlar aynı değildir ve tüm insanlar bu günlerde üzerimizde savaştığımız gülünç derecede zayıf kontrastla Web sitelerini okuyamaz. Kullanıcı Web sitesi ve bilgisayar yazılımı kullanıcılarınızla konuşmayı deneyin.

3
Rex Kinder

Karışıklığı önlemek ve sorulan sorunun bugün itibariyle hala geçerli olduğunu doğrulamak için:

Firefox Reader veya Safari Reader (Masaüstü ve iPhone) gibi araçların yanı sıra m.Twitter.com, facebook, Medium (Web ve (Android-) App), Apple.com, Google gibi TechCrunch gibi büyük web platformları da kısa süre önce yeniden başlatıldı. Bu web sitesi burada hepsi bugün itibariyle beyaz zemin üzerine 'neredeyse siyah' metin kullanıyorlar (Mar 2018) - teknik anlamda sorunun soruyor: Gerçekten gri değil,% 100 derin siyah değil: rgba gibi değerler (0 , 0,0.84), # 111111, # 14171a veya # 333333

Bazıları #ffffff ile # 000000 arasında tam kontrast kullanır, ör. Amazon Kindle (Android) veya www.w3.org. En azından mobil ekranlar genellikle karartılır.

2

Yaşlı bir insanım, hala normal yaşam işlevlerinde aktifim. Öfkem, kişiselleştirmeye en uygun olan metni, rengi ve arka planı seçme seçenekleri sunan ürünlere/hizmetlere ilişkin farkındalık eksikliğini hedefliyor, ancak uygulanabilirlik için değil.

Microsoft ve tarayıcı koleksiyonu genel halkla uyumlu değildir. MS, "Windows" ve görsel olanaklarına çok çeşitli görsel çözümler sunar. Yine de, önemli bir faktör haber/medya metninin kullanıcı için okunabilirliğidir. MS ve tarayıcı grubunun, bireylerin ihtiyaçlarını daha yakından karşılayan bir dizi metin ve renk seçeneği sunması umulur. Benim kişisel hayal kırıklığım, yayının ebery yönüne taşınıyor. Portakal rengi açık kahverengi bir gıda hazırlama paketindeki talimatları okumayı deneyin. Veya açık gri üzerine beyaz. Görsel efekt için iyi, ancak uygulanabilirlik için SIFIR görünüyor. Şahsen, yaşam tarzımı ve ihtiyaçlarımı karşılayan ürünler satın alma eğilimindeyim. Keşke bu bilgisayarı ve diğer elektronik cihazları bırakabilseydim. Sağlayıcıların tek fikirli aptallığına dayanarak, bu seçenek daha kısa sürede gerçeklik haline gelebilir. Ben arka plan, metin ve renk seçmek için ab olmak istiyorum (meto) kolaylık olmadan bilgisayar ekranımdaki metni okumak için izin .. Dönem.

1
John

Hayır, beyaz arka planda siyah metinle ilgili bir sorun yok. Onlarca yıldır bir standart olmuştur. Bu nedenle, kullanıcıların çoğunluğu için sorunlara neden olması pek olası değildir. Gri metin kullanmaya karar verirseniz, insanların genellikle düşük kontrastlı durumlarda metin okuyamayacağını unutmayın. mobil cihazlarda veya görme engellilerde.

Çok muhtemel bir neden, gri metnin görsel olarak çekici olmasıdır. Genellikle işbirliği tasarımlarında görülebilir, üretken ortamlarda nadiren kullanılır.

Mozilla, destek sitelerinde Reader View'in işlevlerinden birinin kontrast eklemek olduğunu belirtir; bu, kontrastı ilk başta azaltmadığınızda genellikle gerekli değildir. Reader View için renk seçimleri, sağlamanız gereken minimum kontrastın yaygın olarak kabul gören bir referansıdır.

1
STOPIT

Bir ekrandaki karanlık olmayan RGB renkleri, gözdeki XYZ renklerine ve daha sonra beynin ton doygunluğu-açıklık renklerine benzer bir şeye dönüştürüldüğünde, RGB değerlerindeki küçük değişiklikler, daha sonra küçük değişiklikler verecek küçük XYZ değişikliklerine neden olur. renk tonu ve doygunluğa (ki buna toplu olarak kroma olarak değineceğim). Daha koyu renkler HSL'ye çevrildiğinde, RGB değerlerindeki aynı mutlak boyut değişiklikleri XYZ'de daha büyük değişikliklere ve dolayısıyla renkte daha büyük değişikliklere yol açar. Belirli bir renk tonu/doygunluğun daha koyu bir alanı, aynı renk tonu/ifadeye sahip daha açık bir alanın yanında olduğunda, sınır genellikle hafif bulanık olur (göz küresi iyi odaklanır, ancak mükemmel değil), ancak sınırdaki tüm alanlar aynı olmalıdır kroma. Bellekteki RGB renklerini göz küresindeki XYZ renklerine dönüştürme sürecinde doğrusallık olmasa bile, sonuçta kromada eşit olmayan herhangi bir homojenlik az olacaktır.

Bununla birlikte, aşırı koyu renklerdeki RGB değerlerindeki küçük değişiklikler, renkte büyük değişikliklere neden olabilir. Bilgisayardaki RGB renklerini gözdeki XYZ renklerine dönüştürme sürecinde herhangi bir doğrusallık yoksa, algılanan kromadaki değişiklikler oldukça büyük olabilir. RGB değeri (0,0,0) sanki (0.0001, 0, 0) gibi algılanırsa kırmızımsı görünür; (0,0,0,0001) olarak algılanırsa mavimsi görünür. Eğer biri arka plan rengini (96,128,128) ve ön plan rengini (3,4,4) kullanırsa, ön plan ve arka plan aynı kromaya sahip gibi görünecektir. Bunun yerine, metnin parçalarının algılanan kroması yalnızca arka plandakinden farklı olmayabilir, aynı zamanda sabit olmayan ve düzgün olmayan da olabilir. Bu tür karanlık nesnelerin renklerinin anlamlı olmasa da, anlamsız renk değişimlerinin dikkat dağıtıcı olmayacağı anlamına gelmez.

1
supercat

Son zamanlarda bir sosyal işbirliği platformunun UX'sinin inşasına katıldım ve erişilebilirlik konusunda da oldukça ciddiydik. Erişilebilirlik yönergelerine uymanın bir parçası olarak, bilgiyi ileten temel bileşenler için renk kontrastını kontrol etmek önemli bir görevdi. WCAG 1.4 ( http://www.w3.org/TR/2005/WD-WCAG20-20050630/#visual-audio-contrast ) renk kontrastının belirli bir seviyede olmasını gerektirir. Cevabı tamamen ikinci olarak sheff

1
mysticpixels

Yukarıdaki katkıyla% 100'üm. Tüm bu gri metin ekran ve kağıt belgeler, kitaplar, ilaç talimatları vb. Okumak son derece zorlaştırır Ve daha da kötüleşiyor, daha gri ve daha gri metin oluyor. Açıkça kontrast ihtiyacı, metnin estetik olarak tatlı veya havalı göründüğü, ancak pratik bir amacı olmadığı zamana kadar tamamen kayboldu. Sanırım okuma, küme düşme değerine ve gazetecilik ve analize doğru giderek videolar, web-inarlar ve resimsel medya aracılığıyla yayılıyor. Bazı amaçlar için iyi oldukları için, yazılı bir raporun ve analizin ayrıntılarını ve karmaşıklığını asla içeremezler. Basılı ve yazılı bilgi içeriğine değer veren herkes, baskının görünürlüğü için kampanya yürütmelidir.

1
David Lamb