Erişilebilir Responsive Arayüz: Kontrast, clamp() ve En-Boy Oranı

Kontrast oranını bileşen durumlarıyla birlikte okuyun

Kontrast denetimi ön plan ve arka planın göreli parlaklığından matematiksel oran üretir. Normal metin, büyük metin, ikon ve odak halkası aynı eşikleri paylaşmaz; yalnızca ana paragraf rengini geçirmek karanlık temayı erişilebilir yapmaz.

Hover, disabled, hata ve seçili durumları da gerçek font boyutu ve ağırlığıyla test edin. Yarı saydam yüzeyler ve görsel arka planlar hesaplanan düz HEX çiftinden farklı sonuç verebilir.

• Normal metin için en az AA hedefini kontrol edin.
• Odak halkası ve hata metnini ayrı ölçün.
• Matematiksel sonucu gerçek cihaz görünümüyle doğrulayın.

clamp() formülünü tasarım kararına bağlayın

clamp(min, fluid, max), değeri iki sınır arasında viewport ile doğrusal ölçekler. Minimum ve maksimum ekran genişliği ile değerler açıkça yazıldığında eğim ve kesişim hesaplanabilir; rastgele vw eklemek yerine uç noktalar doğrulanır.

Akışkan değer her şeyi çözmez. Çok uzun Almanca başlıklar, Çince satır kırma ve kullanıcının yüzde 200 yakınlaştırması bileşeni zorlayabilir. Tipografi ile kapsayıcı genişliği birlikte test edilmelidir.

• Minimum değeri küçük ekranda okunabilir seçin.
• Maksimum değeri satır uzunluğuyla birlikte değerlendirin.
• 320 px, ara genişlik ve 1440 px uçlarını test edin.

En-boy oranıyla CLS riskini azaltın

Görsel veya video yüklenmeden önce oranı bilmek tarayıcıya yer ayırma fırsatı verir. 1920×1080 değerini 16:9 olarak sadeleştirmek ve hedef genişliğe göre yüksekliği hesaplamak, kartların yükleme sırasında sıçramasını azaltır.

Yuvarlanan piksel değeri gerçek kodlayıcı çıktısıyla bir piksel farklı olabilir. CSS aspect-ratio, width/height nitelikleri ve responsive kaynak seçimi birlikte kullanılmalı; görselin anlamlı alt metni ayrıca sağlanmalıdır.