Tasarımcılar İçin WCAG Renk Kontrastı
4.5:1 kuralı, kontrast oranı hesabı ve herhangi bir renk çiftini kontrol eden ücretsiz araçlar.
Metniniz WCAG AA kontrastını karşılamıyorsa, tahmini 285 milyon görme engelli kişi onu okuyamaz. Üstelik AB ve ABD'de giderek daha sallantılı bir yasal zemindesiniz. İyi haber: kural basit.
4.5:1 kuralı
Gövde metni, WCAG AA'yı geçmek için arka planına karşı en az 4.5:1 kontrast oranına sahip olmalıdır. Büyük metin (24px+ normal veya 18px+ kalın) daha düşük bir çıtaya sahiptir: 3:1.
AAA uyumu için: gövde metni 7:1, büyük metin 4.5:1.
Kontrast oranı nasıl hesaplanır
WCAG, bağıl parlaklık kullanır — her rengi belirli bir formülle bir parlaklık değerine (0 = siyah, 1 = beyaz) dönüştürün, ardından (L1 + 0.05) / (L2 + 0.05) hesaplayın; burada L1 daha açık renktir.
Matematiği yapmanıza gerek yok — herhangi iki rengi girip oranı görmek için ücretsiz kontrast denetleyicimizi kullanın.
Yaygın başarısızlık durumları
- Açık gri üzerine beyaz — #999 üzerinde #fff = 2.85 (başarısız). #767676 üzerinde #fff = 4.54 (geçer).
- Sarı üzerine beyaz — neredeyse her zaman başarısız. Sarı üzerinde koyu metin kullanın.
- Gövde metninde renkli bağlantılar — çoğu mavi bağlantı beyaz üzerinde geçer ancak açık gri üzerinde başarısız olur. Gerçek çevreleyen arka planı test edin.
- Harika görünen marka renkleri — genellikle başarısız olurlar. Beyaza yakın bir arka plan ekleyin veya metni koyulaştırın.
Erişilebilir renk çiftleri seçme
Üç güvenilir desen:
- Açık üzerinde koyu — #1f2937 üzerinde #fff = 14:1 (mükemmel).
- Koyu üzerinde beyaz — #1f2937 üzerinde #fff = 14:1 (mükemmel).
- Vurgu üzerinde koyu — #fbbf24 üzerinde #1f2937 = 9:1 (düğmeler için mükemmel).
Metnin ötesinde
WCAG 2.1 ayrıca metin dışı öğeler (düğmeler, odak halkaları, form kenarlıkları) için 3:1 gerektirir. Denetleyici her ikisini de işler.
Widget'larınızla savaşmayan duvar kağıtları
Saat widget'ları ve bildirimlerin arkasına duvar kağıdı yerleştiren bir tasarımcıysanız, widget bölgelerinde kontrastı 5:1'in altında olan duvar kağıtlarını seçin. Gauss bulanıklığı aracımız, widget okunabilirliğini artırmak için herhangi bir duvar kağıdının yoğun alanlarını yumuşatabilir.
Ücretsiz araçlarımızı deneyin
Bu kılavuzların çoğu, hemen kullanabileceğiniz uygulamalı bir araçla birlikte gelir — ilk kullanım için kayıt gerekmez:
- Görsel yeniden boyutlandırıcı — piksel mükemmel küçültme + büyütme.
- WebP'ye dönüştür — JPG'den %30-50 daha küçük dosyalar.
- Arka plan kaldırıcı — tek tıkla kesme, şeffaf PNG.
- Favicon oluşturucu — tek kaynaktan her tarayıcı boyutu.
- Sosyal medya yeniden boyutlandırıcı — her platformun tam boyutları.
- Toplu işleme — herhangi bir aracı aynı anda 200 görsele kadar uygulayın.
Tam araç kataloğuna göz atın.
