Renk Kontrast Kontrolü

Renk kontrast kontrolü nedir, neden önemlidir?

Renk kontrast kontrolü, bir metnin rengiyle arkasındaki zeminin rengi arasındaki parlaklık farkını ölçüp WCAG eşikleriyle karşılaştırma işidir. Sonuç 1:1 ile 21:1 arasında bir orandır: 1:1 iki rengin aynı olduğunu, 21:1 ise beyaz zemindeki siyah yazıyı anlatır. Bu araç oranı W3C formülüyle hesaplar, AA ve AAA sonucunu metin boyutunuza göre verir ve geçmeyen renge en yakın erişilebilir tonu önerir.

Kontrast yalnız görme engelli kullanıcıları ilgilendirmez. Güneş altında telefona bakan, yaşı ilerledikçe renk ayrımı zayıflayan ya da ekran parlaklığını düşük tutan herkes zayıf kontrastı hisseder. Üstelik sorun çok yaygın: WebAIM Million raporunun 2026 sürümüne göre incelenen bir milyon ana sayfanın %83,9'unda WCAG AA eşiğinin altında metin vardı.

Ben web tasarım projelerinde renk paletini onaylamadan önce her metin ve zemin çiftini bu şekilde ölçüyorum. Erişilebilirliğin genel çerçevesini merak ediyorsanız web erişilebilirliği ve WCAG standartları yazıma göz atabilirsiniz.

WCAG kontrast oranı nasıl hesaplanır?

Hesap dört adımda ilerler. İlk olarak her renk kanalını 255'e bölüp 0 ile 1 arasına çekersiniz. Ardından ekranların gama eğrisini geri alırsınız: değer 0,04045 ve altındaysa 12,92'ye bölersiniz, üstündeyse ((c + 0,055) / 1,055) ifadesinin 2,4. kuvvetini alırsınız. Sonra kanalları gözün duyarlılığına göre tartıp göreli parlaklığı bulursunuz: yeşil 0,7152, kırmızı 0,2126, mavi ise yalnız 0,0722 ağırlık taşır.

Son adımda açık rengin ve koyu rengin parlaklığına 0,05 ekleyip ikisini birbirine bölersiniz. Bu 0,05 payı ekrandaki yansımayı ve ortam ışığını temsil eder; bu yüzden siyah zemin bile oranı sonsuza götürmez ve üst sınır 21:1'de kalır.

Ağırlıkların pratik sonucu şudur: formül sarı ve yeşil tonları çok parlak, mavi ve mor tonları ise koyu kabul eder. Örneğin saf mavi #0000FF beyaz zeminde 8,59:1 verir; saf sarı #FFFF00 ise siyah zeminde 19,55:1 alırken beyaz zeminde 1,07:1'de kalır. Renk kodlarınızı HEX, RGB ve HSL arasında çevirmek için HTML renk kodları aracını kullanabilirsiniz.

AA mı AAA mı: hangi düzeyi hedeflemelisiniz?

AA, WCAG uyumunun pratik tabanıdır. Avrupa'daki EN 301 549 standardı ve ABD'deki Section 508 gibi düzenlemeler bu düzeyi esas alır. Normal metin için 4,5:1, büyük metin için 3:1 ister. AAA daha katıdır ve aynı metinler için 7:1 ile 4,5:1 arar. Kısacası AA herkesin okuyabilmesini, AAA ise uzun süre yorulmadan okuyabilmesini hedefler.

W3C, bütün bir sitede AAA'yı genel kural olarak zorunlu tutmayı önermez, çünkü bazı içeriklerde tüm AAA kriterlerini karşılamak mümkün değildir. Benim yaklaşımım şu: sitenin tamamında AA'yı şart koşarım, uzun okunan gövde metninde ve form etiketlerinde ise AAA'ya yaklaşmaya çalışırım. Blog yazısı, sözleşme metni ve ürün açıklaması gibi alanlarda 7:1 gerçekten fark yaratır.

