Ana içeriğe geç

1.4.3 Kontrast (Minimum)

Metinler ve metin içeren görseller, az gören kullanıcılar için okunabilirliği sağlayacak yeterli kontrasta sahip olmalıdır.

SC Kodu: 1.4.3 Seviye: AA
URL: https://www.w3.org/TR/WCAG22/#contrast-minimum

Genel Tanım​

Başarı Kriteri 1.4.3, belirli durumlar dışında, metin ve metin içeren görsellerin en az 4,5:1 kontrast oranına sahip olmasını gerektirir. Bu kriter, görme engelliler, düşük görme yetisine sahip olanlar ve renk körlüğü olanlar da dahil olmak üzere, görme bozukluğu olan kullanıcılar için metnin okunabilir olmasını sağlar.

Birimler ve ölçülerle ilgili açıklama:

Daha Büyük Metin Boyutu Gereksinimleri:
1. Yazı tipi boyutu 18 punto (yaklaşık 24 piksele eşdeğer) veya daha büyük olmalıdır.
2. Kalın metin için yazı tipi boyutu 14 punto (yaklaşık 18,7 piksele eşdeğer) veya daha büyük olmalıdır.

Kontrast Oranı Gereksinimleri:
1. Büyük boyut gereksinimlerini karşılayan metinler için minimum 3:1 kontrast oranı kabul edilebilir.
2. Büyük boyut gereksinimlerini karşılamayan metinler için standart 4,5:1 kontrast oranı gereklidir.

Faydalar​

  • Görme Engelli Kullanıcılar İçin Geliştirilmiş Okunabilirlik: Görme engelli kullanıcıların ek yardımcı teknolojiye ihtiyaç duymadan metni okuyabilmelerini sağlar.

Ana Amaç​

Görme engelli kullanıcılar tarafından okunabilirlik için metin ve metin içeren görsellerin arka plan renklerine karşı yeterli kontrasta sahip olmasını sağlamak.

En İyi Uygulamalar:

  • Metin kontrastı için bir stil kılavuzu geliştirin: Tüm önemli metinlerin minimum kontrast gereksinimlerini karşılamasını sağlayan bir stil kılavuzu geliştirin.
  • Okunabilirliği artırmak için yüksek kontrastlı renk şemaları seçin: Yeterli kontrasta sahip renk şemaları tercih edin.
  • "Kontrast" modu sağlayın: Gerekirse alternatif CSS kullanarak (örneğin bir bindirme efektiyle) bir "Kontrast" modu sağlayın.
  • Kontrastı göz önünde bulundurarak tasarım yapın: Minimum kontrast gereksinimlerini dikkate alarak içerik tasarlayın.

Örnekler ve Açıklamalar​

Örnek 1: Örnek Uygulama 1​

Bir web sitesinin altbilgisinde, iletişim bilgilerini göstermek için açık gri bir arka plan ve beyaz metin kullanılmıştır.

Nelerden Kaçınılmalı?

HTML/CSS

<footer style = "background-color: #CCCCCC; color: #FFFFFF;" >
<p> Bizimle info@company.com adresinden iletişime geçin </p>
</footer>​​

Açıklama: Seçilen renkler yaklaşık 1.1:1'lik bir kontrast oranına neden olur ki bu da minimum gereksinimin çok altındadır ve görme engelli kullanıcılar için metni okumayı zorlaştırır.

Ne Yapılmalı?

HTML/CSS

<footer style = "background-color: #000000; color: #CCCCCC;" >
<p> Bizimle info@company.com adresinden iletişime geçin </p>
</footer>​​

Açıklama: Altbilgi arka planı siyah (#000000) ve metin rengi açık gri (#CCCCCC) olarak ayarlanmıştır; bu da yaklaşık 12,6:1 kontrast oranı sağlar. Bu oran, tüm yazı tipi boyutları için minimum gereksinimi fazlasıyla aşarak, görme engelli kullanıcılar için metnin kolayca okunmasını sağlar.

Örnek 2: Örnek Uygulama 2​

Metin Biçimlendirmede Kontrast Oranı Uyumluluğu

Nelerden Kaçınılmalı?

HTML/CSS

<style> 
.text {
  "font-size" : 16px ;
  color : #333 ; 
}
</style>​​

<p class = "text" >Daha fazla bilgiyi burada bulabilirsiniz. </p>

Açıklama: Hatalı uygulamada, metnin yazı tipi boyutu 16 pikseldir ve 3:1 kontrast oranı gereksinimini karşılamaktadır. Ancak, kalın yazı tipi kullanılmadığı için WCAG 1.4.3 kriterlerini karşılamamaktadır.

Ne Yapılmalı?

HTML/CSS

<style> 
.text {
  font-size : 16px ;
  font - weight : bold ;
  color : #333 ;
}
</style>​​
<p class = "text" >Daha fazla bilgiyi burada bulabilirsiniz. </p>

Açıklama: Doğru uygulamada, metin kalın olarak biçimlendirilir; bu da WCAG 1.4.3 metin kontrastı ve okunabilirlik kriterlerini karşılamasına yardımcı olur.