Son Güncelleme: 16 dk okuma

Renk Kontrastı WCAG: 4.5:1 Oranı Makale Sayfasında

Renk Kontrastı WCAG: 4.5:1 Oranı Makale Sayfasında

Normal boyuttaki makale metni, arka planına karşı en az 4.5:1 kontrast oranına sahip olmalıdır; büyük metinde sınır 3:1'dir. Bu eşikleri WCAG 2.2'nin 1.4.3 başarı ölçütü belirler ve bir şablonda birkaç renk değeri değiştirilerek, tasarımı baştan çizmeden karşılanabilir. Bir makale şablonunu yöneten içerik editörleri, site sahipleri, SEO uzmanları ve geliştiriciler için işe yarar.

Kontrast tek başına bir sıralama etkeni olarak sunulmuyor; gerekçe okunabilirlik ve erişilebilirliktir. Metin okunmuyorsa, sayfadaki bilgi onu arayan okura ulaşmaz. Bu yüzden konuyu bir tasarım zevki meselesi olarak değil, ölçülebilir bir eşik olarak ele almak daha kolaydır: bir renk çifti ya eşiği geçer ya geçemez.

Kontrast oranı ne ölçer?

Oran, iki rengin göreli parlaklığından hesaplanır

WCAG'in açıklama sayfasına göre kontrast oranı (L1 + 0.05) / (L2 + 0.05) formülüyle bulunur. Burada L1 açık rengin, L2 koyu rengin göreli parlaklığıdır. Göreli parlaklık hesabında kırmızı, yeşil ve mavi kanallara 0.2126, 0.7152 ve 0.0722 ağırlıkları verilir. Yeşil kanalın ağırlığının yüksek olması, gözle benzer görünen iki rengin neden çok farklı oran verebildiğini açıklar: parlaklık hesabında en büyük pay yeşildedir.

Bu hesabı elle yapmanız gerekmez. Tarayıcı geliştirici araçlarının renk seçicileri ve çevrimiçi kontrast denetleyicileri bu formüle dayanır. Önemli olan, onlara doğru iki değeri vermektir: metnin gerçek rengini ve metnin gerçekten üzerinde durduğu arka plan rengini. Şablonun stil dosyasında tanımlı renkler, ekran görüntüsünden pipetle alınan renklerden daha güvenilirdir.

Eşikler yuvarlanmaz

Açıklama sayfası, hesaplanan değerlerin yuvarlanmaması gerektiğini söyler. Yani 4.499:1 olarak hesaplanan bir çift 4.5:1 eşiğini geçmez. Aynı ilke 1.4.11 ölçütü için de yazılmıştır: 2.999:1, 3:1 eşiğini karşılamaz. Pratik sonuç şudur: sınırda gezen bir rengi "neredeyse tamam" diye bırakmayın, bir ton koyulaştırın veya açın.

Ön plan ve arka plan birlikte tanımlanmalı

Sayfa, arka plan rengi belirtilmediğinde beyaz varsayıldığını ve yalnızca metin rengini veya yalnızca arka plan rengini belirtmenin bir başarısızlık örneği olduğunu (F24) yazar. Bunun makale sayfalarındaki karşılığı şudur: bir bileşen kendi metin rengini tanımlıyor ama arka planı üst katmandan miras alıyorsa, kullanıcının tarayıcı ayarları veya koyu mod uzantısı bu ikiliyi bozabilir. Uygulama önerisi: renk çiftlerini aynı kural içinde birlikte tanımlayın.

Hesaplama ayrıntısıAçıklama sayfasındaki ifadeEditör için anlamı
Formül(L1 + 0.05) / (L2 + 0.05)Aracın verdiği değere güvenin, elle hesaplamayın
YuvarlamaHesaplanan değerler yuvarlanmaz4.49 değerini 4.5 saymayın
Eksik arka planBelirtilmezse beyaz varsayılır; yalnız birini tanımlamak başarısızlık örneğiMetin ve arka planı birlikte yazın
YumuşatmaÖlçüm, işaretlemedeki belirtilen renklerle yapılır, ekrandaki yumuşatılmış görüntüyle değilEkran görüntüsü pipetinden çok CSS değerine bakın

Gövde metni ve büyük metin eşikleri

İki eşik, bir tanım

