Yer Tutucu Metin Kontrastı WCAG Kontrolü

Yer Tutucu Metin Kontrastını Kontrol Edin

Yer tutucu metin, web’deki en yaygın WCAG hatalarından biridir. Tarayıcıların yer tutuculara uyguladığı varsayılan açık gri, neredeyse her zaman WCAG AA tarafından talep edilen %4.5:1 kontrast oranının altında kalır. Bu örnek, beyaz arka plan üzerinde tipik bir yer tutucu grisi (#9ca3af) test eder.

Yer Tutucu Kontrastı Neden Düşündüğünüzden Daha Sık Başarısız Olur

Çoğu CSS çerçevesi, WCAG’ı başaramayan yer tutucu renkleriyle gönderilir. Tailwind’in varsayılan placeholder-gray-400’ü (#9ca3af) beyaz üzerinde yalnızca %3.14:1 kontrast verir. Bootstrap’in .form-control::placeholder’ı rgba(0,0,0,.4) kullanır ve bu yaklaşık olarak #666666’ya karşılık gelir, %5.74:1 ile zor geçer. Material UI’nin varsayılan yer tutucusu karanlık modda başarısız olur.

Sorun, yer tutucu metnin tipik olarak gövde metninden daha küçük olması (14-16px) nedeniyle büyütülür; bu da büyük metin eşiği olan %3:1 yerine katı %4.5:1 gereksinimine düştüğü anlamına gelir.

Yer Tutucu Kontrast Örnekleri

Çözüm Bir CSS Satırıdır

Çoğu yer tutucu kontrast sorunu bir CSS özelliğine indirgenir. Tarayıcı veya çerçeve varsayılanına güvenmek yerine, açıkça aşırına yazın:

/* WCAG AA'yı Başarısız Olur */
input::placeholder {
  color: #9ca3af;
}

/* WCAG AA'yı Karşilar */
input::placeholder {
  color: #6b7280;
}

Tailwind’de placeholder-gray-400 yerine placeholder-gray-500 kullanın:

<!-- Başarısız -->
<input class="placeholder-gray-400" />

<!-- Geçer -->
<input class="placeholder-gray-500" />

Nasıl Kullanılır

1. Yer tutucu metin renginizi ön plan alanına girin
2. Giriş alanının arka plan rengini arka plan alanına girin
3. Oranın WCAG AA için %4.5:1 karşılayıp karşılamadığını kontrol edin
4. Başarısız olursa, geçen daha koyu bir ton bulmak için önerileri kullanın
5. Giriş stilleriniz için güncellenmiş CSS’i kopyalayın

Renk Ötesinde: Yer Tutucu Erişilebilirliği

Kontrast, yer tutucu erişilebilirliğinin bir parçasıdır. WCAG ayrıca yer tutucu metnin bir girişi etiketlemenin tek yolu olmamasını (SC 1.3.1) ve girişin erişilebilir bir isme sahip olmasını (SC 4.1.2) şart koşar. Yer tutucu metni her zaman görünür bir etiket veya aria-label ile eşleştirin. Regex Doğrulayıcı giriş desenlerini test etmeye yardımcı olabilir, ancak girişin görsel erişilebilirliği ayrı bir endişe konusudur.