Metin ve arka plan renk kombinasyonunun WCAG 2.1 erişilebilirlik standartlarına uygunluğunu test etmenin adım adım anlatımı.
Bu aracı hemen kullanın
Hesaplamayı yapmak için araca gidin
Kontrast Kontrolcüsü; metin ve arka plan renkleriniz arasındaki WCAG 2.1 kontrast oranını hesaplar ve AA, AAA seviyelerinde geçer mi düşer mi onu söyler. Görme güçlüğü olan kullanıcıların içeriğinizi okuyabilmesini sağlamak için tüm web ve baskı tasarımlarında kullanılması önerilen bir erişilebilirlik testidir.
Üstteki Yazı Rengi alanına HEX kodunu (örneğin #1A1A1A) yazın veya renk seçicisinden seçin. Kod geçersizse kenarlık kırmızıya döner.
Aynı şekilde Arka Plan alanına HEX kodu girin. Tasarımınızdaki gerçek arka plan rengini seçmeye dikkat edin.
Sayfada anında 1:1 ile 21:1 arasında bir oran çıkar. 4.5:1 ve üstü normal metin için, 3:1 ve üstü büyük metin için AA seviyesinde geçerlidir.
Sonuç kartında dört adet rozet (AA Normal, AA Büyük, AAA Normal, AAA Büyük) görünür. Yeşil tik geçti, kırmızı çarpı kaldı anlamına gelir.
Yer Değiştir butonu metin ve arka plan renklerini takas eder; aynı kombinasyonun ters yönde nasıl çalıştığını test etmek için faydalıdır.
Bir buton tasarımında metin rengi #999999 ve arka plan rengi #FFFFFF olarak girildi. Kontrast oranı 2.85:1 olarak hesaplandı; bu oran AA Normal eşiği olan 4.5:1 ve AA Büyük eşiği olan 3:1 değerlerinin altında kaldığı için her iki seviyede başarısız işareti çıktı. Aracın önerdiği #595959 metin rengi ile oran 7.04:1'e yükseldi ve AAA Normal seviyesinde geçti, butonun erişilebilirliği iyileşti.
Metni koyulaştırırken arka planın rengini de göz önünde bulundurmamak çoğu kontrast sorununun temelidir. Her iki rengi birlikte değerlendirin.
WCAG'da büyük metin 24 px (18 pt) ve üstü düz, 18.66 px (14 pt) ve üstü kalın metin demektir. Daha küçük metin için 4.5:1 eşiği geçerlidir.
Kontrast geçer ama renk seçimi (örneğin yeşil-kırmızı) renk körü kullanıcılar için ayırt edilemez olabilir. Renk körlüğü simülatörü ile birlikte test edin.
AAA seviyesi (normal metin için 7:1) erişilebilirliği belirgin biçimde artırır. Mümkün olan her yerde AAA hedeflenmesi önerilir.
Yarı saydam metinlerde (örneğin opacity 0.6) görünen renk arka planla harmanlanır; kontrast testini gerçek gözüken renk üzerinden yapın, kaynak rengi üzerinden değil.
AA seviyesi yasal asgari erişilebilirlik standardıdır; normal metin için 4.5:1, büyük metin için 3:1 oran ister. AAA en yüksek seviyedir ve normal metin için 7:1, büyük metin için 4.5:1 oran ister. AAA tüm tasarımlar için uygulanabilir olmasa da kritik içerikte hedeflenmelidir.
Kontrast oranı iki rengin göreceli parlaklık (luminans) değerlerinin oranıdır. Aynı renk için 1:1, saf siyah-beyaz için 21:1 değerini alır. Bu aralık WCAG 2.1 formülünün matematiksel sınırıdır.
Tüm metinler, ikon-arka plan, form alan kenarlıkları, vurgulanmış durumlar (focus), bağlantılar ve grafik içeriklerin önemli bilgi taşıyan kısımları için kontrast kontrolü zorunludur. Yalnızca dekoratif öğeler bu kapsam dışındadır.
İki yöntem aynı sonucu verir; renk seçici görsel ayar için, HEX kodu tasarım dosyasından doğrudan kopyalama için pratiktir. Kurumsal renk paletleriniz için HEX kodu sözlüğü tutmanız önerilir.
Evet. WCAG dijital ortam için yazılmış olsa da kontrast prensibi baskıda da kullanıcı deneyimini iyileştirir. Özellikle yaşlı okuyuculara hitap eden baskı materyallerinde 4.5:1 hedeflenmelidir.
Marka renginizi koruyup parlaklık değerini ayarlayabilir, daha koyu veya açık tonunu kullanabilirsiniz. Aracın önerisi yön gösterir; nihai renk seçimi marka yönergesi ve kontrast eşiği birlikte değerlendirilerek yapılır.
Her renk sRGB değerlerinden lineer RGB'ye dönüştürülür, göreceli parlaklık (luminans) hesaplanır ve (L1 + 0.05) / (L2 + 0.05) formülü uygulanır. L1 daha açık, L2 daha koyu rengin parlaklığıdır.
Bu aracı kullanarak hesaplamanızı hemen yapın.
Kontrast yetersizse araç, mevcut arka plana uygun siyah veya beyaz öneri verir ve hedef oranı (örneğin 7:1) yakalayan ayarlanmış renk önerir. Tasarımınıza bu yeni HEX kodunu uygulayın.