1.4.3 ölçütü, metin ve metin görüntülerinin arka planlarına karşı en az 4.5:1 oran taşımasını ister. Büyük ölçekli metinde sınır 3:1'dir. Contrast (Minimum) açıklama sayfası (yeni sekmede açılır), büyük metni en az 18 punto veya en az 14 punto kalın olarak tanımlar. Sayfa 1 punto = 1.333 piksel çevirisiyle 14 puntoyu yaklaşık 18.5 piksel, 18 puntoyu 24 piksel olarak verir.

Bir makale sayfasında bu iki eşik şöyle çalışır: paragraf metni, liste maddeleri, tablo hücreleri, görsel altyazıları ve dipnotlar normal boyuttaysa 4.5:1 ister. Büyük başlıklar yeterince iriyse 3:1 ile geçebilir, fakat başlıkta da 4.5:1'i hedeflemek karar vermeyi kolaylaştırır; çünkü mobilde başlık küçülürse eşik değişir.

Metin türüGerekli oranNot
Paragraf, liste, tablo hücresi4.5:1Normal boyut
Görsel altyazısı, dipnot, tarih satırı4.5:1Küçük punto olduğu için büyük metin sayılmaz
18 punto (yaklaşık 24 piksel) ve üstü3:1Büyük ölçekli metin
14 punto (yaklaşık 18.5 piksel) ve üstü, kalın3:1Kalın ağırlık gerekir
Yer tutucu metin (placeholder)4.5:1Ölçüt yer tutucu ve vurgu anındaki metni de kapsar

İnce ve alışılmadık yazı tipleri

Açıklama sayfası, ince veya alışılmadık yazı tiplerinin yumuşatma nedeniyle daha soluk görünebileceğini, bu durumda daha kalın bir yazı tipi seçmeyi veya asgari oranın üstüne çıkmayı önerdiğini söyler. Kimi makale temaları gövde metnini açık gri tonda ve ince ağırlıkta kullanır; hesaplanan oran eşiği tutsa bile okunabilirlik zayıflayabilir. Uygulama önerisi: gövde metninde 300 gibi ince ağırlıklardan kaçının ve oranı eşiğin belirgin biçimde üstüne taşıyın.

Hangi metinler muaf?

Ölçüt sayfası şu metinleri muaf tutar: etkin olmayan arayüz bileşenlerindeki metin (örneğin devre dışı bir düğme), salt süsleme olan metin, kimseye görünmeyen metin ve önemli başka görsel içeriğe sahip bir fotoğrafın parçası olan metin. Logo ve logotip metinleri de muaftır; ancak logo bir denetim işlevi görüyorsa veya düşük kontrast markanın şartı değil de yazarın tercihiyse bu muafiyet geçerli değildir. Sayfanın tarif ettiği ayrım dikkat çekicidir: sözcükler değiştirilebiliyor veya yeniden sıralanabiliyor ve amaç bozulmuyorsa metin salt süslemedir.

Bu muafiyetleri makale şablonunda genişletmemek gerekir. Bir fotoğraftaki tabela muaftır, ama görselin üzerine yazdığınız başlık veya "devamını oku" bağlantısı muaf değildir. Makale gövdesindeki hiçbir okuma metnini "süsleme" saymayın.

Metin görüntüleri

Ölçüt yalnızca canlı metni değil, metin görüntülerini de kapsar. Bir infografiğin içine gömülü yazı da 4.5:1 ister. Metin görüntüsü yerine gerçek HTML metni kullanabiliyorsanız, kontrastı renk değiştirerek kolayca ayarlayabilirsiniz; görselin içindeki yazıyı düzeltmek ise yeniden çizim gerektirir. Görsellerin sayfa içindeki metinle desteklenmesi için görsel SEO rehberine bakabilirsiniz.

Bağlantı ve düğme renkleri

Satır içi bağlantıyı çevresindeki metinden ayırmak

Use of Color açıklama sayfası (yeni sekmede açılır), rengin bilgiyi, eylemi veya ayrımı aktarmanın tek görsel yolu olamayacağını söyler. Bağlantılar için sayfadaki teknik G183'tür: satır içi bağlantıyı çevresindeki metinden ayırmak için en az 3:1 kontrast kullanmak. Sayfa, F73 başarısızlığını da sıralar: bağlantıların renk görmeyen biri için görsel olarak belirgin olmaması. Açıklama sayfası alt çizgiden söz etmez; yalnızca bu 3:1 tekniğini verir.

