Erişilebilirlikte renk kontrastı nasıl ölçülür?

Erişilebilirlikte renk kontrastı, ön plan ve arka plan renklerinin parlaklık oranını ölçen kontrast analiz araçlarıyla kontrol edilir.

WCAG uyumunda temel ölçüm, iki rengin göreli parlaklık değerlerinin oranıdır. Normal metin için en az 4,5:1, büyük metin için en az 3:1 oranı gerekir. Kullanıcı arayüzü bileşenleri ve anlam taşıyan grafik öğeler için de çoğunlukla 3:1 oranı kontrol edilir.

Bu ölçüm yalnızca ana sayfadaki renk paletiyle sınırlı değildir. Butonlar, bağlantılar, form alanları, hata mesajları, grafikler ve mobil menüler ayrı ayrı incelenmelidir.

Renk kontrastı neden erişilebilirlik açısından önemlidir?

Renk kontrastı, metin ile arka plan arasındaki görsel ayrımı belirler. Kontrast düşük olduğunda içerik, özellikle düşük görme, renk görme farklılığı veya yaşa bağlı görme kaybı yaşayan kişiler için zor okunur.

Düşük kontrast yalnızca estetik bir sorun değildir. Kullanıcı bir butonun nerede olduğunu, form alanının aktif olup olmadığını veya hata mesajının hangi alanla ilgili olduğunu fark edemeyebilir. Bu durum görev tamamlama süresini uzatır.

Örneğin açık gri metni beyaz zemin üzerinde kullanmak, tasarımda yumuşak görünebilir. Ancak metin oranı 4,5:1 seviyesine ulaşmıyorsa WCAG AA metin kriterini karşılamaz. Renk körlüğü simülasyonu da tek başına yeterli değildir.

Kontrast kontrolü, farklı ekran parlaklıklarında ve gerçek içerik uzunluklarında yapılmalıdır. Çok kısa bir başlık okunabilir görünürken, aynı renk uzun bir paragrafta yorucu hale gelebilir.

Yanlış: Kontrastı yalnızca marka renklerine bakarak değerlendirmek. Doğru: Her renk çiftini, kullanım amacı ve metin boyutuyla birlikte ölçmek.

WCAG renk kontrastı oranları kaç olmalıdır?

WCAG 2.x kapsamında normal metin için minimum kontrast oranı 4,5:1, büyük metin için 3:1 olarak kabul edilir. Daha yüksek erişilebilirlik hedefleyen AAA seviyesinde bu eşikler sırasıyla 7:1 ve 4,5:1 olur.

Büyük metin değerlendirmesinde yaygın kullanılan eşik, normal ağırlıktaki metin için yaklaşık 24 CSS piksel veya üzeridir. Kalın metinde yaklaşık 18,67 CSS piksel ve üzeri değerler büyük metin kapsamına girebilir.

Bu ayrım, yazı boyutunu rastgele büyütüp düşük kontrastı geçerli göstermeyi sağlamaz. Metnin gerçekten büyük, okunabilir ve tasarım içinde işlevsel olması gerekir. Araç sonucu, font ağırlığıyla birlikte incelenmelidir.

Logo, dekoratif metin veya pasif görsel içindeki marka yazısı her durumda normal metin gibi değerlendirilmez. Ancak kullanıcıya bilgi veren grafik, ikon, çizgi veya bileşenler için ayrı kontroller gerekir.

Kontrast oranı hangi formülle hesaplanır?

Kontrast oranı, iki rengin göreli parlaklık değerleri kullanılarak hesaplanır. Açık rengin parlaklığı koyu rengin parlaklığına eklenir ve sonuç, koyu rengin parlaklığına bölünür.

Formül şu şekilde gösterilir: (L1 + 0,05) / (L2 + 0,05). Burada L1 daha açık rengin, L2 ise daha koyu rengin göreli parlaklık değeridir. Sonuç 1:1 ile 21:1 arasında olur.

Örneğin beyaz zemin ile siyah metin, en yüksek kontrast değerine yakın sonuç verir. Orta gri metin ile açık gri zemin ise renkler birbirine yaklaştığı için düşük oran üretir.

