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