Bu iki bilgi birlikte okunursa şu çıkar: gövde metni koyu gri, bağlantı da biraz daha koyu bir mavi ise renk farkı yeterli olmayabilir. Hem bağlantı rengi arka plana karşı 4.5:1 olmalı, hem de çevre metinle arasında ayrım sağlayan başka bir ipucu bulunmalı. Uygulama önerisi: makale gövdesindeki bağlantılara alt çizgi bırakın; bu en az maliyetli ve en açık ayrımdır.

Düğme, form alanı ve odak göstergesi

1.4.11 ölçütü, arayüz bileşenlerinin ve durumlarının, bitişik renklere karşı en az 3:1 olmasını ister. Non-text Contrast açıklama sayfası (yeni sekmede açılır) kuralı şöyle ayrıntılandırır: bir denetimin var olduğunu ve nasıl kullanılacağını anlatan görsel bilgi 3:1 olmalıdır. Denetimin sınır çizgisi, metin veya yeterince kontrastlı bir simge denetimi zaten tanıtıyorsa sınır çizgisi zorunlu değildir; başka hiçbir ipucu yoksa sınır 3:1 olmalıdır.

Odak durumu için sayfa şunu söyler: odak göstergesi, odaklanıldığında bitişik renklere karşı 3:1 sağlamalıdır. Dışarıdaki göstergeler bileşenin durduğu arka planla, içerideki göstergeler bileşenin iç renkleriyle karşılaştırılır. Tarayıcının varsayılan odak çizgisi kullanıcı aracısı görünümü muafiyetine girer, ancak görünür olmalıdır. Kendi odak stilinizi yazdığınızda bu muafiyetten çıkarsınız ve 3:1 sizin sorumluluğunuzdadır.

Üzerine gelme, ziyaret edilmiş ve devre dışı durumlar

Sayfa, yazar tarafından eklenen üzerine gelme (hover) efektlerinin 3:1 olması gerekmediğini söyler, çünkü işaretçinin konumu zaten bu durumu gösterir. Fakat hover efekti bileşenin veya diğer durum göstergelerinin kontrastını azaltmamalıdır. Ziyaret edilmiş ve edilmemiş bağlantılar gibi yan yana görünmeyen durumlar arasında da kontrast gerekmez; yine de her durumdaki bağlantı metni kendi başına 1.4.3'ü karşılamalıdır. Devre dışı denetimler her iki ölçütte de muaftır.

Buradan çıkan editör kuralı: ziyaret edilmiş bağlantı rengini çok soluk bırakmayın. Muafiyet iki durum arasındaki ayrımı kapsar, ziyaret edilmiş bağlantı metninin okunabilirliğini değil.

Yalnız renkle anlam vermemek

Ölçüt ne diyor?

1.4.1 A düzeyindedir ve renk algısıyla sınırlıdır. Açıklama sayfasına göre amaç, belirli renkleri algılayamayan kullanıcıların renkle aktarılan bilgiye erişebilmesidir. Renk kullanımı yasaklanmaz; renk kodlaması, başka bir görsel göstergeyle (şekil, metin veya desen) birlikte kullanıldığında kabul edilir. Sayfa ayrıca belirgin bir parlaklık farkı ve en az 3:1 kontrastın ek görsel ayrım sayılabileceğini, ama anlamın belirli bir rengi algılamaya bağlı olduğu durumlarda (yeşil geçerli, kırmızı geçersiz gibi) yine ek bir gösterge gerektiğini ekler.

Form hataları ve zorunlu alanlar

Sayfadaki örneklerden biri zorunlu alan etiketleridir: etiket kırmızıdır ve ayrıca bir simgeyle işaretlenmiştir. Hata örneği de "hata kırmızıyla gösterilir" cümlesidir ve bunun renk dışında bir ipucu gerektirdiği belirtilir. Sayfa F81'i de başarısızlık olarak sayar: zorunlu veya hatalı alanları yalnızca renk farkıyla belirtmek. Bir makale sayfasındaki bülten kaydı veya yorum formu bu kapsama girer. "Bu alan zorunlu" gibi bir metin ya da simge ekleyin.

Renk kodlu tablo ve grafikler