RGB kodlarına bakarak oranı gözle hesaplamak güvenilir değildir. Aynı kırmızı ve yeşil yoğunluğu, insan gözü tarafından aynı parlaklıkta algılanmayabilir. Bu nedenle WCAG uyumlu hesaplayıcı kullanılmalıdır.

HSL veya HEX değerlerini değiştirmek, sonucu doğrudan tahmin etmeyi kolaylaştırabilir. Fakat son karar yine hesaplama aracının verdiği oranla verilmelidir. Özellikle saydamlık, degrade ve görsel arka planlar manuel kontrol gerektirir.

CSS içinde opacity kullanılıyorsa görünen renk, yalnızca yazı renginden oluşmaz. Metin, arka plan ve saydamlık birlikte hesaplanmalıdır. Araçta görünen son renk değil, gerçek render edilmiş görünüm esas alınır.

Renk kontrastı hangi araçlarla ölçülür?

Renk kontrastını ölçmek için tarayıcı eklentileri, tasarım uygulaması eklentileri, bağımsız kontrast hesaplayıcıları ve otomatik denetim araçları kullanılabilir.

Web sitesindeki belirli bir metni kontrol etmek için tarayıcı tabanlı kontrast denetleyicileri pratiktir. Ön plan ve arka plan rengini seçerek oranı, WCAG AA sonucunu ve başarısızlık nedenini gösterirler.

Tasarım aşamasında Figma gibi araçlarda çalışan kontrast eklentileri kullanılabilir. Bu yöntem, renk paleti kodlanmadan önce sorunları görmeyi sağlar. Ancak tasarım dosyasındaki örnek metin, canlı sitedeki tüm durumları temsil etmeyebilir.

Chrome veya Firefox geliştirici araçları, seçili öğenin hesaplanan renklerini incelemek için kullanılır. Burada yazı rengi, arka plan rengi, font boyutu ve font ağırlığı birlikte kontrol edilmelidir.

Otomatik tarama araçları sayfadaki belirgin metin ve arka plan çiftlerini yakalayabilir. Buna rağmen degrade arka plan, görsel üstü metin, hover durumu ve özel grafikler eksik kalabilir.

Sonuçları kaydetmek için her sorun için URL, bileşen adı, renk kodları, kontrast oranı ve önerilen düzeltme not edilmelidir. Böylece geliştirici aynı hatayı tekrar aramak zorunda kalmaz.

Renk seçerken yalnızca aracı geçiren tonu almak yeterli değildir. Tasarım sistemi içinde metin, arka plan, kenarlık ve odak renkleri birlikte test edilmelidir.

Web sitesinde kontrast testi adım adım nasıl yapılır?

Kontrast testi, önce sayfadaki renk kullanım alanlarını listeleyerek yapılmalıdır. Ana sayfa, hizmet sayfası, iletişim formu ve mobil menü gibi farklı şablonlar ayrı incelenir.

1. Test edilecek sayfaları ve bileşenleri listeleyin.
2. Her bileşenin ön plan ve arka plan renk kodunu belirleyin.
3. Metin boyutunu, font ağırlığını ve durumunu kaydedin.
4. Kontrast oranını WCAG uyumlu bir araçta ölçün.
5. Normal, hover, focus, disabled ve hata durumlarını ayrı test edin.
6. Başarısız renk çiftlerini tasarım sisteminde düzeltin.
7. Düzeltmeden sonra aynı sayfaları yeniden tarayın.

Testi yalnızca masaüstü görünümünde bırakmayın. Mobil kırılımda arka plan değişebilir, buton yüksekliği azalabilir veya metin görselin üzerine taşabilir.

Bir renk çifti 4,5:1 oranını geçse bile metin alanı okunabilir olmayabilir. İnce font, sıkışık satır aralığı ve hareketli arka plan okunabilirliği düşürür.

Hata mesajları, başarı bildirimleri ve zorunlu alan işaretleri özellikle önemlidir. Sadece kırmızı veya yeşil kullanmak, renk görme farklılığı yaşayan kullanıcılar için yeterli bilgi sağlamaz.

