
Metin ve arka plan rengi girin, araç kontrastın yeterli olup olmadığını gösterecektir. Hesaplamalar, farklı içerik türleri için minimum kontrast değerlerini tanımlayan uluslararası erişilebilirlik standardı WCAG 2.1'e dayanmaktadır.
Kontrast oranı
21.00 : 1
Normal metin
Örnek WCAG 2.1 kontrast metni
Büyük / kalın metin
Örnek WCAG 2.1 kontrast metni
Simge
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.
Okunabilirliği kontrol etmek sadece birkaç saniye sürer:
Onaltılık format — web tasarımında en yaygın olanı. # ile başlar ve 3 veya 6 karakter (0-9 rakamları ve A-F harfleri) içerir.
#fff — beyaz (kısaltma)#ffffff — beyaz (tam form)#1a73e8 — maviKontrast oranı
8.59:1
Normal metin
Örnek normal metin
Büyük metin
Renkleri girdikten sonra araç sonuçları üç bölümde gösterir:
Yeşil gösterge gereksinimin karşılandığı anlamına gelir. Kırmızı gösterge kontrastın çok düşük olduğu ve iyileştirilmesi gerektiği anlamına gelir.
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:
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:
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.
| Funkcja | Seviye AA (minimum) | Seviye AAA (gelişmiş) |
|---|---|---|
| Normal metin — min. 4.5:1 | ||
| Normal metin — min. 7:1 | ||
| Büyük / kalın metin — min. 3:1 | ||
| Büyük / kalın metin — min. 4.5:1 | ||
| Simgeler ve UI öğeleri — min. 3:1 | ||
| Yasal olarak zorunlu (AB yönergesi) | ||
| Anahtar içerik için önerilen |
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.
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.
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.
Okunabilirlik, birinin metin okuması veya bir UI öğesini tanıması gereken her yerde önemlidir:
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:
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.