Sayfadaki "Mary'nin satışları kırmızı, Tom'unkiler mavi" örneği, renkle kodlanmış verinin tipik sorunudur. Makale içinde iki seriyi yalnızca iki farklı renkle ayıran bir çizgi grafiği buna benzer. Çözümler sayfanın tekniklerinde yazılıdır: renk ve desen birlikte kullanmak (G111) ve renkle aktarılan bilginin metinde de bulunmasını sağlamak (G14). Uygulama önerisi: çizgi uçlarına doğrudan etiket yazın ya da çizgi stillerini (düz, kesikli) farklılaştırın.

Pasta grafikleri için 1.4.11 sayfası net bir ayrım yapar: dilimler yalnızca düşük kontrastlı kenarlarla ayrılıyor ve aynı bilgiyi veren etiket veya değer yoksa başarısızdır; etiketler ve değerler görünüyorsa kriter uygulanmaz; etiketler varsa ve dilim kenarları 3:1 sağlıyorsa geçer.

Uyarı ve bilgi kutuları

Makale içinde "ipucu" yeşil, "uyarı" kırmızı kutu olarak gösteriliyorsa kutunun başına bir metin etiketi ("Uyarı:", "İpucu:") eklemek, renkle aktarılan bilginin metinde de bulunmasını isteyen G14 tekniğinin bir uygulamasıdır. Aynı bilgi ekran okuyucu kullanıcılarına da ulaşır.

Karanlık tema ve görsel üstü metin

Her tema ayrı bir renk çiftidir

WCAG'in kontrast sayfaları, açık ve koyu tema ayrımı yapmaz; ölçüt, belirtilen ön plan ve arka plan renk çiftlerine uygulanır. Bu yüzden iki temalı bir sitede her çift ayrı ayrı sınanmalıdır. Açık temada yüksek oran veren bir gri tonu, koyu temada aynı gri ile koyu arka plan arasında 3:1'in altına düşebilir. Uygulama önerisi: iki tema için de renk değişkenlerini (CSS özel özellikleri) bir tabloda toplayın ve değişiklikten sonra tabloyu yeniden ölçün.

Koyu tema bağlamında bir tuzak daha var: saf beyaz metin saf siyah zeminde çok yüksek oran verir, fakat uzun makale okumada göz yorabilir. Ölçüt azami bir sınır koymaz; bu bir tasarım tercihidir. Yüksek bir oran okunabilirliği tek başına garanti etmez, ama düşük oran okunabilirliği kesin zayıflatır.

Görselin üzerine yazılan başlık

Kapak görselinin üzerine başlık yazılıyorsa, 1.4.3 sayfası arka plan görsellerinin ön plan metnine yeterli kontrast sağlaması gerektiğini söyler ve bunu sağlamayan durumu F83 başarısızlığı olarak sayar. Sayfada gradyanlar için ayrı bir bölüm yoktur. Uygulama önerisi: görselin metin altında kalan en açık ve en koyu bölgelerini ayrı ayrı ölçün; en kötü bölge eşiği geçmiyorsa metin altına yarı saydam bir katman ekleyin ya da metni düz zeminli bir bloğa taşıyın.

1.4.11 sayfasında çok renkli grafikler ve gradyanlar için ilke verilmiştir: en az kontrastlı alan test edilir. Bu ilke grafik nesneler içindir, metin için değildir; metin 1.4.3'ün kapsamındadır. Aynı sayfa, görselin içindeki metnin de 1.4.11'e değil 1.4.3'e göre değerlendirileceğini yazar.

Şeffaflık ve arka plan değişimi

Yarı saydam bir katmanın altındaki içerik değiştikçe (kaydırmalı üst çubuk, kayan yan kutu) oran da değişir. Uygulama önerisi: bu tür bileşenlerde en kötü durumu ölçün, yani arkasından en açık içeriğin geçtiği anı. Katmanı opak yapmak ya da metin arkasına sabit bir renk eklemek bunu ortadan kaldırır; bunu bileşen bazında verilecek bir uygulama kararı olarak ele alın.

Ölçüm iş akışı: neyi, nerede, hangi sırayla ölçersiniz?

Önce renk değişkenlerini listeleyin

Bir makale şablonunda gerçekte kullanılan renk sayısı sınırlıdır: gövde metni, ikincil metin, bağlantı, ziyaret edilmiş bağlantı, başlık, zemin, kart zemini, kenarlık ve vurgu rengi. Hepsini tek bir listeye yazın ve her biri için hangi zeminle birlikte kullanıldığını yanına not edin. Ölçülecek çiftler ancak böyle görünür hâle gelir. Renkler stil dosyanızda değişken olarak tanımlıysa liste kolay çıkar; tanımlı değilse listeyi çıkarmak, kontrastın ötesinde bir tasarım tutarlılığı denetimi de olur ve aynı rengin kaç farklı tonla yazıldığını ortaya koyar.