Araç bu ayrımı rozetle özetler. Oran metin boyutunuza göre AAA eşiğini geçiyorsa AAA geçer, yalnız AA eşiğini geçiyorsa AA geçer, AA'nın altındaysa AA'dan kalır yazar. Büyük sayı da aynı mantıkla renk değiştirir: yeşil geçtiğini, turuncu yalnız 3:1'i aştığını, kırmızı ise 3:1'in de altında kaldığını gösterir. Metnin dil olarak ne kadar kolay okunduğunu ayrıca okunabilirlik analizi aracıyla ölçebilirsiniz.

Büyük metin, butonlar ve ikonlar için hangi eşik geçerli?

WCAG'de büyük metin en az 18 punto ya da en az 14 punto kalın yazıdır. Bir punto 1,333 CSS pikseline denk gelir; böylece 18 punto 24px, 14 punto ise 18,66px eder. W3C'nin açıklama sayfası ikinci değeri yaklaşık 18,5px diye yuvarlar. Ancak araç kesin hesaba dayanan 18,66px sınırını kullanır, yani sınırdaki bir başlığı büyük metin saymadan önce emin olur.

Metin dışındaki öğeler için ayrı bir kriter vardır: 1.4.11 Metin Dışı Kontrast. Bu kriter aşağıdaki öğelerde komşu renge karşı en az 3:1 ister:

• Form alanları: kenar çizgisi alanı fark etmenin tek yoluysa çizgi zemine karşı 3:1 olmalı.
• Butonlar: dolgu rengi ya da kenar butonu zeminden ayırıyorsa o fark 3:1 olmalı; buton içindeki yazı ise normal metin kuralına bağlıdır.
• Odak göstergesi: klavyeyle gezinirken çıkan çerçeve zeminde kaybolmamalı.
• Anlam taşıyan ikonlar ve grafikler: yazısız bir yazdır ikonu ya da grafikteki bir çizgi de 3:1 ister.

Devre dışı öğeler, logolar ve marka adları bu şartın dışındadır. Buna karşılık yer tutucu (placeholder) metin muaf değildir; W3C onu açıkça 1.4.3 kapsamında sayar, yani 4,5:1 ister.

Renk kontrast kontrolünde saydam renkler ve görsel üstü metin

Tasarım sistemleri metin rengini çoğu zaman saydamlıkla tanımlar: rgba(0, 0, 0, 0.6) ya da #00000099 gibi. Bu durumda ekranda gördüğünüz renk, metin rengiyle zeminin karışımıdır. Araç bu karışımı C = a × C metin + (1 - a) × C arka plan formülüyle yapar, sonucu ekranın gösterebildiği 8 bitlik renge yuvarlar ve oranı bu gerçek renkle hesaplar. Örneğin %50 saydam siyah, beyaz zeminde #808080 olur ve 3,94:1 verir.

Arka planın kendisi saydamsa altında ne olduğunu araç bilemez. Bu durumda beyaz zemin varsayar ve bunu panelde not olarak yazar. Koyu bir sayfa üstündeki yarı saydam kartı ölçüyorsanız kartın ekrandaki son rengini doğrudan arka plan alanına girin.

Görsel ve gradyan üstündeki metinde tek ölçüm yetmez. Metnin geçtiği en açık ve en koyu noktanın rengini tarayıcının renk damlalığıyla alın ve ikisini ayrı ayrı test edin. Sonuç geçmiyorsa metnin arkasına yarı saydam koyu bir katman ekleyin; ardından o katmanın ekrandaki rengini arka plan olarak girip yeniden ölçün.

Kontrast yetmezse rengi nasıl düzeltirsiniz?

Araç geçmeyen bir çift gördüğünde rengi rastgele koyulaştırmaz. Rengin tonunu ve doygunluğunu sabit tutar, yalnız HSL açıklığını 0,5 puanlık adımlarla iki yöne tarar ve eşiği geçen en yakın rengi bulur. Böylece önerilen renk markanızın aynı ailesinden gelir: kırmızı kırmızı kalır, yalnız koyulaşır ya da açılır.

Öneriler iki gruptadır: metin rengini değiştirmek ve arka planı değiştirmek. Hangisini seçeceğiniz tasarıma bağlıdır:

