Metin kontrast oranları ve ADA

Tutturulması gereken rakamlar

Metin ve metin görselleri, arka planına karşı en az 4,5:1 kontrast oranına sahip olmalıdır. Büyük metin için en az 3:1 gerekir. Büyük, en az 18 punto ya da kalınsa en az 14 puntodur; CSS pikseli olarak yaklaşık 24 px ya da kalın için yaklaşık 18,5 px.

Eşikler kesindir. 4,499:1 sonucu başarısızdır, bu yüzden yuvarlamayın. Oran iki rengin göreli parlaklığından hesaplanır ve 1:1 (kontrast yok) ile 21:1 (beyaz üzerinde siyah) arasında değişir.

İstisnalar dardır. Büyük metnin eşiği daha düşüktür (3:1). Tesadüfi metin muaftır: etkin olmayan (devre dışı) bir denetimin içindeki metin, salt süs olan metin, kimsenin göremediği metin ya da önemli ölçüde başka görsel içerik taşıyan bir resmin yalnızca parçası olan metin. Logotipler de muaftır. Geri kalan her şey sayılır; yer tutucu metin, üzerine gelince, odak ve ziyaret edilmiş durumlardaki metin ve metin görselleri dahil.

Soluk metinle kimler zorlanır

Az gören, katarakt hastası ya da renk görme farklılığı olan kişiler ek parlaklık farkına ihtiyaç duyar. Güneşte telefondan okuyan ya da vardiya sonunda yorgun bir okuyucu da öyle. Beyaz üzerinde soluk gri, tasarımcının kalibre monitöründe zarif görünür, başka her yerde kaybolur.

Kamu ve okul sayfalarında kontrast

DOJ'un web rehberi zayıf renk kontrastını yaygın bir engel olarak sayar ve ölçmesi en kolay sorunlardan biridir. Siteye çoğunlukla baskı için seçilmiş bir marka paletiyle ya da ikincil metne soluk gri uygulayan bir tedarikçi temasıyla girer: çalışma saatleri, ücret notları, son tarihler, form ipuçları.

Bu ikincil satırlar çoğu kez en önemli bilgiyi taşır; bir izin başvurusunun son saati ya da kayıt için belge listesi gibi. Bir sayfa üstte iyi görünüp altta başarısız olabilir; bu yüzden yalnızca üst bölümü değil, şablonun tamamını kontrol edin.

Sefer planlayıcıda ikincil metin

Sefer ayrıntıları, peron numaraları ve gecikme notları çoğunlukla açık griyle yazılır. Bunları ölçülmüş bir değere koyulaştırmak hiçbir şeye mal olmaz.

.kalkis-notu {
  color: #9a9a9a;      /* beyaz üzerinde 2,81:1, başarısız */
  font-size: 0.875rem;
}

.kalkis-notu {
  color: #5f5f5f;      /* beyaz üzerinde 6,39:1 */
  font-size: 0.875rem;
}

Renkli paneller ve hover durumları

Renkli bir arka plan, beyazda rahatça geçen metnin oranını düşürür. Aşağıdaki çift kıl payı farkla başarısız olur; otomatik üretilen paletlerde bu tipiktir.

.saat-karti {
  background: #f3f4f6;
  color: #6b7280;   /* 4,39:1, 4,5:1'in hemen altında */
}

.saat-karti {
  background: #f3f4f6;
  color: #4b5563;   /* 6,87:1 */
}

Yalnızca durağan hâli değil, her etkileşim durumunu kontrol edin. Bir düğme durağanken geçip imleç üzerine gelince kalabilir.

.kayit-dugme       { background: #1565c0; color: #fff; } /* 5,75:1 */
.kayit-dugme:hover { background: #64a0e8; color: #fff; } /* 2,71:1 */

.kayit-dugme       { background: #1565c0; color: #fff; } /* 5,75:1 */
.kayit-dugme:hover { background: #0d47a1; color: #fff; } /* 8,63:1 */

Durum etiketleri ve büyük metin kuralı

Beyaz üzerinde turuncu metin, "beklemede" etiketlerinin klasik hatasıdır. #a85d00 gibi daha koyu bir kehribar beyaz üzerinde 4,96:1 ile geçer; #ff9800 ise yalnızca 2,16:1 sağlar. Büyük metin 3:1 eşiğini kullanabilir, ama yalnızca gerçekten en az 18 punto ya da kalın 14 punto ise.

Yerel uygulamalarda kontrast

Ölçüt yerel uygulamalardaki metne de uygulanır. Sabit kodlanmış açık griler olağan suçludur; anlamsal ya da ölçülmüş renkleri tercih edin.

// SwiftUI
Text("Son tarih: 15 Nisan")
    .foregroundColor(Color(white: 0.6))   // beyaz üzerinde yaklaşık 2,85:1

// SwiftUI
Text("Son tarih: 15 Nisan")
    .foregroundColor(Color(white: 0.35))  // beyaz üzerinde yaklaşık 7:1

// Jetpack Compose
Text("Son tarih: 15 Nisan", color = Color(0xFF999999))  // beyaz üzerinde 2,85:1

// Jetpack Compose
Text("Son tarih: 15 Nisan", color = Color(0xFF595959))  // beyaz üzerinde 7,0:1

Nasıl ölçülür

1. Önce bakın. Gözlerinizi kısarak ya da ekran parlaklığını düşürerek sayfaya bakın; kaybolan metin adaydır.
2. CSS'ten ya da tarayıcının denetçisinden gerçek ön plan ve arka plan değerlerini alın ve bir kontrast denetleyicisiyle oranı hesaplayın. Görsel ya da gradyan üzerindeki metinde, metnin arkasındaki en kötü noktada ölçün.
3. Hover, odak, ziyaret edilmiş, devre dışı gibi görünen ve hata durumlarını tek tek kontrol edin.
4. Geri kalanın büyük kısmını yakalamak için otomatik tarama çalıştırın, sonra örnekleyerek doğrulayın. Temiz bir rapor, her çiftin test edildiği anlamına gelmez.

Sık yapılan hatalar ve yayın öncesi liste

• Kontrastı tek bir iyi monitörde gözle değerlendirmek.
• 3:1 büyük metin eşiğinin her kalın metne ya da her başlığa uygulandığını sanmak.
• Taranmış duyurular gibi görsellerin içindeki metni unutmak.
• Metne opaklık uygulayıp etkin rengi CSS değerinden daha açık hâle getirmek.
• Bir marka rengini marka olduğu için muaf saymak; yalnızca logotipler muaftır.

Yayına almadan önce:

• Normal metin her durumda en az 4,5:1, büyük metin en az 3:1.
• Fotoğraf üzerindeki metnin bir kaplaması ya da düz bir zemini var.
• Yer tutucu ve ipucu metinleri de ölçüldü.
• Renkler ortak tasarım değişkenlerinde duruyor, bir düzeltme her yere yansıyor.

Aynı oran fikri, farklı bir eşikle simgeler ve kenarlıklar için de geçerlidir; metin dışı kontrast ölçütüne bakın. Kontrastın diğer sorunlar arasındaki yeri için yaygın engeller sayfasını okuyun.

Kaynaklar

• Understanding SC 1.4.3: Contrast (Minimum) (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.