Listenin yanına bir sütun daha açın: ölçülen oran ve geçip geçmediği. Böylece bir sonraki tema değişikliğinde kimin neyi neden değiştirdiği izlenebilir. Tablo küçük bir ekip için bir elektronik tablo kadar basit olabilir; önemli olan, ölçümün tek seferlik bir iş değil, şablon her değiştiğinde yinelenen bir adım olmasıdır.

Liste çıkarken ölçüt sayfasının "belirtilen renkler" ilkesini hatırlayın: ölçüm, işaretlemede ve stil dosyalarında belirtilen ön plan ve arka plan renkleriyle yapılır. Bu yüzden çiftleri ekran görüntüsünden değil, kaynak değerlerden okuyun.

Sonra durumları ve ekran boyutlarını ekleyin

İkinci geçişte aynı listeye durumları ekleyin: varsayılan, odak, üzerine gelme, ziyaret edilmiş, etkin olmayan. Her durum için hangi ölçütün geçerli olduğunu hatırlamak işi hızlandırır. Bağlantı metni her durumda 1.4.3'e tabidir. Düğme çerçevesi ve odak halkası 1.4.11'e tabidir. Hover efekti 3:1 zorunluluğundan muaftır ama kontrastı düşürmemelidir. Devre dışı denetimler muaftır.

Ekran boyutu da eşiği değiştirebilir. Masaüstünde 24 piksel olan bir başlık mobilde 20 piksele inerse büyük metin tanımının dışında kalabilir; kalın olmayan metinde büyük metin eşiği 18 punto, yani yaklaşık 24 pikseldir. Başlık küçüldüğünde 3:1 ile yetinemezsiniz. Bu yüzden başlık renklerini 4.5:1'e göre seçmek, ekran boyutuna bağlı sürprizleri ortadan kaldırır.

Araçların gösteremediği şeyler

Otomatik denetleyiciler, metin ve düz zemin çiftlerini hızla ölçer; ancak görsel üstü metin, gradyan ve yarı saydam katman gibi bağlama bağlı durumlarda insan gözüyle kontrol gerekir. Bu bir araç eleştirisi değil, bir kapsam notudur: ölçüt sayfası, görsel arka planın metne yeterli kontrast sağlaması gerektiğini söylüyor, ama hangi pikselin ölçüleceğine dair bir yöntem vermiyor. Yöntemi ekip olarak belirleyin. Uygulama önerisi: metnin altında kalan alanın en açık ve en koyu noktalarını ölçün ve ikisini de sonuç tablosuna yazın.

Ayrıca araçlar anlamın yalnız renkle verilip verilmediğini anlayamaz. Bir tablodaki yeşil ve kırmızı hücrelerin yanında metin olup olmadığına bir insan bakmalıdır. 1.4.1 ölçütünün otomatik testle tam kapsanmaması bu yüzden beklenen bir durumdur ve makale taslağı gözden geçirme listesine eklenmelidir.

Sık yapılan hatalar ve düzeltmeleri

Hataİlgili ölçütDüzeltme
Açık gri gövde metni, beyaz zemin1.4.3Metin rengini koyulaştırın, ince ağırlığı kalına çevirin
Bağlantı yalnızca farklı renkte1.4.1, G183, F73Alt çizgi veya başka bir görsel ipucu ekleyin
Odak halkası kaldırılmış1.4.11Bitişik renklere karşı 3:1 veren bir odak stili yazın
Kapak görselinde okunmayan başlık1.4.3, F83Katman ekleyin ya da düz zeminli bloğa taşıyın
Hata mesajı yalnızca kırmızı1.4.1, F81Metin ve simge ekleyin
Pasta grafiğinde etiket yok1.4.11Etiket ve değer ekleyin, dilim kenarlarını 3:1 yapın
Koyu temada açık temanın renkleri1.4.3Tema başına renk çiftlerini yeniden ölçün

