Web Tasarımında Kontrastlı Ön Plan ve Arka Plan Renklerini Kullanma

Web sitenizin okunabilirliğini ve kullanıcı deneyimini uygun kontrastla geliştirin

Kontrast, herhangi bir web sitesinin tasarımının başarısında önemli bir rol oynar. Bu sitenin tipografisinden , site genelinde kullanılan görüntülere, ön plan öğeleri ve arka plan renkleri arasındaki zıtlığa - iyi tasarlanmış bir sitenin, kaliteli bir kullanıcı deneyimi ve uzun vadeli site başarısı sağlamak için tüm bu alanlarda yeterli bir karşıtlığı olması gerekir.

Düşük Kontrast Kötü Okuma Deneyimine Eşittir

Çok düşük kontrastlı web sitelerinin okunması ve kullanılması zor olabilir; bu da herhangi bir sitenin başarısı üzerinde olumsuz bir etki yaratacaktır. Kötü renk kontrastı konularının tanımlanması genellikle kolaydır. Genellikle bir web tarayıcısında görüntülenen bir sayfaya bakarak bunu yapabilirsiniz ve kötü renk seçimleri nedeniyle metnin okunması çok zor olup olmadığını görebilirsiniz. Yine de, hangi renklerin birlikte iyi çalışmadığını belirlemek kolay olsa da, diğerlerinin aksine hangi renklerin iyi işlediğine karar vermek çok zor olabilir. Ne işe yaramıyor olabilirsiniz, ama neyin işe yaradığını nasıl belirleyeceksiniz? Bu makaledeki görüntü size farklı renkler ve bunların ön plan ve arka plan renkleri olarak nasıl kontrast oluşturduğunu göstermelidir. Projelerinizde doğru renk seçimlerini yapmanıza yardımcı olacak bazı "iyi" eşleşmeleri ve bazı "kötü" eşleştirmeleri görebilirsiniz.

Kontrast ile ilgili

Dikkat etmeniz gereken bir şey, kontrastın, bir rengin arka plana göre ne kadar parlak olduğunu göstermesidir. Yukarıda bahsedilen görüntüde görüleceği üzere, bu renklerden bazıları çok parlak ve arka plan renginde canlı bir şekilde görünür - siyahın üzerindeki mavi gibi, ama yine de onu zayıf bir kontrast olarak etiketledim. Bunu yaptım çünkü parlak olsa da, renk kombinasyonu hala metni okumayı zorlaştırıyor. Siyah bir arka plandaki tüm mavi metinde bir sayfa oluşturursanız, okuyucularınız çok hızlı bir şekilde göz yorgunluğuna sahip olurlar. Bu yüzden kontrast sadece siyah ve beyaz değildir (evet, bu puntanın amacı). Kontrast için kurallar ve en iyi uygulamalar vardır, ancak bir tasarımcı olarak, kendi özel örneğinizde çalıştıklarından emin olmak için bu kuralları her zaman değerlendirmelisiniz.

Renk Seçimi

Kontrast, web sitenizin tasarımı için renkleri seçerken göz önünde bulundurulması gereken faktörlerden sadece bir tanesidir, ancak bu önemli bir özelliktir. Renkleri seçerken, şirketin marka standartlarına dikkat edin, aynı zamanda bir kuruluşun marka yönergelerine uygun olsa da, çevrimiçi ortamda iyi çalışmayan renk paletlerini ele almaya istekli olun. Mesela, web sitelerinde etkili bir şekilde kullanmak için zorlu bir şekilde sarı ve parlak yeşillikler buldum. Bu renkler bir şirketin marka yönergelerinde yer alıyorsa, büyük olasılıkla karşıt renklere sahip renkleri bulmak zor olduğu için muhtemelen vurgulu renkler olarak kullanılmaları gerekecektir.

Benzer şekilde, marka renkleriniz siyah ve beyazsa, bu büyük bir kontrast anlamına gelir, ancak uzun metrajlı bir siteniz varsa, beyaz yazıyla siyah bir arka plana sahip olmak çok fazla okumayı zorlaştırır. Siyah ile beyaz arasındaki kontrast bile harika, siyah arka plandaki beyaz yazı uzun geçişler için göz yorgunluğuna neden oluyor. Bu durumda, renkleri beyaz zemin üzerine siyah metni kullanacak şekilde tersine çeviririm. Bu görsel olarak ilgisi olmayabilir, ama bundan daha iyi bir karşıtlık bulamazsınız!

Çevrimiçi Araçlar

Kendi tasarım anlayışınıza ek olarak, sitenizin renk seçimini test etmek için kullanabileceğiniz bazı çevrimiçi araçlar da vardır.

CheckMyColors.com sitenizin tüm renklerini test edecek ve sayfadaki öğeler arasındaki kontrast oranını rapor edecektir.

Ayrıca, renk seçimlerini düşünürken, web sitesi erişilebilirliğini ve renk körlüğü formları olan kişileri de düşünmelisiniz. WebAIM.org, WCAG yönergelerine karşı seçimlerinizi test edecek ContrastChecker.com gibi, bu konuda yardımcı olabilir.