Renklerin veya metnin okunabilirliğini herkesin sizinle aynı şekilde algıladığını varsayabilirsiniz. Rengi algılama şeklimiz çevremize (düşük veya parlak ışıklar) ve görüş becerilerimize bağlı olabilir. Siz veya kullanıcılarınız renk körlüğü ya da az gören milyonlarca kişiden biri olabilirsiniz.
WAI grubu, çeşitli görme engelli bireyleri desteklemek için metin ile arka planı arasında yeterli kontrast olmasını sağlamak üzere bir renk kontrastı formülü oluşturdu. Bu renk kontrastı oranları takip edildiğinde, orta düzeyde az gören kişiler kontrast artırıcı yardımcı teknoloji olmadan arka planda metin okuyabilir.
Şekil 1'de gösterilen kontrast oranlarındaki farka dikkat edin.
Web İçeriği Erişilebilirlik Yönergeleri (WCAG) 2.0 tarafından belirlenen gerekli minimum kontrast oranı olan 4,5:1'dir. Bu rasyon, görme kaybı olan kullanıcıların sıklıkla yaşadığı (yaklaşık 20/40 görüşe eşdeğer) kontrast hassasiyeti kaybını telafi ettiği için seçildi.
Burada belirtildiği gibi, 4.5:1 yalnızca minimum boyuttur. Az gören veya diğer renk körlüğü olan kullanıcıları desteklemek için AAA seviyesiyle tanışın ve 7:1 kontrasta sahip içerikler oluşturun.
Renk kontrastınızı, Geliştirici Araçları'ndaki Lighthouse Erişilebilirlik Denetimi ile kontrol edebilirsiniz.
Gelişmiş Algısal Kontrast Algoritması
Gelişmiş Algısal Kontrast Algoritması (APCA), renk algısı üzerine yapılan modern araştırmalara dayanarak kontrast hesaplama yöntemidir.
APCA, WCAG'in AA ve AAA seviyelerinden daha bağlama bağlıdır.
Bu modelde kontrast aşağıdaki özelliklere göre hesaplanır:
- Üç boyutlu özellikler (yazı tipi kalınlığı ve metin boyutu)
- Metin rengi (metin ve arka plan arasında algılanan açıklık farkı)
- Bağlam (ortam ışığı, çevre ve metnin amaçlanan amacı)
Chrome, AA/AAA kontrast oranı yönergelerini APCA ile değiştirmek için deneysel bir özellik içerir.
Önemli bilgileri renklerden de öteye taşıyın
Kullanıcılara önemli bilgiler ilettiğinizde, önemli bilgileri paylaşırken görsel işaretlerin yanı sıra metin veya alternatif metinlerden yararlanın. Görsel işaretler arasında renkler, desenler, resimler, yazı tipi stili ve yönlendirme dili yer alır.
Örneğin, geçersiz girişleri belirtmek için kırmızıyla altını çizen bir iletişim formunuz olabilir. Bu renk göstergesi, ekran okuyucuya veya renk körlüğü olan kullanıcılara bir şeylerin çalışmadığını bildirmez. Kullanıcı, form göndermenin neden çalışmadığını merak edip vazgeçebilir.
Kullanıcıyı ilgili hatayla ilgili çeşitli şekillerde uyardığınızdan emin olun. Örneğin, belirli bir girişin geçersiz olduğunu ve nedenini açıklamak için bir hata mesajı ekleyebilirsiniz. Ayrıca, doğru girişin nasıl görünmesi gerektiğine dair bir yardım metni de ekleyebilirsiniz.
Görsel olmayan ek işaretler olduğu sürece geçersiz girişin altını kırmızıyla çizebilirsiniz.
Arayüzünüzde renk kullanımı çok önemliyse Chrome Geliştirici Araçları'ndaki kontrast sorunlarını keşfedebilirsiniz.
Kontrastı artırma ve renkleri tersine çevirme
Yüksek kontrast modları, az görenler için sayfadaki içerikte gezinmeyi kolaylaştırabilir. Yüksek kontrast ayarlamanın birkaç yolu vardır.
Hem macOS hem de Windows, işletim sistemi genelinde kontrast seviyesini artırma yolları sunar.
Kullanıcılar ön plan ve arka plan renklerini tersine çevirmeyi de tercih edebilirler (örneğin, macOS'te). Bu, özellikle koyu modları desteklemeyen web siteleri ve uygulamalar için kullanışlıdır.
Geliştiriciler olarak, bu ayarları açıp kullanılabilirliği manuel olarak doğrulayarak arayüzünüzün hâlâ görünür ve kullanılabilir olduğundan emin olmak için test yapabilirsiniz.
Örneğin, bir gezinme çubuğunda hangi sayfanın seçildiğini belirtmek için hoş bir arka plan rengi kullanılabilir. Sayfayı yüksek kontrast modunda görüntülerseniz, bu incelik tamamen kaybolur ve okuyucu hangi sayfanın etkin olduğunu daha iyi anlar.
AA veya daha yüksek kontrast düzeyi ile karşı karşıyaysanız renkler ters çevrildiğinde veya yüksek kontrastlı olduğunda içeriğiniz beklendiği gibi çalışmalıdır. Ancak deneyimin beklendiği gibi olduğundan emin olmak için yine de test etmek gerekir.