Yaygın bir başarısızlık
Beyaz (#ffffff) arka plan üzerinde #999999 ön plan
Kontrast oranı 2,85:1 — normal metin için AA'yı geçemez (4,5:1 gerekir), bu boyutta ne AA ne de AAA'yı geçer.
Renk Kontrastı Kontrolü
Bir metin ve arka plan renk çiftinin WCAG AA veya AAA kontrastını karşılayıp karşılamadığını kontrol edin.
Büyük metin önizlemesi
Normal metin önizlemesi — çabuk kahverengi tilki tembel köpeğin üzerinden atlar.
17.40:1
✓ AA — normal metin✓ AA — büyük metin✓ AAA — normal metin✓ AAA — büyük metin
Bu araç işinize yaradı mı?
Bu araç hakkında
WCAG (Web İçeriği Erişilebilirlik Yönergeleri), az gören kişilerin ya da güneş ışığında soluk bir ekranda okuyan herkesin metni okuyabilmesi için metin ile arka planı arasında minimum bir kontrast oranı belirler. Oran, her iki rengin göreli parlaklığından türetilen tek bir sayıdır — hangi rengin metin, hangisinin arka plan olduğu önemli değildir, yalnızca ne kadar birbirinden uzak oldukları önemlidir.
Nasıl kullanılır
- Renk paleti ile ya da bir hex değeri yazarak bir ön plan (metin) ve arka plan rengi seçin.
- Kontrast oranı ve canlı önizleme anında güncellenir.
- Rozetleri kontrol edin: AA, çoğu sitenin hedeflediği yasal/pratik minimumdur (normal metin için 4,5:1, büyük metin için 3:1 — 18pt veya 14pt kalın ve üzeri); AAA daha katı, gelişmiş standarttır.
Örnekler
Sık karşılaşılan sorunlar
- Tasarımım büyük metin için AA'yı geçiyor ama normal metin için başarısız oluyor.
- Bu beklenen ve tasarım gereğidir — WCAG, daha büyük karakterlerin daha düşük kontrastta bile okunabilir kalması nedeniyle büyük metin için özellikle daha düşük bir oranı (3:1) kabul eder. Ya kontrastı artırın ya da bu renk eşleşmesini yalnızca başlıklar ve diğer büyük metinlerle sınırlı tutun.