Renk kontrastı ve okunabilirlik kontrolü

Okunabilirlik, metin rengi ile arka plan rengi arasındaki parlaklık farkıdır. Fark ne kadar büyükse, metni okumak o kadar kolaydır. Çok düşük kontrast içeriğin okunmasını zorlaştırır — özellikle görme bozukluğu olan kişiler, yaşlılar veya zor aydınlatma koşullarında (ör. doğrudan güneş ışığında telefonda).

Dünya Sağlık Örgütü'ne (WHO) göre, dünya genelinde yaklaşık 2,2 milyar insan bir tür görme bozukluğuna sahiptir. Ayrıca milyonlarca kişi renk körlüğüne sahiptir (erkeklerin yaklaşık %8'i ve kadınların %0,5'i) ve daha fazlası yaşa bağlı görme kaybı yaşamaktadır.

Araç, kontrast oranını WCAG 2.1 (Web İçerik Erişilebilirlik Yönergeleri)'nde belirtilen formülü kullanarak hesaplar — uluslararası dijital erişilebilirlik yönergeleri. Sonuç, monitör ayarlarından veya bireysel renk algısından bağımsız olarak renklerin yeterince okunabilir olup olmadığının nesnel bir değerlendirmesini sağlar.

Araç, kontrast oranını 1:1 (kontrast yok) ile 21:1 (maksimum kontrast — beyaz üzerine siyah) arasında bir ölçekte gösterir. Sonuç, WCAG standardında tanımlanan eşiklerle karşılaştırılır:

• Normal metin — Seviye AA (minimum standart) için en az 4.5:1 veya Seviye AAA (gelişmiş standart) için 7:1 gerektirir. 18pt (24px) altı veya 14pt (18.5px) kalın altı metinlere uygulanır.
• Büyük / kalın metin — Seviye AA için en az 3:1 veya Seviye AAA için 4.5:1 gerektirir. 18pt (24px) veya 14pt (18.5px) kalından itibaren metinlere uygulanır — başlıklar, düğmeler, vurgular.
• Simgeler ve UI öğeleri — Seviye AA için en az 3:1 gerektirir. Bilgi ileten simgelere, düğmelere, form alanlarına ve diğer arayüz öğelerine uygulanır.

Seviye AA, AB Web Erişilebilirlik Yönergesi dahil birçok ülkedeki dijital erişilebilirlik düzenlemelerinin gerektirdiği minimumdur. Seviye AAA daha iyi okunabilirlik sağlar ancak tüm öğeler için her zaman pratik değildir.

Kontrast çok düşükse, deneme yanılma yoluyla doğru rengi aramanız gerekmez. Eşleştir özelliği otomatik olarak seçilen kontrast eşiğini karşılayan bir metin renk varyantı bulur.

Eşleştirme nasıl çalışır:

1. Listeden eşleştirme hedefini seçin — ör. normal metin için AA veya büyük metin için AAA.
2. Eşleştir düğmesine tıklayın.
3. Araç, metin renginin açıklık varyantlarını arayacak ve gereksinimleri karşılayan en yakın olanı önerecektir.
4. Önerilen renk panoya kopyalanabilir veya hemen yeni metin rengi olarak ayarlanabilir.

Algoritma, orijinal rengin tonunu ve doygunluğunu korur, yalnızca açıklığı değiştirir. Önerilen renk, erişilebilirlik standardını karşılarken görsel kimlikle tutarlı kalır.

Renk formatı hata mesajı görüyorum

Renk formatını kontrol edin. HEX kodu # ile başlamalı ve 3 veya 6 karakter içermelidir (ör. #fff veya #ffffff). RGB formatı için değerlerin virgülle ayrıldığından ve 0-255 aralığında olduğundan emin olun.

Eşleştir özelliği uygun renk bulamıyor

Arka plan ve metin aynı tonda benzer parlaklığa sahip olduğunda, algoritma tonu değiştirmeden gereksinimleri karşılayan bir varyant bulamayabilir. Bu durumda arka plan rengini değiştirmeyi veya tamamen farklı bir metin rengi seçmeyi düşünün.

Renk seçicideki renk girilen kodla eşleşmiyor

Tarayıcıdaki renk seçici yalnızca şeffaflıksız HEX formatını destekler. RGBA veya HSLA formatında şeffaflıklı bir renk girerseniz, seçici yalnızca renk kısmını (alpha olmadan) gösterecektir. Kontrast hesaplamaları yine de şeffaflığı dikkate alır.

Renk körlüğü erkeklerin yaklaşık %8'ini ve kadınların %0,5'ini etkiler. Renk körlüğü olan kişiler, parlaklık kontrastı yeterli olsa bile belirli renk çiftlerini ayırt etmekte güçlük çekebilir.

En yaygın renk körlüğü türleri:

• Deuteranopi — yeşil ve kırmızıyı ayırt etme güçlüğü (en yaygın form)
• Protanopi — kırmızıyı görme güçlüğü
• Tritanopi — mavi ve sarıyı görme güçlüğü (nadir)

Bu araç, tüm kullanıcılar için önemli olan parlaklık kontrastını kontrol eder. Ancak tasarım yaparken sorunlu renk kombinasyonlarından (ör. yeşil arka plan üzerinde kırmızı metin) kaçınmak ve bilgi iletmek için yalnızca renge güvenmemek — şekiller, simgeler ve metin de kullanmak önemlidir.