Bu Kural Ne Anlama Gelir

WCAG 1.4.11, kontrast gereksinimlerini metin ötesinde iki kategoriyi kapsayacak şekilde genişletir: kullanıcı arayüzü bileşenleri (form kontrolleri, düğmeler, bağlantılar, odak göstergeleri) ve anlamlı grafik nesneler (simgeler, grafikler, bilgi grafikleri). Her ikisi de tanımlanmak için gereken bitişik renklere karşı minimum 3:1 kontrast oranına ulaşmalıdır.

Kullanıcı arayüzü bileşenleri için bu, bileşeni tanımlayan görsel sınır veya göstergenin arka plana karşı 3:1 kontrasta sahip olması gerektiği anlamına gelir. Grafik nesneler için, görselin anlam taşıyan kısımları bitişik öğelere karşı yeterli kontrasta sahip olmalıdır.

İstisnalar arasında pasif bileşenler (devre dışı düğmeler), görünümü kullanıcı aracısı tarafından belirlenen bileşenler ve belirli renk sunumunun zorunlu olduğu grafikler (bayraklar, logolar, fotoğraflar) bulunur.

Neden Önemlidir

Düşük görüşlü kullanıcıların etkileşimli öğeleri tanımlayabilmesi ve grafik bilgileri anlayabilmesi gerekir. Bir form alanının zar zor görülebilen bir kenarlığı varsa, kullanıcı bunun bir giriş alanı olduğunu fark etmeyebilir. Bir grafik düşük kontrastlı segmentler kullanıyorsa, veriler ayırt edilemez hâle gelir.

Odak göstergeleri özellikle kritiktir — klavye odak halkası 3:1 kontrastı karşılamıyorsa, yalnızca klavye kullanan kullanıcılar sayfada nerede olduklarını takip edemez.

İlgili axe-core Kuralları

Metin dışı kontrastı değerlendirmek her kullanıcı arayüzü bileşeni ve grafiğin görsel bağlamını anlamayı gerektirdiğinden, şu anda 1.4.11 için özellikle otomatik axe-core kuralı yoktur. Bu esas olarak manuel test ölçütüdür.

Nasıl Test Edilir

Tüm etkileşimli kullanıcı arayüzü bileşenlerini tanımlayın: düğmeler, giriş alanları, seçim kutuları, onay kutuları, radyo düğmeleri, kaydırıcılar, aç/kapa düğmeleri, bağlantılar, sekmeler.
Her bileşen için, renk kontrast aracı kullanarak görsel sınırının bitişik arka plana karşı kontrastını kontrol edin.
Odak göstergelerini test edin. Sayfada sekme tuşuyla ilerleyin ve odak halkasının arka plana karşı en az 3:1 kontrasta sahip olduğunu doğrulayın.
Anlamlı simgeleri ve grafik öğeleri kontrol edin. Simge rengini arka planıyla karşılaştırmak için renk seçici kullanın.
Grafik öğelerinin (çubuklar, çizgiler, pasta dilimleri) bitişik renklere karşı 3:1 kontrasta sahip olduğunu doğrulayın.

Nasıl Düzeltilir

Form kontrollerinin görünür, yüksek kontrastlı kenarlıklara sahip olmasını sağlayın:

/* Erişilebilir form giriş alanı stili */
input, select, textarea {
  border: 2px solid #595959; /* Beyaz üzerinde 7:1 */
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  background: #ffffff;
}

/* Yeterli kontrastlı özel onay kutusu */
.checkbox-custom {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #4a4a4a; /* Beyaz üzerinde 9.7:1 */
  border-radius: 3px;
  background: #ffffff;
}

.checkbox-custom:checked {
  background: #0055b8;
  border-color: #0055b8;
}

Odak göstergelerinin 3:1 gereksinimini karşılamasını sağlayın:

/* Yüksek kontrastlı odak göstergesi */
:focus-visible {
  outline: 3px solid #0055b8; /* Beyaz üzerinde 7.04:1 */
  outline-offset: 2px;
}

/* Koyu arka planlarda */
.dark-section :focus-visible {
  outline: 3px solid #6eb5ff; /* #121212 üzerinde 7.52:1 */
  outline-offset: 2px;
}

Simge ve grafik öğelerin yeterli kontrasta sahip olmasını sağlayın:

/* Simge kontrastı */
.icon {
  color: #595959; /* Beyaz üzerinde 7:1 */
  /* #ccc (1.6:1) veya #aaa (2.3:1) gibi açık gri simgelerden kaçının */
}

/* Yeterli kontrastlı grafik çubukları */
.chart-bar-primary { fill: #0055b8; }   /* Beyaz üzerinde 7:1 */
.chart-bar-secondary { fill: #c62828; } /* Beyaz üzerinde 6.2:1 */
.chart-bar-tertiary { fill: #1b5e20; }  /* Beyaz üzerinde 7.8:1 */

Sık Yapılan Hatalar

Görünür kenarlığı olmayan veya 1px solid #e0e0e0 (beyaz üzerinde 1.3:1) gibi çok açık kenarlığı olan minimalist form giriş alanları.
İşaretlenmemiş durumda yetersiz kenarlık kontrastına sahip özel onay kutuları ve radyo düğmeleri.
Yeterli bir yedek sağlamadan outline: none ile kaldırılan odak göstergeleri.
Beyaz arka plan üzerinde zar zor görülebilen açık gri simgeler (#ccc veya #aaa).
Bitişik segmentlere karşı kontrast olmadan yalnızca renkle birbirinden ayırt edilebilen grafik segmentleri.

1.4.11 Metin Dışı Kontrast