Bu tabloda ölçütlerin hepsi yukarıda anlatılan açıklama sayfalarında geçer. Başlangıç için en yüksek etkiyi veren ilk iki satır, yani gövde metni ve bağlantı ayrımıdır; çünkü her makalede yüzlerce kez karşınıza çıkarlar.

Taslak aşamasında editör kontrolü

Kontrastı yayın sonrası bir denetime bırakmak yerine, taslak onayına dört soruluk bir kısa kontrol ekleyebilirsiniz. İlki, makalede el ile rengi değiştirilmiş bir metin var mı? İkincisi, görselin üstüne yazılmış bir metin var mı ve ölçüldü mü? Üçüncüsü, bir tablo veya grafik renkle anlam taşıyor mu ve yanında renk dışı bir ipucu var mı? Dördüncüsü, yeni bir bağlantı biçimi veya düğme eklendi mi? Bu sorulardan herhangi biri evet ise ilgili bölümü geliştirici veya tasarımcıyla bir kez ölçtürün.

Bu kontrol, ölçüt sayfalarının işaret ettiği riskleri yayın öncesine taşır. Düzeltmenin maliyeti taslak aşamasında bir renk değeri, yayından sonra ise şablon ve eski içerik taramasıdır.

Karar kuralı, kontrol listesi ve örnek senaryo

Karar kuralı: hangi renk değişir?

Bir çiftin eşiği geçmediğini gördüğünüzde şu sırayla ilerleyin. Önce metin rengini koyulaştırın veya açın; marka renkleri arka plan veya vurgu olarak korunur. Metin rengini markanın zorunlu rengi olduğu için değiştiremiyorsanız arka planı değiştirin. İkisi de mümkün değilse, o rengi yalnızca büyük ve kalın metinde kullanın ve eşiği 3:1'e indirin. Son çare olarak metni görsele gömmek yerine gerçek metne dönüştürün.

Bu sıralamanın nedeni, tasarım bütünlüğünü en az bozan değişikliği öne almaktır. Marka rengi zorunluluğu da sınırlıdır: kontrast sayfası, düşük kontrastın marka şartı olmadığı, yazarın tercihi olduğu durumlarda logo muafiyetinin geçerli olmadığını açıkça yazar.

Makale sayfası kontrol listesi

  • Paragraf, liste ve tablo metni arka planına karşı 4.5:1 veriyor mu?
  • Altyazı, dipnot ve tarih satırı gibi küçük metinler de 4.5:1 veriyor mu?
  • Satır içi bağlantılar, çevre metinden renk dışında bir ipucuyla (örneğin alt çizgi) ayrılıyor mu?
  • Özel yazdığınız odak göstergesi bitişik renklere karşı 3:1 sağlıyor mu?
  • Düğme ve form alanları, sınırı veya içeriğiyle tanınabiliyor mu?
  • Hata, zorunlu alan, uyarı ve grafik serileri renk dışında metin, simge veya desenle de belirtiliyor mu?
  • Her iki tema için ayrı ölçüm yapıldı mı?
  • Görsel üstü metinde arka planın en zayıf bölgesi ölçüldü mü?
  • Yer tutucu metinler okunabilir mi?
  • Ölçüm CSS değerlerinden mi alındı, ekran pipetinden mi?

Örnek senaryo: bir seyahat blogunun makale şablonu

Örnek senaryo: bir seyahat blogu açık gri gövde metni, açık turuncu bağlantılar ve fotoğrafların üzerine beyaz başlıklar kullanıyor. Denetimde üç sorun çıkıyor: gövde metni ile krem zemin arasındaki oran 4.5:1'in altında, turuncu bağlantı hem zemine hem de çevre metne karşı zayıf ve kapak fotoğrafının sağ üst köşesi açık gökyüzü olduğu için beyaz başlığın bir kısmı okunmuyor.

Düzeltme sırası: önce gövde rengi tek değer olarak koyulaştırılır, böylece bütün makaleler aynı anda düzelir. Sonra bağlantı rengi koyu turuncuya çevrilir ve alt çizgi eklenir; böylece hem zemin hem çevre metin ayrımı sağlanır. En son kapak başlığı için görselin altına yarı saydam koyu bir katman konur ve en açık bölge yeniden ölçülür. Tasarım dili, yani turuncu ve fotoğraf ağırlıklı kapak, korunur. Bu yaklaşım, baştan tasarım yerine üç ayrı CSS değişikliğiyle sonuç verir.

İçerik ekibiyle iş bölümü

