Ücretsiz Gizlilik AraçlarıKontrast Denetleyici
Renk birleşimlerinin erişilebilir olup olmadığını öğrenmek için WCAG metin kontrast oranlarını kontrol edin. Ücretsiz.
Nasıl Kullanılır
- Metninizin rengini girin (ön plan) — paletten seçin, damlalık kullanın veya HEX/RGB değeri yazın.
- Aynı şekilde arka plan renginizi girin.
- Anında kontrast oranını okuyun (ör. 7,2:1) ve AA ile AAA düzeyleri için WCAG geçti/kaldı rozetleriyle birlikte.
- Herhangi bir rengi geçene kadar ayarlayın — bu araç tek tıklamayla en yakın geçen tonu önerir.
Sık Sorulan Sorular
Bu gerçekten ücretsiz mi?
Evet — bu sitedeki her araç %100 ücretsizdir; limitsiz, kayıtsız ve filigransızdır.
Verilerim güvende mi?
Kesinlikle. Tüm işlemler tarayıcınızda yerel olarak yapılır. Dosyalarınız asla bir sunucuya yüklenmez.
Kontrast oranı nedir?
Bu, metin ile arka plan arasındaki açıklık farkını ölçer; 1:1 (aynı ve görünmez) ile 21:1 (saf siyah üzerine saf beyaz, en yüksek) arasında. Oran, göreli parlaklığa dayalı standart WCAG formülüyle hesaplanır — daha yüksek, daha okunabilir demektir.
WCAG AA ve AAA ne anlama geliyor?
WCAG (Web İçeriği Erişilebilirlik Kılavuzları) standardı belirler: AA için normal metin için 4,5:1 ve büyük metin için 3:1 (18pt+ veya 14pt kalın) gerekir — bu çoğu ülkede yasal standarttır. AAA daha katıdır: normal için 7:1 ve büyük için 4,5:1. En az AA'yı hedefleyin; mümkünse AAA.
Büyük metin gerçekten daha kolay bir hedef mi alır?
Evet. Büyük metin (en az 18pt veya 14pt kalın) AA için yalnızca 3:1 ister, çünkü kalın harfler daha düşük kontrastta da okunabilir. Ancak WCAG terimleriyle “büyük”, çoğu gövde metninden daha büyüktür — ve şüpheniz varsa normal metnin 4,5:1 standardına göre test edin.
Marka renklerim başarısız oluyor — ne yapmalıyım?
Nadiren marka renklerinden vazgeçmeniz gerekir: metin tonunu koyulaştırın veya arka plan tonunu açılana kadar açın — aracın öneri özelliği en yakın geçen rengi bulur. Düşük kontrastlı marka çiftlerini büyük başlıklar veya dekoratif öğeler için saklayın, gövde metni için asla.
Renk kontrastı ve okunabilirliğin eksiksiz rehberi
Kontrast, web'deki en etkili erişilebilirlik düzeltmesidir — ve en yaygın başarısız olandır. Beyaz arka planlardaki açık gri metin tasarımcılara “temiz” görünür ve kırk yaş üstü herkes, parlak güneşteki herkes ve az gören yaklaşık %5 kişi dâhil milyonlarca ziyaretçi için okunaksızdır. Bu rehber standardı, matematiği ve tasarımı bozmadan başarısızlıkları düzeltme yöntemini anlatır.
WCAG standardı sade dilde
WCAG 2.x, kontrast için iki uyumluluk düzeyi belirler. AA düzeyi (yasaların işaret ettiği — Avrupa erişilebilirlik yasası ve ABD'deki ADA davaları dâhil) normal metin için 4,5:1 ve büyük metin için 3:1 gerektirir. AAA düzeyi (altın standart) sırasıyla 7:1 ve 4,5:1 gerektirir. Logolar ve tamamen dekoratif metinler muaftır — ancak bilgi iletiyorlarsa geçmeleri gerekir. Ve not: WCAG 3.0 (taslakta) sonunda oranların yerini yeni APCA modeli alacak, ancak oranlar bugün de uygulanabilir standarttır.
Kontrast neden bu kadar sık başarısız olur
Üç suçlu: Moda (çok açık gri portföy galerilerinde trend) veMarka renkleri metin için tam güçle kullanılır (parlak bir marka turuncusu düğme olarak öne çıkar ancak 12px metin olarak başarısız olur) veGörsellerin üzerindeki metin Arka planın değiştiği yerlerde — görüntüdeki parlak bir nokta okunabilirliği sessizce yok edebilir. Görseller için düzeltme: yarı saydam koyu katman veya metnin arkasında katı perde, ardından en kötü bölgeyi yeniden test edin.
Oranın ötesinde: gerçek okunabilirlik
Oran gerekli ama yeterli değildir. İnce yazı tipi ağırlıkları (100–300) formülün tahmin ettiğinden daha fazla kontrasta ihtiyaç duyar — gövde metni için 400+'ı tercih edin. Çok küçük metin (12px'in altında) geçen oranlarda bile zorlanır. Parlak ekranlar, güneş ışığı ve ucuz ekranlar pratik kontrastı azaltır; bu yüzden 4,5:1'i hedef değil, taban olarak görün — 7:1 gövde metni herkes için belirgin şekilde daha rahattır, yalnızca engelli kişiler için değil.
Başarısızlıkları zarifçe düzeltmek
Sıfırdan yeniden tasarlamayın. Kaydırın: metni %10–20 açıklıkla koyulaştırın veya arka plan tonlarına opaklık ekleyin — bu genellikle markada kalırken eşiği aşmak için yeterlidir. Bağlantılar için yalnızca rengin onları ayırt edemeyeceğini unutmayın (alt çizgi de kullanın). Devre dışı düğmeler ve yer tutucular için düşük kontrast beklenir — ancak emin olun ki Neden başka bir yöntemle iletilmelidir. Ve son paletinizi gri tonlamada test edin: hiyerarşi okunabilir kalırsa kontrastınız işini yapıyordur.
Bu kime yardımcı olur (ipucu: herkese)
Erişilebilirlik iyileştirmeleri, adlandırılmış yararlanıcıların çok ötesinde yardımcı olur: altyazılar gürültülü bir kafede yardımcı olur, yüksek kontrast güneş ışığında yardımcı olur ve net odak durumları güçlü klavye kullanıcılarına yardımcı olur. Dünya nüfusunun yaklaşık %15'i bir engellilikle yaşıyor — kontrast için tasarlamak, kitlenizin altıda biri için tasarlamaktır; üstelik ekran günü kötü geçen herkes için de.