Testin sonunda tarayıcı yakınlaştırmasını artırın ve sayfayı düşük parlaklıkta inceleyin. Bu yöntem, matematiksel eşiği geçmeyen veya pratikte zor okunan alanları ayırmaya yardımcı olur.

Buton, bağlantı ve form alanlarında kontrast nasıl kontrol edilir?

Buton kontrastı, buton metni ile buton zemini arasında ölçülür. Butonun çevresindeki arka plan, butonun kendisi ve odak göstergesi ayrı renk ilişkileridir.

Metinli bir birincil buton için yazı-zemin oranı normal veya büyük metin eşiğine göre değerlendirilir. Buton yalnızca kenarlıkla tanımlanıyorsa kenarlık ve komşu arka plan arasında da 3:1 kontrolü yapılır.

Bağlantılar yalnızca renk değişimiyle ayırt ediliyorsa kontrast ve ayırt edilebilirlik birlikte ele alınmalıdır. Gövde metni içinde bağlantı için alt çizgi kullanmak, renk farkına olan bağımlılığı azaltır.

Form alanlarında placeholder metni, alan etiketi değildir. Placeholder düşük kontrastlıysa kullanıcı örnek bilgiyi okuyamaz. Etiketler kalıcı görünmeli ve giriş alanının amacı renk dışında da anlaşılmalıdır.

Odak göstergesi klavye kullanıcıları için kritik bir bileşendir. Focus durumu, varsayılan görünümden belirgin biçimde ayrılmalı ve arka planla yeterli kontrasta sahip olmalıdır.

Devre dışı bileşenler bazı WCAG değerlendirmelerinde istisna kapsamına girebilir. Ancak işletme açısından kritik bir bilgiyi yalnızca soluklaştırmak, kullanılabilirlik sorununu ortadan kaldırmaz.

Bir butonun hover durumunu test edip focus durumunu atlamak yaygın bir hatadır. Klavye ile sekme geçişi yaparak tüm interaktif bileşenlerin görünür odak stilini kontrol edin.

Görsellerde, degradelerde ve ikonlarda kontrast nasıl ölçülür?

Görsel üzerindeki metnin kontrastı, metnin temas ettiği arka planın en sorunlu bölümünde değerlendirilmelidir. Görselin yalnızca en açık veya en koyu noktası seçilmez.

Degrade arka planlarda tek bir renk kodu bulunmadığı için sonuç konuma göre değişir. Metin, degrade boyunca okunmuyorsa arka plana düz renk katmanı veya gölge eklemek gerekebilir.

Fotoğraf üstü başlıklarda siyah veya beyaz metin her bölgede aynı sonucu vermez. Görselin değişken yapısı, metinle arka plan arasındaki oranı bazı noktalarda minimum değerin altına düşürebilir.

İkonlar bilgi taşıyorsa, ikon ile arka plan arasındaki kontrast genellikle 3:1 seviyesinde kontrol edilir. Sadece dekoratif ikonlar için aynı değerlendirme gerekmeyebilir.

Grafiklerde tek başına renk kullanmak yerine etiket, desen, şekil veya doğrudan veri değeri ekleyin. Kırmızı ve yeşil renkler farklı anlamlar taşıyorsa renk dışı işaret de kullanılmalıdır.

Logo renkleri marka standardı nedeniyle değiştirilemiyorsa logonun çevresindeki zemin ve kullanım alanı yeniden düzenlenebilir. Marka rengini her yerde metin rengi olarak kullanmak zorunlu değildir.

Arka plan görselleri için en güvenli yöntem, metin alanının arkasına sabit ve yeterli kontrast sağlayan bir katman eklemektir. Bu çözüm, fotoğraf değiştiğinde de okunabilirliği korur.

Kontrast testi hangi durumlarda tek başına yeterli olmaz?

Kontrast oranı, okunabilirliğin önemli bir parçasıdır; fakat erişilebilirliğin tamamını ölçmez. Büyük harf kullanımı, font ağırlığı, satır aralığı ve metin yoğunluğu da incelenmelidir.

