Kontrast, erişilebilirlik ve marka renkleri

WebAIM her yıl web’in en popüler bir milyon sitesinin ana sayfasını erişilebilirlik hataları için tarıyor. Listenin başında yıllardır aynı sorun var: düşük kontrastlı metin.

Erişilebilirlik çoğu zaman küçük bir kullanıcı grubu için yapılan ek iş gibi konuşulur. Oysa kontrast herkesi etkiler: güneş altında telefona bakan, yaşı ilerledikçe gözleri yorulan, ucuz bir monitörde çalışan herkesi. Düşük kontrast, metni okunmaz kılmasa bile okumayı yavaşlatır ve yorar.

Yedi yıllık yavaş iyileşme 2026’da tersine döndü: oran %79,1’den %83,9’a çıktı. Aynı raporda ana sayfaların %95,9’unda en az bir WCAG hatası tespit edildi.

Kontrast oranı nasıl hesaplanır?

WCAG, iki rengin kontrastını göreli parlaklıklarının oranı olarak tanımlar. Oran, aynı iki renk için 1:1’den siyah üzerine beyaz için 21:1’e kadar uzanır. Eşikler şöyle:

• AA, normal metin: en az 4,5:1
• AA, büyük metin (24 px ve üzeri ya da yaklaşık 19 px ve üzeri kalın): en az 3:1
• AAA, normal metin: en az 7:1; büyük metin için 4,5:1
• Arayüz öğeleri ve grafikler (buton kenarları, form alanları, ikonlar, grafik çizgileri): en az 3:1

Yasal ve kurumsal beklentilerin çoğu AA seviyesini hedefler. Avrupa Birliği’nde Avrupa Erişilebilirlik Yasası 28 Haziran 2025’ten beri e-ticaret ve bankacılık gibi hizmetleri kapsıyor; AB’ye satış yapan işletmeler için erişilebilirlik artık tercih değil, yükümlülük.

Kendi rengimizi test ettik

Miova’nın marka moru #876FFF, sitemizin açık zemini #F9FAFB üzerinde 3,49:1 kontrast veriyor. Yani büyük başlıklarda ve arayüz öğelerinde geçiyor, gövde metninde AA’dan kalıyor.

Bu yazıyı hazırlarken blog’daki bağlantıları da bu testten geçirdik. Gövde metnindeki bağlantılar marka morundaydı ve AA’dan kalıyordu. Çözümü rengi koyulaştırmakta değil, işi bölüşmekte bulduk: bağlantı metni artık gövde metniyle aynı renkte, onu ayıran şey altındaki ince mor çizgi. Metin her koşulda okunuyor; çizgi ise grafik öğeler için geçerli 3:1 eşiğini rahatça geçiyor. Aşağıdaki araçla aynı testi kendi renklerinizle yapabilirsiniz.

Kontrast tek başına yetmez

Oran geçse bile metin zor okunabilir. Birkaç kural daha:

• İnce ağırlıklara dikkat. Küçük boyutta ince bir font, oranı geçse bile soluk görünür. Gövde metninde regular ve üzeri ağırlıkları tercih edin.
• Satır uzunluğu. Bir satırda 45–75 karakter, gözün satır sonundan bir sonraki satırın başına rahatça dönebildiği aralıktır.
• Bilgiyi yalnızca renge emanet etmeyin. Form hatasını kırmızı çerçeveyle değil, ikon ve açıklama metniyle de gösterin. Bu yazıdaki grafiklerde de seriler yalnızca renkle değil, etiket ve lejantla ayrışıyor; her grafiğin altında veriyi tablo olarak açan bir buton var.
• Placeholder etiket değildir. Açık gri placeholder metni çoğu zaman 3:1’in bile altındadır ve kullanıcı yazmaya başlayınca kaybolur. Alan adını her zaman görünür bir etiketle yazın.
• Odak görünür olmalı. Klavyeyle gezinen kullanıcı hangi öğenin seçili olduğunu net bir odak çerçevesiyle görmeli.

Erişilebilirlik bir kontrol listesi değil

Erişilebilir tasarım, tasarımı sınırlayan bir kural seti değil; daha fazla koşulda çalışan tasarımdır. Kontrastı yüksek bir arayüz güneşte de okunur, yorgun gözle de okunur, projeksiyonda da okunur.

Marka renkleri bu sürecin düşmanı değil. Çoğu zaman aynı rengin bir ton koyusu ya da açığı, markanın karakterini korurken okunabilirliği de sağlar. Önemli olan, bu kararı yayına aldıktan sonra değil, renk paleti kurulurken vermek.