Bir kontrast denetleyicisi neyi ölçer?
Bir kontrast denetleyicisi, bir ön plan renginin ve arka plan renginin göreli parlaklığını karşılaştırır. Sonuç, renklerin görsel olarak aynı olduğu 1:1'den siyah ile beyazın maksimum kontrastına kadar 21:1'e kadar bir oran olarak gösterilir.
Bu araç, normal metin ve büyük metin için WCAG tarzı geçme ve kalma göstergeleri raporlar. Erken tasarım kararları, bileşen durumları, tema token'ları ve daha kapsamlı bir erişilebilirlik incelemesinden önce hızlı kontroller için yararlıdır.
Sonuçları nasıl okumalı
| Check | Minimum oran | Meaning |
|---|---|---|
| AA normal metin | 4.5:1 | Normal gövde metni için yaygın hedef. |
| AA büyük metin | 3:1 | Harf şekillerinin okunması daha kolay olduğu daha büyük veya daha kalın metinlere uygulanır. |
| AAA normal metin | 7:1 | Yüksek erişilebilirlik bağlamlarında normal metin için daha sıkı hedef. |
| AAA büyük metin | 4.5:1 | Büyük metin için daha sıkı bir hedeftir. |
Bu aracın kanıtlamadığı şeyler
Bir oran güçlü bir sinyaldir, ancak tam bir erişilebilirlik denetimi değildir. Gerçek okunabilirlik tipografi, yazı tipi kalınlığı, hover/focus durumları, devre dışı bırakılmış durumlar, çevreleyen renkler, ekran kalitesi ve metnin resimler veya gradyanlar üzerinde görünüp görünmediğine de bağlıdır.
- Saydamlık ve gradyanlar ayrı inceleme gerektirir.
- Küçük simgeler ve ince çizgiler, yakınlardaki metinden daha güçlü kontrast gerektirebilir.
- Marka renkleri bir eşleştirmede geçebilir ve başka bir eşleştirmede başarısız olabilir.
- QR tarama kontrastı ile metin okunabilirlik kontrastı ilişkili ama aynı kontrol değildir.
Zayıf kontrastı iyileştirmenin yolları
Ön planı koyulaştırın
Açık arka planlar için, metin rengini daha koyu bir nötr tona veya daha güçlü bir marka tonuna yaklaştırın.
Arka planı açın
Küçük arka plan değişiklikleri, ön plan token'ını değiştirmeden bir marka renginin geçmesini sağlayabilir.
Metin boyutunu veya kalınlığını artırın
Büyük veya daha kalın metinlerin AA eşiği daha düşüktür, ancak yine de yeterli görsel ayrım olması gerekir.
Her durumu kontrol edin
Hover, focus, devre dışı, seçili ve hata durumları genellikle farklı renk çiftleri kullanır.
Sıkça Sorulan Sorular
Bu tam bir WCAG uyumluluk denetimi mi?
Hayır. Renk çiftleri için WCAG tarzı kontrast eşiklerini hesaplar. Tam bir inceleme ayrıca düzen, klavye davranışı, semantik yapı, focus durumları, metin alternatifleri ve gerçek render edilmiş tipografiyi de kontrol eder.
Büyük metin nedir sayılır?
WCAG rehberi, büyük metni kabaca 18 pt normal metin veya 14 pt kalın metin ve üzeri olarak değerlendirir. Web çalışmasında, yalnızca tasarım etiketiyle sınırlı kalmayarak gerçek render edilen boyutu ve ağırlığı doğrulayın.
Saydam renkler için bunu kullanabilir miyim?
Bu kompakt denetleyici opak sRGB renklerini kullanır. UI'niz şeffaflık kullanıyorsa, önce nihai render edilmiş ön planı ve arka planı karıştırın, ardından ortaya çıkan çifti kontrol edin.
AA geçişi tasarımın her zaman okunaklı olduğu anlamına mı gelir?
Her zaman değil. Çok ince yazı tipleri, küçük UI etiketleri, yoğun arka planlar ve düşük kaliteli ekranlar metni hâlâ okunması zor hale getirebilir. Oranı önemli bir sinyal olarak değerlendirin.
Bu QR kod kontrastıyla aynı mı?
Hayır. QR kod kontrastı tarayıcı güvenilirliğini etkilerken, bu araç metin okunabilirliği eşiklerine odaklanır. Matematiksel olarak ilişkilidir, ancak pratik karar farklıdır.