• Buton ve rozetlerde çoğunlukla zemini koyulaştırmak daha iyi sonuç verir, çünkü beyaz yazı zaten en açık renktir.
• Gövde metninde zemini sabit tutup metin rengini koyulaştırmak sayfanın genel görünümünü korur.
• Orta tonlu zeminlerde, örneğin #777777 üzerinde, AAA hiçbir metin rengiyle mümkün olmaz; araç bunu Bu tonla ulaşılamıyor diye gösterir ve zemini değiştirmeniz gerektiğini anlatır.

Onayladığınız renkleri tek seferlik düzeltme olarak bırakmayın; tasarım sistemine metin rengi, ikincil metin ve buton zemini gibi adlandırılmış değerler olarak kaydedin. Bu konuyu tasarım sistemi yazımda ayrıntılı anlattım. Dönüşüm getiren butonlarda renk seçimi için CTA butonu örneklerine de bakabilirsiniz.

Türkiye'de ve Avrupa'da erişilebilirlik kuralları kontrastı nasıl etkiliyor?

Türkiye'de 21 Haziran 2025 tarihli Resmî Gazete'de yer alan 2025/10 sayılı Cumhurbaşkanlığı Genelgesi, web siteleri ve mobil uygulamaların erişilebilirliğini gündeme taşıdı. Genelge kamu kurumları, bankalar, özel hastaneler ve bazı ulaşım ve turizm işletmeleri gibi kuruluşlara 1 yıl, 6563 sayılı Kanun kapsamında elektronik ticaret yapan hizmet sağlayıcılara ise 2 yıl süre tanıyor. Ölçüt olarak da Aile ve Sosyal Hizmetler Bakanlığının yayımlayacağı Kontrol Listesi A Seviyesi ile WCAG 2.2 kılavuzunu gösteriyor.

Burada ince bir nokta var: kontrast kriteri 1.4.3, WCAG'de A değil AA düzeyindedir. Kontrol listesinin tam kapsamını Bakanlığın güncel metninden kontrol edin. Ben yine de ticari sitelerde AA kontrastı taban kabul etmenizi öneririm, çünkü okunmayan bir buton satış kaybettirir. Kritik işlemlerde güncel mevzuatı mutlaka doğrulayın.

Avrupa'ya satış yapıyorsanız tablo daha net: Avrupa Erişilebilirlik Yasası (Direktif 2019/882) 28 Haziran 2025'ten beri e-ticaret dahil birçok hizmeti kapsıyor ve şirketler uyumu genellikle WCAG kriterlerini içeren EN 301 549 standardıyla gösteriyor. Mevcut sitenizin genel durumunu görmek için UX denetimi iyi bir başlangıç noktasıdır.

APCA nedir, WCAG 2 kontrast oranının yerini alacak mı?

APCA (Accessible Perceptual Contrast Algorithm), WCAG 3 çalışmaları sırasında önerilen ve insan algısına daha yakın sonuç vermeyi amaçlayan bir kontrast yöntemidir. Sonucu bir oran değil, Lc değeridir. İşareti de anlam taşır: artı değer açık zemindeki koyu metni, eksi değer koyu zemindeki açık metni gösterir.

Ancak APCA bugün yürürlükteki hiçbir standardın parçası değildir ve WCAG 3 hâlâ çalışma taslağı aşamasındadır. Bu yüzden araç Lc değerini yalnız bilgi amaçlı gösterir; geçer ya da kalır kararını her zaman WCAG 2.2 oranına göre verir.

İki yöntemin ayrıştığı yer genellikle orta tonlu zeminlerdir. Örneğin #F97316 turuncu zeminde siyah yazı WCAG 2'de 7,49:1 ile AAA geçer, beyaz yazı ise 2,80:1 ile kalır. APCA ise beyaz yazıya daha yüksek değer verir: Lc -58,4'e karşı Lc 50,9. Böyle bir çiftte önce WCAG sonucunu esas alın, ardından yazıyı büyütmek veya zemini koyulaştırmak gibi iki ölçümü de rahatlatan çözümü tercih edin.