Arayüz bileşeni kontrastı ve ADA

3:1 gereken öğeler

İki tür görsel bilgi, komşu renklere karşı en az 3:1 kontrast oranı ister: kullanıcı arayüzü bileşenleri ve grafik nesneler. Bir bileşen için bu, denetimi bulmak ve durumunu anlamak için gereken kısımlar demektir: metin alanının kenarı, onay kutusunun kutusu, seçili sekme işareti ya da odak göstergesi gibi. Grafikler için, içeriği anlamak için gereken kısımlar demektir: bir grafikteki çizgiler ya da tek başına duran bir simge gibi.

Her şey kapsanmaz. Devre dışı denetimler, tarayıcının belirleyip değiştirilmeden bırakılan görünüm, hover efektleri, salt süs grafikler ve yalnızca yakındaki metindeki bilgiyi tekrar eden grafikler muaftır. Tam görünümün zorunlu olduğu logolar ve fotoğraflar da muaftır. Grafiklerin içindeki metin ise metin kontrastı ölçütüne göre değerlendirilir.

Kamu formlarındaki soluk denetimler

Soluk gri alan kenarlıkları, açık mavi üzerinde beyaz simgeler ve neredeyse aynı tonda odak halkaları kamu ve okul sitelerinde sık görülür; çoğu zaman bir tasarım sistemi sade bir görünüm için ayarlandığı içindir. Nereye yazacağını ya da sonuçların hangi sayfasında olduğunu göremeyen vatandaşın, metin kontrastı ne kadar iyi olursa olsun, önünde net bir yol yoktur.

En yararlı alışkanlık, denetim başına tek bir soru sormaktır: metin kaldırılsa bu öğeyi yine bulabilir ve açık, kapalı, seçili ya da odakta olup olmadığını söyleyebilir miyim? Bu soru, stil kılavuzunda iyi görünen ilçe ya da okul sitelerindeki arama kutularını, sayfalamayı, anahtarları ve takvim gün seçicilerini yakalar.

Yalnızca soluk dolguyla belirlenen alanlar

Beyaz bir sayfada biraz gri bir dikdörtgenden ibaret bir alanın sınırı yaklaşık 1,12:1 orana sahiptir. Kenarın 3:1 bir kenarlığa ya da kendisi en az 3:1 olan başka bir ipucuna ihtiyacı vardır.

.arama input {
  background: #f2f2f2;   /* sayfaya karşı 1,12:1 */
  border: 0;
}

.arama input {
  background: #ffffff;
  border: 2px solid #6b6b6b;   /* sayfaya karşı 5,33:1 */
}

Çubuklar, dilimler ve harita simgeleri

Bir grafikte veriyi taşıyan işaretlerin arka plana karşı ve önemli olduğu yerde birbirine karşı 3:1'e ihtiyacı vardır. Beyaz üzerinde soluk dolgular kaybolur, soluk komşular birbirine karışır.

.cubuk { fill: #c6dbef; }   /* beyaz üzerinde 1,42:1 */

.cubuk { fill: #2171b5; }   /* beyaz üzerinde 5,13:1 */
/* her çubuğu değeriyle de etiketleyin; böylece tek ipucu renk olmaz */

Benzer renkli komşu alanlar kaçınılmazsa, onları 3:1'i karşılayan bir çizgiyle ayırın.

Koyu üst bilgide odak göstergeleri

Odak halkası bir kullanıcı arayüzü bileşeni durumudur; bu yüzden arkasındakine karşı 3:1 gerekir. Lacivert bir üst bilgideki orta mavi halka bunun altına düşebilir. Koyu üst bilgide beyaz ya da açık bir halka basit bir çözümdür. Tarayıcının varsayılan odak halkası ancak değiştirmediyseniz muaftır.

.site-ust a:focus-visible {
  outline: 2px solid #1565c0;   /* #0b2545 üzerinde 2,68:1 */
}

.site-ust a:focus-visible {
  outline: 3px solid #ffd54f;   /* #0b2545 üzerinde 10,9:1 */
  outline-offset: 2px;
}

Yerel uygulamalarda denetimler

Yerel uygulamalardaki metin alanı çerçeveleri de aynı kurala tabidir. Taslakta düzgün görünen açık ince çizgileri açık havada bulmak zordur.

// SwiftUI
TextField("Parsel numarası", text: $parsel)
    .overlay(RoundedRectangle(cornerRadius: 8)
        .stroke(Color(white: 0.85)))   // beyaz üzerinde yaklaşık 1,4:1

// SwiftUI
TextField("Parsel numarası", text: $parsel)
    .overlay(RoundedRectangle(cornerRadius: 8)
        .stroke(Color(white: 0.45), lineWidth: 1.5))   // beyaz üzerinde yaklaşık 4,7:1

// Jetpack Compose
OutlinedTextField(
    value = parsel, onValueChange = { parsel = it },
    label = { Text("Parsel numarası") },
    colors = OutlinedTextFieldDefaults.colors(
        unfocusedBorderColor = Color(0xFFD0D0D0))   // 1,54:1
)

// Jetpack Compose
OutlinedTextField(
    value = parsel, onValueChange = { parsel = it },
    label = { Text("Parsel numarası") },
    colors = OutlinedTextFieldDefaults.colors(
        unfocusedBorderColor = Color(0xFF757575))   // 4,61:1
)

Nasıl test edilir

1. Sayfadaki denetimleri listeleyin: alanlar, kenarlığa dayanan düğmeler, onay kutuları, radyo düğmeleri, sekmeler, anahtarlar, sayfalama, simge düğmeleri ve grafik işaretleri.
2. Her biri için metin kalksa onu bulup durumunu okuyabilir miydiniz diye sorun.
3. Renkleri denetçiyle ya da renk damlalığıyla alıp komşu renge karşı oranı hesaplayın. Odak için halkayı arkasındaki sayfaya karşı kontrol edin.
4. Durumları test edin: seçili, işaretli, odaklı ve hata. Yalnızca durağan hâl yetmez.
5. Taramaya güvenmeyin; çoğu araç kenarlıkları ve durumları göremez.

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

• 3:1 kuralını metne, 4,5:1 kuralını simgelere uygulamak. Metin ve metin dışı öğelerin eşikleri farklıdır.
• Bir simgenin oranını kapsayıcısına karşı kontrol edip arkasındaki sayfaya karşı kontrol etmemek.
• Ölçülebilir bir yedek eklemeden varsayılan odak çerçevesini kaldırmak.
• Soluk bir dolguyu tek seçili durum olarak kullanmak.

Yayına almadan önce:

• Alan sınırları, onay kutusu kutuları ve anahtarlar çevrelerine karşı 3:1'e ulaşıyor.
• Seçili, işaretli ve odaklı durumlar 3:1'de görünür.
• Anlam taşıyan simgeler ve grafik işaretleri 3:1'e ulaşıyor.
• Grafiklerin içindeki metin hâlâ metin kontrast oranlarını karşılıyor.

Metin karşılığı asgari kontrast ölçütüdür. Daha geniş sorun kümesi için yaygın engeller sayfasına bakın.

Kaynaklar

• Understanding SC 1.4.11: Non-text Contrast (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.