Renk Kontrast Denetimi
Metin ve arka plan renginizin okunabilirlik standartlarını (WCAG AA/AAA) karşılayıp karşılamadığını ölçün.
Tamamen ücretsiz · Kayıt gerekmez · Sınırsız kullanım
Renk kontrastı kaç olmalı, WCAG AA ne demek?
Kontrast oranı, metin rengi ile arka plan rengi arasındaki parlaklık farkını ölçer ve 1:1 ile 21:1 arasında bir değer alır. WCAG erişilebilirlik standardına göre normal boyutlu metin için en az 4,5:1 (AA seviyesi), daha katı AAA seviyesi için 7:1 gerekir. 18 punto ve üzeri büyük metinlerde sınır 3:1'e düşer. Düşük kontrast yalnızca görme güçlüğü çekenleri değil, güneş altında telefona bakan herkesi etkiler. Bu araç iki rengi karşılaştırıp oranı hesaplar ve canlı önizleme gösterir.
- Normal metin AA
- En az 4,5:1
- Normal metin AAA
- En az 7:1
- Büyük metin AA
- En az 3:1
- Sunucuya istek
- Gönderilmez
WCAG kontrast sonucu
-Renk Kontrast Denetimi sonuçlarını nasıl yorumlamalı?
Kontrast oranı ne ölçer?
Metin ile arka planın algılanan aydınlık farkını ölçer. En düşük değer 1:1 (aynı renk, hiç okunmaz), en yüksek değer 21:1 (siyah üzerine beyaz). WCAG hesabı basit bir renk farkı değil; her kanal önce gama düzeltmesinden geçirilir, çünkü göz parlaklığı doğrusal algılamaz.
4,5:1 neden sınır kabul edilir?
Bu eşik, yaklaşık 20/40 görme keskinliğine sahip bir kullanıcının metni rahat okuyabildiği seviyedir. 40 yaş üstü nüfusun büyük bölümü bu aralıktadır. Sınırın altındaki metin genç ve iyi gören biri için okunabilir görünse de ziyaretçilerinizin önemli bir kısmı zorlanır.
Büyük metin kuralı daha esnektir
WCAG büyük metni 24 piksel ve üzeri normal yazı veya 19 piksel ve üzeri kalın yazı olarak tanımlar. Bu boyutlarda harf gövdesi kalınlaştığı için 3:1 oran yeterli sayılır. Marka renginiz gövde yazısında kalıyorsa başlıklarda kullanmayı düşünebilirsiniz.
Gri metin en sık yapılan hata
Tasarımlarda çok sevilen açık gri (#999999 civarı) beyaz zeminde yalnızca 2,8:1 oran verir ve AA seviyesinde kalır. Yazıyı yumuşatmak için gri kullanmak istiyorsanız #6b7280 ve daha koyusunu tercih edin.
Sık sorulanlar
Doğrudan bir kontrast sıralama faktörü yok. Ancak okunamayan metin kullanıcıyı sayfadan hızla uzaklaştırır; artan çıkış oranı ve azalan sayfada kalma süresi dolaylı olarak sıralamayı etkiler. Ayrıca Lighthouse erişilebilirlik puanınız düşer, bu da teknik denetimlerde karşınıza çıkar.
Bu araç düz renkler için çalışır. Yarı saydam bir katman kullanıyorsanız önce nihai rengi hesaplayın: tarayıcının geliştirici araçlarında öğeyi seçip hesaplanan arka plan rengini alabilirsiniz. Degrade zeminlerde ise en riskli noktayı, yani metne en yakın açıklıktaki bölgeyi ölçün.
Hayır. WCAG logoları ve tamamen dekoratif öğeleri kontrast kuralının dışında tutar. Ancak buton kenarlığı, form çerçevesi, ikon ve odak halkası gibi işlevsel arayüz öğeleri 3:1 kuralına tabidir. Görünmeyen bir form çerçevesi, okunmayan bir yazı kadar sorun yaratır.