Kısa yanıt
Renk kontrastı, yan yana duran iki renk arasındaki parlaklık farkıdır — çoğu zaman metin ile arka planı arasındaki fark. 1:1 (hiç kontrast yok) ile 21:1 (beyaz üzerine saf siyah) arasında bir oran olarak ölçülür. WCAG, metnin ve arayüz öğelerinin okunaklı kalması için belirli asgari oranlar tanımlar; AA düzeyinde normal metin için yaygın eşik 4,5:1'dir.
Renk kontrastı nedir?
Fark bir oran olarak ifade edilir: 1:1 (hiç kontrast yok) ile 21:1 (saf beyaz üzerine saf siyah) arasında. Oran yükseldikçe renkleri birbirinden ayırmak kolaylaşır. Oran düştükçe renkler birbirine karışmaya başlar; özellikle görme keskinliği azalmış kişiler için.
Kontrast nerede geçerlidir
Kontrast yalnızca gövde metniyle ilgili değildir. Simgeleri, form alanı kenarlıklarını, butonları ve arkasındaki yüzeyden ayrışması gereken her öğeyi kapsar.
Renk kontrastı nasıl ölçülür?
Oran gözle değerlendirilmez. Her rengin RGB bileşenlerinden türeyen bağıl parlaklık (relative luminance) değeri üzerinden hesaplanır. Bu değer, rengin insan gözüne ne kadar parlak göründüğüne yaklaşık bir karşılık verir. İki parlaklık değeri standart bir formüle konur ve sonuç kontrast oranını verir.
Uygulamada nasıl kontrol edilir
Bu hesabı kimse elle yapmaz. Bir kontrast denetleyici aracı, ön plan ve arka plan rengini alıp oranı otomatik döndürür. Ayrıca bu oranın ilgili eşiği geçip geçmediğini de söyler. Bilinmesi gereken şey formül değil, önünüzdeki öğe için hangi eşiğin geçerli olduğudur.
WCAG'de renk kontrastı gereksinimleri
WCAG yalnızca "metni okunaklı yapın" demez; belirli, test edilebilir eşikler tanımlar.
AA düzeyi gereksinimleri
WCAG 2.1 AA düzeyinde normal metnin en az 4,5:1 orana ihtiyacı vardır. Büyük metin — 18 punto normal ya da 14 punto kalın ve üzeri — için 3:1 yeterlidir. Büyük harf biçimleri daha düşük kontrastta da okunaklı kaldığı için eşik düşer.
Metin dışı kontrast
Ayrı bir ölçüt metin dışı öğeleri kapsar. Buton kenarlığı ve form alanı çerçevesi gibi arayüz bileşenleri 3:1 gerektirir. Simgeler gibi anlam taşıyan grafik öğeler de aynı eşiğe tabidir.
AAA düzeyi ve muafiyetler
AAA düzeyi çıtayı yükseltir: normal metin için 7:1, büyük metin için 4,5:1. Yasal düzenlemelerin ve satın alma politikalarının çoğu AAA'yı değil AA'yı referans alır. Dekoratif öğeler ve logolar genellikle muaftır; çünkü tek başlarına bilgi aktarmaları beklenmez.
Renk kontrastı erişilebilirlik için neden önemli?
Yetersiz kontrast yalnızca soluk görünmekle kalmaz; metni ziyaretçilerin kayda değer bir bölümü için gerçekten okunamaz hâle getirir.
Görmeye bağlı engeller
Az görme ve bazı renk körlüğü türleri, birbirine yakın tonları ayırt etme becerisini azaltır. Tipik görmeye sahip birine sorunsuz görünen metin, bu kişiler için işlevsel olarak görünmez olabilir.
Duruma bağlı engeller
Güneş altında telefon ekranındaki parlama, arka ışığı zayıflamış eski bir ekran ya da düşük kaliteli bir panel; herkes için etkin kontrastı düşürür ve tam gören bir kişiyi de görme engelli biriyle aynı konuma getirir.
Denetimlerde neden ilk yakalanan bu olur
Kontrast, kesin sayısal eşiği olan az sayıdaki erişilebilirlik gereksiniminden biridir; bu yüzden denetimlerde en tutarlı biçimde kontrol edilen maddelerdendir. Bir sayfa, her şeyi doğru yapsa bile yalnızca kontrasttan kalabilir.
Tasarımda ve geliştirmede renk kontrastı
Tasarım ve geliştirme, renk kontrastının sahipliği için yarışmaz. Kontrastın bozulabileceği iki farklı noktadan sorumludurlar ve nihai ürünün gereksinimi gerçekten karşılaması için ikisinin de tutması gerekir.
Tasarımın sorumluluğu
Paleti tasarım seçer. İş, gerekli oranı aşan bir ön plan–arka plan eşleşmesini, renk sisteminin sonradan elden geçirilmesi gerekmeyecek kadar erken belirlemektir.
Geliştirmenin sorumluluğu
Bu seçimin gerçek bir arayüzle temas ettiğinde ayakta kalıp kalmadığına geliştirme karar verir. Varsayılan durumda 4,5:1'i karşılayan bir buton; üzerine gelme, devre dışı ya da odak durumlarında eşiğin altına düşebilir. Düz zeminde geçen bir renk değişkeni, görsel ya da gradyan üzerinde kalabilir.
Neden iki kez kontrol edilmeli
Tasarım dosyasında denetleyiciyi geçmek işin bittiği anlamına gelmez. Kontrast, arayüz gerçekten kurulduktan sonra etkileşim durumları boyunca yeniden doğrulanmalıdır — yalnızca duran maketde değil.
Renk kontrastı nasıl kontrol edilir?
Elle kontroller
Özel bir kontrast denetleyiciyle başlayın: ön plan ve arka plan rengini girin, oranı AA ve AAA karşısındaki geçti/kaldı sonucuyla birlikte döndürsün. Figma gibi tasarım araçlarının kontrastı doğrudan maket üzerinde ölçen eklentileri vardır. Tarayıcı geliştirici araçları da bir metin öğesi incelendiğinde genellikle kontrast oranını gösterir.
Otomatik kontroller
Otomatik erişilebilirlik tarayıcıları kontrastı site geneli ölçekte kontrol edebilir.
Otomasyonun yetmediği yer
Tarayıcılar yalnızca programatik olarak tespit edilebileni yakalar. Görsel içine gömülü metin, arka plan görseli ya da videosu üzerindeki metin ve standart dışı bileşenlerdeki içerik taramadan kaçabilir; bunlar elle kontrol gerektirir.
Bu nedenle kontrast genellikle iki kez doğrulanır: bir kez site genelinde otomatik olarak, bir kez de otomasyonun en az güvenilir olduğu birkaç bileşende — hero bantları, özel bileşenler, düz olmayan arka plana sahip her şey — elle.
