Tercih edilen kontrast

@media (prefers-contrast) ile yüksek kontrastı öğrenirsin.

prefers-contrast

Bazı kullanıcılar sistemlerinde daha yüksek kontrast ister; düşük görme zorluğu olanlar veya parlak güneş ışığındakiler için okuma kolaylaşır. @media (prefers-contrast: more) sorgusu bu tercihi yakalar.

Bu bloğun içinde metin rengini daha koyu, arka planı daha açık yaparsın; kenarlıkları kalınlaştırırsın. Amaç, varsayılan temayı değiştirmek değil, kontrastı artırmaktır.

Dört kontrast değeri

prefers-contrast dört değer alır: no-preference, more, less ve custom. more en yaygın kullanımdır; custom ise kullanıcının kendi özel renk paletini seçtiğini belirtir.

Özel palet genellikle siyah arka plan üzerine sarı metin gibi yüksek kontrastlı bir ayarı ifade eder. Bu durumda kenarlık ve metin renklerini sabit değerlerle netleştirmek iyi bir uygulamadır.

Uygulama Yüksek kontrast için renk tanımla

Bir @media (prefers-contrast: more) bloğu yaz. İçinde body seçicisi için color: black ve background: white bildirimlerini tanımla.

Örnek çözümü göster

/* yüksek kontrast için renkler */
@media (prefers-contrast: more) {
  body {
    color: black;
    background: white;
  }
}

Kendini test et

Hangisi daha yüksek kontrast tercihini yakalar?
- @media (contrast: high)
- @media (prefers-contrast: high)
- @media (high-contrast: true)
- @media (prefers-contrast: more)
Cevabı göster

@media (prefers-contrast: more) — Doğru. prefers-contrast: more yüksek kontrast tercihinde devreye girer.

Kontrast sorgusunu yaz

@media (____: more) {
  body { color: black; background: white; }
}

Cevabı göster

@media (prefers-contrast: more) {
  body { color: black; background: white; }
}

Kontrast değerlerini eşle

more

Daha yüksek kontrast
less

Daha düşük kontrast
custom

Özel palet
no-preference

Tercih yok

Sıradaki ders: Özet - Erişilebilir tema

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler