Tek ipucu olarak renk: kamu hizmet sayfaları

Renk tek mesaj olduğunda

Bu ölçüt, renk bilgi iletmenin, bir eylemi belirtmenin, yanıt istemenin ya da bir görsel öğeyi ayırt etmenin tek görsel yolu olamayacağını söyler. Amaç basit: kırmızıyı yeşilden ayıramayan, tek renkli bir ekran kullanan ya da zorlanmış yüksek kontrast paleti açan biri de aynı bilgiyi almalıdır.

Uygulamada ikinci bir ipucu yeterlidir: metin, farklı şekilli bir simge, desen, alt çizgi ya da kalın bir kenarlık. Bir alanın etrafındaki kırmızı çerçeve yanlış değildir; yanlış olan, hatanın tek işareti olmasıdır.

Renk körlüğü yaygındır, ama etkilenen tek grup değildir. Parlak güneşte okuyan, sayfayı gri tonlamalı yazdıran ya da işletim sistemi sayfa renklerini değiştiren kişiler de renk bilgisini aynı şekilde kaybeder.

Kamu sitelerinin renge fazla yaslandığı yerler

Kamu ve okul siteleri renk kodlu durumlarla doludur: açık bir izin gişesi için yeşil nokta, park rezervasyon takviminde kırmızı gün, ulaşım haritasında renkli hat, eksik form alanında kırmızı etiket. DOJ'un web erişilebilirliği rehberi, bilginin yalnızca renkle aktarılmasını yaygın engeller arasında sayar; bu yüzden bir hizmet sayfasında ilk bakılacak yerlerden biridir.

Örüntü bellidir: tasarımcı bir gösterge seçer, gösterge ona göre çalışır ve renksiz hâli hiç denenmez. Ödeme, randevu ya da son tarih içeren sayfalar en yüksek riskli yerlerdir, çünkü kaçan bir işaret vatandaşa gerçek bir maliyet getirir.

Durum bileşenlerini bir tedarikçi sağlıyorsa, renk dışı ipucunu yalnızca kendi şablonlarınızda değil, tedarikçinin bileşen kütüphanesinde de isteyin.

Klinik randevu formunda zorunlu alanlar ve hatalar

Zorunlu alanları kırmızı etiketle, hataları kırmızı kenarlıkla gösteren bir ilçe kliniği formu, renk körü bir ziyaretçiye yapılacak hiçbir şey söylemez. Kelime ekleyin ve alanın durumunu yardımcı teknolojiye bildirin.

<label for="dob" style="color:#c62828">Doğum tarihi</label>
<input id="dob" name="dob" style="border:2px solid #c62828">

<label for="dob">Doğum tarihi <span>(zorunlu)</span></label>
<input id="dob" name="dob" required aria-invalid="true"
       aria-describedby="dob-hata" style="border:2px solid #b3261e">
<p id="dob-hata" class="hata">Hata: doğum tarihinizi GG.AA.YYYY biçiminde girin.</p>

Hata metni Hata sözcüğüyle başlar; böylece mesaj kırmızı biçimlendirme olmadan da anlaşılır. Kırmızı kenarlık, yararlananlar için yerinde kalır.

Fatura sayfasındaki metin içi bağlantılar

Paragraf içindeki bağlantılar, gövde metninden yalnızca tonla ayrılıyorsa kolay gözden kaçar. Alt çizgi en güvenilir renk dışı ipucudur. Kaldırırsanız bağlantının çevresindeki metne göre en az 3:1 kontrast oranı taşıması ve üzerine gelince ile odaklanınca başka bir görsel ipucu kazanması gerekir.