İnce ağırlıklı bir font, hesaplamada aynı renk oranını geçse bile ekranda daha zayıf görünebilir. Özellikle 300 veya daha ince font ağırlıkları, küçük metinlerde dikkatle değerlendirilmelidir.

Renk görme farklılığı testlerinde kırmızı-yeşil ayrımına güvenen arayüzler sorun çıkarabilir. Durum bilgisini ikon, metin, desen veya konumla desteklemek gerekir.

Otomatik araçlar anlam sırasını, klavye erişimini veya ekran okuyucu etiketlerini değerlendirmez. Bu nedenle kontrast raporu, genel erişilebilirlik testinin yalnızca bir bölümüdür.

Dinamik içeriklerde sonradan eklenen uyarılar, açılır menüler ve modal pencereler de test edilmelidir. İlk yüklemede görünmeyen bir bileşen, kullanıcı yolculuğunun kritik adımında ortaya çıkabilir.

Gerçek kullanıcı testleri, matematiksel sonucu tamamlar. Düşük görme yaşayan kullanıcıların farklı ekran, yakınlaştırma ve işletim sistemi ayarlarıyla yaptığı denemeler tasarım kararlarını doğrular.

Bir sayfa kontrast kriterini geçse bile metin görüntünün içinde kayboluyorsa düzeltme yapılmalıdır. Uyum eşiği, tasarım kararlarının ulaşması gereken alt sınırdır; okunabilirliğin üst sınırı değildir.

Web sitesi yenilemesinde renk kontrastı nasıl yönetilir?

Web sitesi yenilemesinde kontrast kontrolü, geliştirme sonuna bırakılmamalıdır. Renk paleti oluşturulurken her metin, arka plan ve durum rengi için kullanım amacı yazılmalıdır.

Bir tasarım sistemi, renkleri yalnızca “açık mavi” veya “koyu gri” adıyla değil, işleviyle tanımlamalıdır. Örneğin gövde metni, ikincil metin, bağlantı, hata ve odak renkleri ayrı token olarak tutulabilir.

İkincil metin rengi, yardımcı bilgi olduğu gerekçesiyle gereğinden fazla açılmamalıdır. Tarih, kategori, form açıklaması veya dipnot gibi içerikler de kullanıcıya bilgi veriyorsa okunabilir olmalıdır.

Renk paletini değiştirmeden önce en çok kullanılan sayfaları ve dönüşüm adımlarını listeleyin. Ana sayfa, hizmet detayları, form sayfası ve mobil menü genellikle ilk test grubunda yer alır.

• Gövde metni en az 4,5:1 oranını sağlıyor mu?
• Büyük başlıkların oranı en az 3:1 mi?
• Bağlantılar renk dışında da ayırt ediliyor mu?
• Butonların hover ve focus durumları test edildi mi?
• Form hata mesajları yalnızca renge bağlı mı?
• İkon ve grafiklerde anlam renk dışında aktarılıyor mu?
• Degrade ve görsel üstü metinler farklı noktalarda kontrol edildi mi?
• Mobil görünümde değişen arka planlar yeniden ölçüldü mü?

Yeni bir sayfa şablonu eklenirken aynı kontrol listesi tekrar kullanılmalıdır. Böylece kontrast, tek seferlik denetim yerine yayın sürecinin kalıcı bir parçası olur.

Web sitesi bütçesi ve yenileme kapsamı belirlenirken erişilebilirlik kontrollerini iş kalemi olarak yazmak, sonradan çıkan düzeltmeleri azaltır. İzmir'de web sitesi yaptırma maliyeti planlanırken bu teknik kontrolün kapsamını ayrıca sorun.

Sayfa performansı da yenileme sırasında birlikte izlenebilir. Özellikle stil değişiklikleri sonrası oluşan görsel kaymalar için web sitesinde CLS kaymasının nasıl düzeltileceği konusundaki kontroller, kontrast testi kadar ayrı yürütülmelidir.

Erişilebilirlik çalışmasını yalnızca renk değişikliği olarak görmeyin. Landing page anatomisi ve dönüşüm optimizasyonu incelenirken form, buton, mesaj ve odak durumlarını aynı kullanıcı akışı içinde test edin.