Kontrast kararlarının büyük kısmı şablon düzeyindedir ve geliştirici tarafında verilir; fakat editör de etkiler. Editörün sorumlu olduğu noktalar: metne el ile renk vermemek, görselin üstüne başlık koyarken ölçüm istemek, grafikte renk dışı ipucu eklemek ve altyazıları normal metin sayıp 4.5:1'e göre değerlendirmektir. Bir stil kılavuzunda bu dört madde bile belirsizliği azaltır.

Başlık hiyerarşisi ve okunabilir biçimlendirme de aynı okuma deneyiminin parçasıdır; ayrıntı için başlık etiketleri rehberine ve okunabilir içerik biçimlendirme rehberine bakın. Makale görsellerinin alt metni ise ayrı bir konudur; makale görseli alt metni ve stok görsel lisansı yazısı bunu işler.

Ölçüt sürümü ve güncellik

Burada geçen eşikler WCAG 2.2 açıklama sayfalarındaki metne göre yazılmıştır. Standartlar ve açıklama sayfaları güncellenebilir; uygulamadan önce ilgili sayfanın güncel halini kontrol edin. Ayrıca bu ölçütlerin karşılanması, bir arama motorunda sıralama vaadi anlamına gelmez; kazanç, okuyucunun metne gerçekten erişebilmesidir.

Sık Sorulan Sorular

Gövde metni için kontrast oranı en az kaç olmalı?

WCAG 2.2'nin 1.4.3 ölçütü normal metin için en az 4.5:1 ister. Büyük ölçekli metinde, yani en az 18 punto veya en az 14 punto kalın metinde, eşik 3:1'dir. Hesaplanan değerler yuvarlanmaz.

Büyük metin kaç piksele denk gelir?

Açıklama sayfası 1 punto = 1.333 piksel çevirisiyle 14 puntoyu yaklaşık 18.5 piksel, 18 puntoyu 24 piksel olarak verir. 14 puntoluk eşik yalnızca kalın metin için geçerlidir.

Logo metninin kontrastı da ölçülmeli mi?

Logo ve logotip metinleri muaftır. Ancak logo bir denetim olarak çalışıyorsa veya düşük kontrast markanın şartı değil de yazarın tercihiyse muafiyet geçerli olmaz.

Bağlantıyı yalnızca renkle ayırmak yeterli mi?

Use of Color sayfası, satır içi bağlantıyı çevresindeki metinden ayırmak için en az 3:1 kontrast tekniğini (G183) verir ve renk görmeyen biri için belirgin olmayan bağlantıyı başarısızlık sayar (F73). Alt çizgiden söz etmez; alt çizgi eklemek uygulama önerisidir.

Hover efektinin de 3:1 olması gerekir mi?

Non-text Contrast sayfasına göre yazar tarafından eklenen hover efektlerinin 3:1 olması gerekmez, ancak efekt bileşenin veya diğer durum göstergelerinin kontrastını azaltmamalıdır.

Koyu temada ayrıca ölçüm gerekir mi?

Kontrast sayfaları tema ayrımı yapmaz, ölçüt belirtilen renk çiftlerine uygulanır. Bu nedenle her tema için ayrı ölçüm yapmak doğru yaklaşımdır.

Kontrast sıralamayı yükseltir mi?

WCAG sayfalarında kontrastın sıralamayla ilişkisine dair bir ifade yok. Gerekçe, metne erişimin sağlanmasıdır.

Sonuç

Makale sayfasında kontrast sorunları birkaç renk değeriyle ele alınabilir: gövde ve altyazı metni 4.5:1, büyük metin 3:1, arayüz bileşenleri ve odak göstergesi 3:1 ve hiçbir anlam yalnızca renge bırakılmaz. Önce şablon düzeyindeki değişkenleri ölçün, sonra görsel üstü başlıkları ve renk kodlu grafikleri tek tek gözden geçirin. Eşikler değişebilir; uygulamadan önce güncel açıklama sayfalarına bakın.

Makalelerinizi erişilebilir ve okunur biçimde yayımlamak için içerik üretim sürecinde destek almak isterseniz Akua Adforce'taki makale yazımı hizmetini inceleyebilirsiniz.

0 Yorumlar

Bu yazı için henüz yorum yapılmamış.

Yorum Yaz

Yorum yapabilmek için giriş yapmalısınız. Giriş Yap