.fatura-yardim a { color: #1a73e8; text-decoration: none; }
/* gövde metni #333, bağlantı mavi: tek fark ton */

.fatura-yardim a { color: #0a4d8c; text-decoration: underline; }
.fatura-yardim a:hover,
.fatura-yardim a:focus-visible { text-decoration-thickness: 3px; }

Takvimler, haritalar ve grafikler

Boş günleri yeşil, dolu günleri kırmızı gösteren bir park rezervasyon takvimi, tonları ayıramayan biri için çalışmaz. Durumu yalnızca hücrenin dolgusuna değil, hücrenin içine de yazın.

<td class="gun bos">14</td>
<td class="gun dolu">15</td>

<td class="gun bos"><button>14 <span>Boş</span></button></td>
<td class="gun dolu">15 <span>Dolu</span></td>

Çizgi grafikte ya da ulaşım haritasında çizgileri doğrudan etiketleyin ya da çizgi biçimini ve uç işaretlerini değiştirin. Yalnızca tona dayanan bir gösterge okuyucuyu tahmine bırakır. Renk kodlu anlam taşıyan harita görselleri de aynı ilgiyi ister; harita yalnızca süs ise bu ölçüt uygulanmaz.

Yerel mobil uygulamalar

Mobil ekranlarda hat ya da bilet durumu çoğu zaman renkli bir daire olarak gösterilir. Aşağıdaki örnek rengi korur, bir simge ve bir sözcük ekler.

// SwiftUI
Circle().fill(gecikmeli ? .red : .green)
    .frame(width: 12, height: 12)

// SwiftUI
Label(gecikmeli ? "Gecikmeli" : "Zamanında",
      systemImage: gecikmeli ? "exclamationmark.triangle.fill"
                             : "checkmark.circle.fill")
    .foregroundStyle(gecikmeli ? .red : .green)

// Jetpack Compose
Box(Modifier.size(12.dp).background(if (gecikmeli) Color.Red else Color.Green))

// Jetpack Compose
Row(verticalAlignment = Alignment.CenterVertically) {
    Icon(
        if (gecikmeli) Icons.Filled.Warning else Icons.Filled.CheckCircle,
        contentDescription = null,
        tint = if (gecikmeli) Color(0xFFB3261E) else Color(0xFF1B5E20)
    )
    Spacer(Modifier.width(4.dp))
    Text(if (gecikmeli) "Gecikmeli" else "Zamanında")
}

Renge güvenmeden nasıl test edilir

1. Sayfanın ekran görüntüsünü gri tonlamaya çevirin ya da tarayıcının akromatopsi emülasyonunu kullanın. Her durumun, hatanın, zorunlu alanın ve grafik serisinin hâlâ ayırt edilebildiğini kontrol edin.
2. Windows Karşıtlık Temaları'nı ya da macOS Karşıtlığı Artır ayarını açın ve anlamı kaybolan kontrolleri arayın.
3. Sayfayı ekran okuyucuyla okuyun: bir durum yalnızca renk olarak görünüyorsa sessiz kalır.
4. Ancak bundan sonra otomatik denetleyici kullanın. Araçlar rengin anlam taşıyıp taşımadığını yargılayamaz; sonuçlarını geçti ya da kaldı olarak değil, soru olarak ele alın.

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

• Zorunlu alanın tek işaretinin kırmızı yıldız ya da kırmızı etiket olması.
• CSS sıfırlamasında alt çizgisi silinip geri verilmeyen bağlantılar.
• Altı benzer maviye dayanan grafik göstergeleri.
• Düğmenin adı verilmeden yazılan "yeşil düğmeye tıklayın" yönergesi.
• Etkin ve devre dışı durumların yalnızca hafif bir tonla ayrılması.

Yayına almadan önce:

• Renkli her durumun yanında bir sözcük, şekil ya da desen var.
• Metin içi bağlantılar altı çizili ya da 3:1 kuralını ve üzerine gelince ile odaklanınca ipucunu karşılıyor.
• Hata mesajları neyin yanlış olduğunu metinle söylüyor.
• Sayfa gri tonlamada da anlamlı.

Bu sorunla sık birlikte görülen diğer engeller için yaygın engeller sayfasına bakın.

Kaynaklar

• Understanding SC 1.4.1: Use of Color (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.