Skip to main content
Algılanabilir WCAG 1.4.1

1.4.1 Renk Kullanımı

Renk; bilgi iletmek, bir eylem belirtmek, yanıt istemek veya görsel bir öğeyi ayırt etmek için tek başına kullanılmamalıdır.

Level A Serious WCAG 2.0 (new) WCAG 2.1 WCAG 2.2
link-in-text-block

Bu Kural Ne Anlama Gelir

WCAG 1.4.1, bilgi iletmek için tek yöntem olarak rengin kullanılmasını yasaklar. Renk tek ayırt edici unsur olduğunda; renk körlüğü olan, az gören ya da tek renkli ekran kullanan kişiler aktarılan bilgiye erişemez. Renk ile kodlanan her bilgi, metin etiketleri, desenler, şekiller veya ek görsel göstergeler gibi başka bir kanal aracılığıyla da sunulmalıdır.

Bu ölçüt, rengin anlam taşıdığı her yerde geçerlidir: form doğrulama göstergeleri, zorunlu alan işaretleri, grafik ve tablolar, metin içindeki bağlantı stilleri, durum rozetleri ve seçili sekmeler gibi etkileşimli durumlar. Temel test basittir — sayfadaki tüm renkleri kaldırdığınızda, tüm kullanıcılar içeriği hâlâ anlayabilir ve arayüzü kullanabilir mi?

Neden Önemlidir

Dünya genelinde erkeklerin yaklaşık %8'i, kadınların ise %0,5'i bir tür renk görme bozukluğuna sahiptir. Kırmızı-yeşil renk körlüğü açık ara en yaygın olanıdır ve bu durum geleneksel kırmızı/yeşil hata-başarı kalıplarını milyonlarca kullanıcı için güvenilmez kılar. Klinik durumların ötesinde, güneşli havada telefon ekranı, gece modu filtreleri veya düşük kaliteli monitörler gibi ortam faktörleri de renk farklarını yok edebilir.

Yalnızca renge güvenmek, yardımcı teknoloji kullanıcıları için de engel oluşturur. Ekran okuyucular rengi algılayamaz; bu nedenle yalnızca renkle aktarılan bilgi görmeyen kullanıcılar için görünmezdir. Ek ipuçları sağlamak, bilginin farklı cihazlarda, becerilerde ve ortamlarda erişilebilir olmasını garanti eder.

İlgili axe-core Kuralları

  • link-in-text-block — Metin blokları içindeki bağlantıların çevresindeki metinden yalnızca renkle değil, başka yollarla da ayırt edilebilmesini sağlar. Bağlantı, çevresindeki metne karşı 3:1 kontrast oranına veya alt çizgi gibi renk dışı bir görsel göstergeye sahip olmalıdır.

Nasıl Test Edilir

  1. Tarayıcı DevTools'unda sayfaya gri tonlama filtresi uygulayın: filter: grayscale(100%). Tüm sayfada gezinin ve bilgilerin anlaşılabilir olduğunu doğrulayın.
  2. Doğrulama hatası olan tüm form alanlarını kontrol edin. Hatalar renk değişikliğine ek olarak simge, metin veya kenarlıkla belirtiliyor mu?
  3. Grafikleri ve veri görselleştirmelerini inceleyin. Her veri serisi, renginin yanı sıra benzersiz bir desene, etikete veya şekle sahip mi?
  4. Metin içindeki bağlantıları gözden geçirin. Alt çizgi veya renkten başka bir ayırt edici öğe var mı?
  5. axe DevTools çalıştırın ve link-in-text-block kural ihlallerini kontrol edin.

Nasıl Düzeltilir

Metin blokları içindeki bağlantılar için her zaman renk dışı bir gösterge sağlayın. En basit çözüm varsayılan alt çizgiyi korumaktır:

/* Erişilebilir bağlantı stili */
a {
  color: #0066cc;
  text-decoration: underline;
}

/* Alt çizgiyi kaldırırsanız, odak/üzerine gelindiğinde
   geri ekleyin ve çevreleyen metne karşı 3:1 kontrast oranı sağlayın */
a {
  color: #0066cc;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

Form doğrulamasında rengi simge ve açıklayıcı metinle birleştirin:

<div class="field-group field-group--error">
  <label for="email">E-posta</label>
  <input id="email" type="email" aria-describedby="email-error" aria-invalid="true" />
  <p id="email-error" class="error-message">
    <svg aria-hidden="true" class="icon-error"><!-- X simgesi --></svg>
    Lütfen geçerli bir e-posta adresi girin.
  </p>
</div>

Grafikler için renk dolgularının yanına desen veya doğrudan etiket ekleyin:

<svg role="img" aria-label="Çeyreklere göre satışlar">
  <rect fill="#0066cc" style="fill-opacity:1" />
  <pattern id="stripe" patternUnits="userSpaceOnUse" width="8" height="8">
    <line x1="0" y1="0" x2="8" y2="8" stroke="#fff" stroke-width="2" />
  </pattern>
  <rect fill="url(#stripe)" />
</svg>

Sık Yapılan Hatalar

  • Form hatalarını belirtmek için simge veya açıklayıcı mesaj olmaksızın yalnızca kırmızı kenarlık veya kırmızı metin kullanmak.
  • Eşlik eden bir metin etiketi olmadan "aktif" için yeşil, "pasif" için kırmızı gibi yalnızca renk kodlu durum göstergeleri kullanmak.
  • Alternatif bir renk dışı ipucu sağlamadan metin içindeki bağlantılardan alt çizgiyi kaldırmak.
  • Tanımlama için yalnızca renk açıklamasına dayanan grafik ve pasta dilimlemeleri.
  • Seçili durumu yalnızca renkle gösteren aç/kapa düğmeleri veya sekmeler.

Kaynaklar