Ana içeriğe geç

1.4.1 Renk Kullanımı

Renk; bilgi aktarmak, eylemleri belirtmek veya öğeleri ayırt etmek için tek görsel araç olarak kullanılmamalıdır.

SC Kodu: 1.4.1 Seviye: A
URL: https://www.w3.org/TR/WCAG22/#use-of-color

Genel Tanım​

WCAG SC 1.4.1, rengin bilgi iletmenin, bir eylemi belirtmenin, bir tepkiyi tetiklemenin veya görsel bir öğeyi ayırt etmenin tek görsel aracı olarak kullanılmaması gerektiğini belirtir. Bu, renk körü veya görme yetisi düşük olan kullanıcıların içeriğe erişebilmelerini ve içeriği anlayabilmelerini sağlar.

Faydalar​

  • Renk Körlüğü Olan Kullanıcılar İçin Erişilebilirlik: Renk körü olan kullanıcılar, yalnızca renge bağlı kalmadan bilgileri ve talimatları anlayabilirler.
  • Net İletişim: Tüm bilgilerin açık ve etkili bir şekilde iletilmesini sağlayarak yanlış anlamaları en aza indirin.

Ana Amaç​

Renklerin, bir web sayfasında bilgi iletmenin, eylemleri belirtmenin, yanıtları tetiklemenin veya öğeleri ayırt etmenin tek yöntemi olmamasını sağlamak.

En İyi Uygulamalar​

  • Birden fazla görsel ipucu kullanın: Bilgiyi iletmek için rengi metin etiketleri, simgeler veya desenlerle birleştirin.
  • Yalnızca renge dayalı talimatlardan kaçının: Talimatların ve yönlendirmelerin yalnızca renge dayanmadığından emin olun.
  • Renk Erişilebilirliği Testi: Web sitenizin renk erişilebilirliğini test etmek için araçlar ve yöntemler kullanın ve bilgilerin renge bağlı kalmadan net bir şekilde görülebildiğinden emin olun.
  • Bağlantıların Kolayca Ayırt Edilebilir Olmasını Sağlayın: Metne yerleştirilmiş bağlantılar, kullanıcıların onları bulmasına yardımcı olmak için çevreleyen metinle en az 3:1 oranında renk kontrastı farkına sahip olmalıdır.
  • Bağlantı Stillerini Doğrulayın: Farklı stillere sahip olmayan bağlantıları manuel olarak test ederek, odaklanıldığında veya üzerine gelindiğinde doğru stillendirmeyi aldıklarından emin olun.

Örnekler ve Açıklamalar​

Örnek 1: Örnek Uygulama 1​

Bir form hem zorunlu hem de isteğe bağlı alanlar içermektedir. Talimatlar formun üst kısmında yer almaktadır.

Nelerden Kaçınılmalı?

HTML/CSS

<form>​​
  <p> Zorunlu alanlar kırmızı renkle işaretlenmiştir . </p>
  <label for = "name" style = "color: red;" > Ad </label>
  <input type = "text" id = "name" name = "name" >

  <label for = "email" style = "color : green;" >E-posta </label>
  <input type = "email" id = "email" name = "email" >
</form>​​

Açıklama: Kırmızı rengi algılayamayan kullanıcılar, gerekli alanları belirleyemezler.

Ne Yapılmalı?

HTML/CSS

<form>​​
  <p> Zorunlu alanlar kırmızı metin ve yıldız işareti (\*) ile etiketlenmiştir . </p>
  
  <label for = " name " style = "color: red;" >İsim \* </label>
  <input type = "text" id = "name" name = "name" >
  
  <label for = "email" style = "color : green;" >E-posta </label>
  <input type = "email" id = "email" name = "email" >
</form>​​

Açıklama:

Kırmızı rengi algılayamayan kullanıcılar, gerekli alanları yıldız işareti simgesiyle yine de belirleyebilirler.

Örnek 2: Örnek Uygulama 2​

Öğrenciler bir kimyasal bileşiğin SVG görüntüsünü inceliyor ve kimyasal elementleri belirlemek zorunda kalıyorlar.

Nelerden Kaçınılmalı?

HTML/CSS


<svg role = "img" aria-label = "Farklı elementler içeren bir kimyasal bileşik görseli. Görselin hemen altında tam metin açıklaması yer almaktadır." width = "200" height = "200" >
  <circle cx = "50" cy = "50" r = "40" fill = "red" />
  <circle cx = "150" cy = "50" r = "40" fill = "green" />
</svg>​​

<p> Açıklama: 
  <span style = "color: red;" >Kırmızı</span> = Hidrojen, 
  <span style = "color: green;" > Yeşil</span> = Oksijen 
</p>

Açıklama: Renk farklılıklarını algılayamayan kullanıcılar, ek tanımlayıcılar olmadan kimyasal elementleri anlayamayacaklardır.

Ne Yapılmalı?

HTML/CSS

<svg role = "img" aria-label = "Farklı elementler içeren bir kimyasal bileşik görseli. Görselin hemen altında tam metin açıklaması yer almaktadır." width = "200" height = "200" >
  <circle cx = "50" cy = "50" r = "40" fill = "red" />
  <text x = "50" y = " 55" fill = "black" >1 </text>
  <circle cx = "150" cy = "50" r = "40" fill = "green" />
  <text x = " 150 " y = "55" fill = "black" >2 </text>
</svg>​​

<p> Lejant: 
  <span style = "color: red;" >Kırmızı</span> ( 1) = Hidrojen, 
  <span style = "color: green;" > Yeşil</span> ( 2) = Oksijen
</p>

Açıklama: Renk farklılıklarını algılayamayan görme yetisine sahip kullanıcılar, her elementin yanındaki sayılara bakarak kimyasal elementleri yine de anlayabilirler.

Örnek 3: Renk kontrastı gereksinimlerini karşılayarak bağlantıların kolayca ayırt edilebilir olmasını sağlamak.

Nelerden Kaçınılmalı?

HTML/CSS

<p> Ürünlerimiz hakkında daha fazla bilgi edinmek için ,
  <a href="#" style="color: green;"> buraya tıklayın </a> . 
</p>

Açıklama: Yanlış uygulamada, "buraya tıklayın" bağlantı metni yeşil renkle biçimlendirilmiştir ve bu da çevredeki metin rengiyle yeterli kontrast sağlamamaktadır. Bu kontrast eksikliği, özellikle görme engelli kullanıcılar için bağlantı ile metni ayırt etmeyi zorlaştırmaktadır.

Ne Yapılmalı?

HTML/CSS

<p>Ürünlerimiz hakkında daha fazla bilgi edinmek için , <a href="#" style="color: blue;"> buraya tıklayın </a> . 
</p>​

Açıklama: Düzeltilmiş uygulamada, "buraya tıklayın" bağlantı metni mavi renkle biçimlendirilmiştir ve bu da çevredeki metin rengiyle yeterli kontrastı sağlar. Bu kontrast, bağlantıyı görme engelliler de dahil olmak üzere kullanıcılar için daha belirgin ve erişilebilir hale getirir. Erişilebilirlik yönergelerine göre, kullanıcıların bağlantıları kolayca bulabilmeleri için, bağlantıların çevredeki metinle en az 3:1 oranında renk kontrastı farkı olması gerekir.