Ana içeriğe geç

1.4.6 Kontrast (Geliştirilmiş)

Görme engelli kullanıcılar için okunabilirliği artırmak amacıyla, metinler ve metin içeren görseller geliştirilmiş kontrasta sahip olmalıdır.

SC Kodu: 1.4.6 Seviye: AAA
URL: https://www.w3.org/TR/WCAG22/#contrast-enhanced

Genel Tanım​

WCAG 1.4.6, metin ve metin görüntülerinin arka planla arasında geliştirilmiş düzeyde kontrast bulunmasını gerektirir. Bu kriter, görme engelli ve düşük görüşe sahip kullanıcılar için okunabilirliği en üst seviyeye çıkarmayı hedefler.

Faydalar​

  • Düşük Görüşlü Kullanıcılar: Metinleri daha rahat okuyabilir.
  • Yaşlı Kullanıcılar: Kontrast algısı zayıflayan kullanıcılar için erişilebilirlik artar.
  • Zorlu Ortamlar: Güneş ışığı gibi zor koşullarda bile içerik okunabilir olur.

Kapsam

  • Gövde metinleri
  • Form alanları ve etiketler
  • Menü, buton ve bağlantı metinleri

Ana Amaç​

Bu kriterin amacı, metin içeriklerinin farklı aydınlatma koşullarında, düşük görüşe sahip kullanıcılar tarafından da kolayca okunabilir olmasını sağlamaktır.

Gereksinimler

  • Normal metin: En az 7:1 kontrast oranı
  • Büyük metin (≥ 18 pt veya 14 pt kalın): En az 4.5:1 kontrast oranı

Not: Logolar ve marka adları bu gereksinimden muaftır.

En İyi Uygulamalar​

  • Metin ve arka plan renklerini kontrast oranına göre seçin.
  • Renkleri tasarımın erken aşamasında test edin.
  • Kontrast kontrol araçları kullanın.
  • Hover ve focus durumlarında da kontrastı koruyun.

Örnekler ve Açıklamalar​

Örnek: Yüksek Kontrastlı Arayüz​

Açık arka plan üzerinde koyu metin kullanılarak 7:1 kontrast oranı sağlanır. Böylece metinler düşük görüşlü kullanıcılar için net biçimde okunur.

Nelerden Kaçınılmalı?

Yetersiz kontrasta sahip metin ve arka plan kombinasyonları.

HTML/CSS

.text {color: #777;background-color: #fff;}

Açıklama:

Bu örnekte metin ile arka plan arasındaki kontrast oranı 7:1’in altındadır. WCAG 1.4.6 kriterini karşılamaz.

Ne Yapılmalı?

Gerekli kontrast oranını sağlayan renk kombinasyonları kullanılmalıdır.

HTML/CSS

.text {
  color: #000;
  background-color: #fff;
}

Açıklama:

Bu örnekte metin ile arka plan arasında yüksek kontrast sağlanmıştır ve WCAG 1.4.6 gereksinimleri karşılanır.