Ana içeriğe geç

1.4.11 Metin Dışı Kontrast

Kullanıcı arayüzü bileşenleri ve grafik nesneler, az gören kullanıcılar tarafından kolayca algılanabilmesi için bitişik renklere karşı yeterli kontrasta sahip olmalıdır.

SC Kodu: 1.4.11 Seviye: AA
URL: https://www.w3.org/TR/WCAG22/#non-text-contrast

##Genel Tanım

Başarı Kriteri 1.4.11 Metin Dışı Kontrast, kullanıcı arayüzü bileşenlerinin ve grafik nesnelerin görsel sunumunun, bitişik renklere karşı en az 3:1 kontrast oranına sahip olmasını gerektirir. Bu, görme engelli kullanıcıların bu öğeleri kolayca tanımlayabilmelerini ve bunlarla etkileşim kurabilmelerini sağlar.

Faydalar​

  • Görme Engelli Kullanıcılar İçin Geliştirilmiş Gezinme: Kullanıcıların aktif kullanıcı arayüzü bileşenlerini ve durumlarını ayırt edebilmelerini sağlar.
  • Geliştirilmiş Veri Yorumlama: Grafik ve çizelgeler gibi görsel nesnelerin görme engelli kullanıcılar için daha kolay anlaşılmasını sağlar.
  • Daha İyi Kullanıcı Deneyimi: Görme yeteneklerinden bağımsız olarak tüm kullanıcıların içeriği etkili bir şekilde gezinebilmesini ve yorumlayabilmesini sağlar.

Ana Amaç​

Kullanıcı arayüzü bileşenlerinin ve grafik nesnelerinin yeterli kontrasta sahip olmasını sağlamak için, kenarlıkları dikkate almak çok önemlidir: öğenin içinde yer alan kenarlıklar (sınır), etkileşimli bileşenin iç kısmıyla kontrast oluşturmalı, öğenin dışında yer alan kenarlıklar (örneğin, dış çizgi) ise bitişik dış arka plan rengiyle kontrast oluşturmalıdır. Bu, düşük görme yetisine sahip kullanıcılar için kolayca tanımlanabilir ve kullanılabilir olmalarını sağlar. Ek olarak, SC 1.4.1, Renk Kullanımı ile uyumlu kalırken, öğe odaklandığında veya seçildiğinde gibi belirli durumlarda da kontrastı korumamız gerekir.

En İyi Uygulamalar​

  • Vuruş alanları ve odak göstergeleri için kontrastı sağlayın: Vuruş alanları ve odak göstergelerinin, kenarlık veya çerçeve yerleşimine bağlı olarak, iç veya dış arka planlarıyla 3:1 kontrast oranına sahip olduğundan emin olun.
  • Form öğelerinin durumları için kontrastı sağlayın: Form öğelerinin işaretli/işaretsiz durumlarının, bitişik renklerine göre 3:1 oranını karşıladığından emin olun.
  • Grafik ve çizelgelerin kontrastını sağlayın: Bilgilerin yalnızca renkle yorumlandığı grafik ve çizelge bölümlerinin 3:1 kontrast oranına uygun olduğundan emin olun.
  • Stil kılavuzlarında renk kombinasyonlarını tanımlayın: Sonradan uyarlama ihtiyacını ortadan kaldırmak için stil kılavuzlarında ve tasarım belgelerinde kullanıcı arayüzü öğeleri ve grafik nesneler için uygun renk kombinasyonlarını seçin ve tanımlayın.
  • Pasta grafiklerinde kontrastı sağlayın: Her bir dilimin yüzdesini veya miktarını belirten ek metin göstergeleri olmadan, rengin bilgiyi iletmenin birincil yolu olduğu pasta grafiklerinde, her bir dilimin bitişik dilimlerle yeterince kontrast oluşturmasını sağlayın. En iyi uygulama, yalnızca tek tek dilimler arasındaki kontrasta güvenmek yerine, her bir dilim ile boşluk arasında kontrast sağlamak için dilimler arasında boşluklar (örneğin, beyaz boşluklar) oluşturmaktır. Bu uygulama, görme engelli veya renk körlüğü olan kullanıcılar için netliği ve erişilebilirliği artırır.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

Bir web sayfası, odaklanıldığında görünümü değişen öğeler içeren bir form içerir.

Nelerden Kaçınılmalı?

HTML/CSS

<style> 
  input {
    border : 1px solid #ccc ;
  }
  form {
    background-color : #fff ; /* Formun arka plan rengini tanımlayın */ 
  }
  </style>​​
  
  <form>​​
    <label for="name"> İsim : </label>
    <input type = "text" id = "name" name = "name" >
  </form>​​

Açıklama: Mevcut uygulama başarısızdır çünkü kenar rengi (#ccc), formun bitişik arka plan rengiyle (#fff) kontrast oluşturmamakta ve 3:1'den daha düşük bir oran meydana gelmektedir.

Ne Yapılmalı?

HTML/CSS

<style> 

input {
  border : 1px solid #000 ; /* Daha iyi kontrast için doğru kenarlık rengi */ 
}

form {
  background-color : #fff ; /* Formun arka plan rengini tanımlayın */ 
}
</style>​​
<form>​​
  <label for = "name" > İsim : </label>
  <input type = "text" id = "name" name = "name" >
</form>​​

Açıklama: Giriş alanının kenar rengi, formun beyaz arka plan rengiyle daha iyi kontrast sağlamak için siyaha (#000) ayarlanmıştır. Bu, kenar ve bitişik arka plan rengi arasında 3:1'den daha büyük yeterli bir renk kontrast oranı sağlar.

Metin dışı karşılaştırma örneklerine aşağıdaki bağlantıdan ulaşabilirsiniz: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html .