SOVYBE.Araçları aç ↗
← Rehberler

Kontrastı gerçek bir arayüzde nasıl kontrol edersin?

Renk oranından klavye odağına: örnek bir kartı adım adım incele.

Bir tasarımın hoş görünmesi ile rahat okunması farklı ölçütlerdir. Kontrast kontrolüne ekran görüntüsünün genel havasından değil, gerçek metin ve zemin çiftlerinden başla. Bir kartta başlık, açıklama, bağlantı ve butonun her biri ayrı bir çift oluşturabilir. SOVYBE kontrast aracında opak HEX renkleri seçerek oranı ölçebilirsin.

Örnek çalışma: beyaz metni #080a15 zemin üzerinde ölç. Sonra açıklamayı daha soluk bir griye çevir ve tekrar ölç. İlk çiftin geçmesi ikinciyi garanti etmez. Normal metinde WCAG AA için 4,5:1, büyük metinde 3:1 hedeflenir. Büyük metin eşiği 18 punto ya da kalın 14 puntodur. Sonucun yuvarlanmış görünümüne değil aracın geçer/geçmez değerlendirmesine bak.

Gradyan veya fotoğrafta tek bir HEX çifti yeterli değildir. Harflerin arkasındaki en açık ve en koyu bölgeleri incele; metin zeminindeki en kötü durum geçmelidir. Saydam metin veya katman kullandıysan tarayıcıdaki birleşmiş rengi değerlendirmelisin. En kolay çözüm bazen metnin arkasına sabit, opak bir zemin eklemektir.

Butonu normal, üzerine gelme, klavye odağı ve devre dışı durumunda dene. Sayfayı yalnız Tab ve Enter ile gez; hangi öğede olduğunu görünür bir odak çizgisi göstermeli. Hata mesajı kırmızı renk dışında açıklayıcı metin de içermeli. Bir alanın eksik olduğunu yalnız kırmızı kenarlıkla anlatmak kullanıcıya yeterli bilgi vermez.

Son kontrolde telefon genişliğinde metnin kesilmediğini, yüzde 200 yakınlaştırmada işlevlerin kaybolmadığını ve bağlantıların cümle içinde anlaşılır olduğunu dene. Kontrast aracı renk çiftini ölçer; ekran okuyucu sırası, alan etiketleri ve klavye erişimi için ayrıca test gerekir. Ölçüm sonucu tüm sitenin WCAG uyumluluğuna dair sertifika değildir.

Uygulanabilir kontrol listesi: gerçek metin çiftlerini listele; oranları ölç; zayıf çiftlerde metni veya zemini değiştir; durumları tekrar dene; telefon ve klavyeyle son kez kullan. Sadece marka rengine sadık kalmak için okunabilirliği düşürmek yerine marka rengini vurgu alanlarında kullanabilirsin.

Son editoryal güncelleme: 10 Ekim 2026 · SOVYBE

Teknik kaynak: W3C — minimum kontrast açıklaması

Rehberi uygula

İlgili ücretsiz aracı aç →