Herkesin Görebileceği Bir Web Renk Paleti Oluşturmak İçin 5 Araç

Marka renklerinizin güçlü bir duygusal etkisi var; ancak bunlar, kısmen gören, renk körü olan veya görünürlüğü zorlaştıran çevresel faktörlerle karşı karşıya kalan site ziyaretçilerine nasıl görünüyor?

Renk ve kontrast düzeyleri iletişim açısından kritik öneme sahiptir ve erişilebilirliğe önem veren tasarımcılar için bu ayrıntıların tam olarak doğru şekilde elde edilmesi kritik öneme sahiptir.'

Renk algısı bozuklukları düşündüğünüzden daha yaygındır. Bu yazıda az görme, disleksi ve renk körlüğü gibi engelleri olan kişilerin web ile nasıl etkileşime girdiği hakkında konuşacağız.

Web sitemin erişilebilirliğini geliştirmek için renk denetleyiciyi nasıl kullanırım?

Bu bölüm biraz çaba gerektirse de aslında oldukça basittir. WebAIM'in çevrimiçi Kontrast Denetleyicisi aracını kullanmanız gerekecektir. WebAIM, dünya çapında web erişilebilirliğini artırma misyonuyla Utah Eyalet Üniversitesi merkezli kar amacı gütmeyen bir kuruluştur.

Ön plan renginizi (örneğin, metninizin veya simgelerinizin rengi) ve arka plan rengini onaltılık değerler (onaltılık değerler olarak da bilinir) olarak, şurada belirtildiği gibi girmeniz yeterlidir. HTML veya CSS ve kontrast oranı denetleyicisi, oranın yeterli olup olmadığını size bildirecektir. Aramanız gereken minimum kontrast oranının 4.5'e 1 olduğunu unutmayın. Beyaz zemin üzerine siyah metnin kontrast oranı 21'e 1'dir, bu nedenle geniş bir hareket alanınız vardır.

Herkesin Görebileceği Bir Web Renk Paleti Oluşturmak İçin 5 Araç

1. WebAIM Renk Kontrastı Denetleyicisi

Ön plan ve arka plan için onaltılık renkleri girin. Çıktı, örnek bir cümleyle birlikte normal ve büyük metin için AA ve AAA uyumluluğunu gösterir. Kaydırıcılar, iyi bir kombinasyon bulana kadar işleri değiştirmenize olanak tanır.

Güçlü

• Gözü yormayan bir arayüze sahip basit bir araç.
• Bu sadece tasarımcılar için değil, yeni başlayanlar için de güzel ve basit bir araçtır.

Zayıf Yönler

• İkiden fazla renk karşılaştırılamaz, yalnızca iki renk.
• Açıklık kaydırıcısı renkleri seçmenin pek iyi bir yolu değildir. Bu basit ekranda renklerin ne kadar çekici olduğunu söylemek zor.

2. WCAG için Kontrast Denetleyicisi

Ön plan ve arka plan için onaltılık renkleri girin. Lorem Ipsum metni örneğinin yanında normal ve büyük metinler için AA ve AAA uyumluluğunu gösterir. Ayrıca bir resim de yükleyebilirsiniz. Sizin için otomatik olarak 9 renkli bir palet seçilir. Daha sonra her rengi Ön Plan veya Arka Plan rengi olarak karşılaştırabilirsiniz.

Güçlü

• Kullanıcı dostu bir arayüze sahip basit bir araç.
• Görüntülerden palet yapabilme becerisine sahip olmak.

Zayıf Yönler

• Palet otomatik olarak seçilir ve renk seçiciyi kullanarak daha fazla değişiklik yapabilirsiniz ancak bu değişiklikler tekrar palete kaydedilmez. Bilgileri kopyalayıp yeni bir belgeye yapıştırmanız gerekir.

3. Renkli Küp

Paletin renklerini her biri kendi satırında olacak şekilde girin. Çıktı, küçük ve büyük yazı tipleri için AA standartlarıyla karşılaştırılan kontrast oranlarına sahip örnek harfleri gösterir. Üç sütun, beyaz bir arka plan, siyah bir arka plan ve "Mevcut olanlardan en okunaklı" olan bir dizi marka rengiyle kontrastı gösterir.

Güçlü

• Gözü yormaz Kullanıcı arayüzü (UI) iyi organize edilmiştir ve başarılı/başarısız/son durumunu görmek kolaydır.

Zayıf Yönler

• AAA tarafından belirlenen standartları karşılamıyor.
• Mümkün olan her renk kombinasyonunu yapmıyor ve ilk başta durumun böyle olup olmadığı belli değil.

4.) Sekiz Şekilli Kontrast Izgarası 

Palet renklerini girin. Ayrıca her renge bir isim verebilirsiniz. Uygulama, mümkün olan her renk kombinasyonundan oluşan bir tablo oluşturur. Üç boyutta fayans vardır. AA ve AAA başarılı/başarısız/kenar ve etkili kontrast oranı için görsel ipuçları vardır. Sütunlar ve satırlar uygulamada sürükleyip bırakılarak taşınabilir. Tablo verileri kaydedilebilir, dışa aktarılabilir ve paylaşılabilir.

Güçlü

• Tüm paletlerin analizine yardımcı olan birçok yararlı özellik vardır.

Zayıf Yönler

• Kullanımı daha kolay olan diğer araçlara göre öğrenmesi daha zordur.
• Sadece iki rengi karşılaştırmak doğru bir yöntem değil.
• Renklerin nasıl bir araya geldiğini anlamak için iyi değil.
• Bakması biraz bunaltıcı ama gösterilen çok fazla bilgi var.

5. Renk güvenliği 

Arka plan rengini yazın. Yazı tipinin ailesini, boyutunu ve ağırlığını seçin. Standart olarak AA veya AAA'yı seçin. Seçilen rengi ve onaltılı kodunun yanı sıra bir örnek ve etkili kontrast oranını gösterir. Yeterli kontrasta sahip olası ön plan renklerinin büyük küçük resimleri en iyi kısımdır. Bunların hepsine veya yalnızca belirli renk gruplarına (yeşil, mavi, mor vb.) bakmayı seçebilirsiniz.

Güçlü

• Gözü yormayan bir arayüzle, iyi görünen ve iyi çalışan renk kombinasyonlarını bulmak kolaydır.
• Halihazırda bir marka renk paletiniz yoksa veya web için zaten sahip olduğunuz bir palete eklemek istiyorsanız bu kullanışlı bir araçtır.

Zayıf Yönler

• Aynı anda yalnızca ön plan ve arka plan renklerini karşılaştırabilirsiniz.
• Kaydetmek istiyorsanız renkleri kopyalayıp ayrı bir belgeye yapıştırmanız gerekir.
• Dışarı çıkın ve herkes için bir şeyler yapın!

Bu araçları nasıl kullanacağınızı öğrendikten sonra, bir proje için birden fazlasına ihtiyacınız olduğunu fark edebilirsiniz. Belki de Color Cube, müşteriye erişilebilirlik hakkında öğrendiklerinizi göstermenin en iyi yoludur. Belki hızlı nokta kontrolleri yapmak için WebAIM'in aracını her zaman kullanacaksınız.

Sonuç 

Az önce bahsettiğimiz ipuçlarını, yönergeleri ve araçları kullanarak web sitenize yüksek kontrastlı renkler ve etiketler verebilirsiniz. Bu, az gören, disleksi ve renk körlüğü olan kişilerin web sitenizi ve içeriğinizi okumasını kolaylaştıracaktır. Genel kitlenizin de web sitenizi kullanmayı daha kolay bulduğunu görürseniz şaşırmayın.