Renk, web tasarımındaki en güçlü araçlardan biridir. Marka kimliğini oluşturur, kullanıcı dikkatini yönlendirir ve duygusal tepkiler uyandırır. Ancak güzel renkler seçmek mücadelenin yalnızca yarısıdır. Renk paletiniz metinlerin okunmasını zorlaştırıyorsa kullanıcıları kaybetme ve web erişilebilirlik kurallarını ihlal etme riskiyle karşı karşıya kalırsınız.
Web erişilebilirliğini (a11y) göz önünde bulundurarak tasarım yapmak, metnin arka planına karşı net bir şekilde öne çıkmasını sağlamak anlamına gelir.
WCAG ve Kontrast Oranı Nedir?
Web İçeriği Erişilebilirlik İlkeleri (WCAG), web içeriği erişilebilirliği için uluslararası standartlardır. Bu ilkeler doğrultusunda, metinlerin okunabilir sayılması için belirli kontrast oranı eşiklerini karşılaması gerekir:
- WCAG AA Standardı (Asgari): Normal metin için en az 4.5:1, büyük metin (18pt veya üzeri, ya da kalın 14pt) için 3:1 kontrast oranı gerektirir.
- WCAG AAA Standardı (Gelişmiş): Normal metin için en az 7:1, büyük metin için 4.5:1 oran gerektirir.
Kontrast oranı, metin (ön plan) ile sayfa (arka plan) arasındaki ışık parlaklığı farkını temsil eden sayısal bir ölçektir. 1:1'den (beyaz arka plan üzerine beyaz metin) 21:1'e (beyaz arka plan üzerine siyah metin) kadar değişir.
Erişilebilir Renk Paletleri Oluşturma
Kontrast oranlarını manuel olarak kontrol etmek zordur. Tüm metin kombinasyonlarının okunabilir olduğu beş uyumlu renkten oluşan bir palet tasarlamak çok fazla deneme yanılma gerektirir.
Bunu çözmek için %100 istemci taraflı çalışan bir Renk Paleti Oluşturucu inşa ettik. Doğrudan tarayıcınızın içinde WCAG kontrast oranlarını gerçek zamanlı olarak hesaplar:
1. Palet Oluşturun: Favori marka renginizi kilitleyin ve uyumlu tonlar keşfetmek için geri kalanı rastgele düzenleyin.
2. Kontrast Matrisi: Paletinizdeki her olası renk kombinasyonunu WCAG AA ve AAA standartlarına göre anında kontrol edin.
3. Gerçek Zamanlı Önizleme: Gövde metni, butonlar ve panellerin canlı görsel örneklerini görün.
4. Geliştirici Dışa Aktarımı: Oluşturduğunuz renkleri tek bir tıklamayla CSS değişkenleri veya JSON olarak kopyalayın.
Tüm hesaplamalar makinenizde yerel olarak gerçekleşir.
Web Tasarımcıları İçin Hızlı Erişilebilirlik İpuçları
- Yalnızca Renge Güvenmeyin: Bilgiyi aktarmanın tek yolu olarak asla yalnızca rengi kullanmayın. Hata durumunda simge ve metin de ekleyin.
- Koyu ve Aydınlık Modları Kontrol Edin: Beyaz arka planda okunabilen bir renk, siteniz koyu moda geçtiğinde tamamen kaybolabilir.
Erişilebilir, profesyonel tasarımlar oluşturmak için androdom.tr/tr/tools/palette adresine gidin.