Kontrast Kontrolcüsü — Ücretsiz WCAG Erişilebilirlik Kontrast Oranı Aracı

Renk, tasarımın en güçlü araçlarından biridir, ancak aynı zamanda en dışlayıcı olanlardan biri de olabilir. Harika bir renk paleti, kullanıcılarınızın metni okuyamaması durumunda hiçbir şey ifade etmez. Web'de en yaygın erişilebilirlik başarısızlığı kötü kontrasttır ve 300 milyondan fazla renk algısı yetersizliği olan kişiye ve parlak güneş ışığında mobil cihazlarda ya da parlaklığı azalan ekranlarda çalışan milyonlarca kişiye etki eder. Ücretsiz Kontrast Kontrolcümüz, herhangi iki renk arasındaki kontrast oranını anında hesaplar ve WCAG AA ve AAA standartlarına göre nerede olduklarını size tam olarak söyler — böylece tahmin etmeden kapsayıcı tasarımlar oluşturabilirsiniz.

Renk Kontrastı Nedir ve Neden Önemlidir?

Renk kontrastı, iki renk arasındaki algılanan parlaklık farkıdır. Metin bir arka planda olduğunda, aralarındaki kontrast metnin okunabilirliğini belirler. Renklerin parlaklık açısından çok benzer olması, düşük görüşlü, renk körlüğü olan veya doğrudan güneş ışığında ekranı squinting (göz kırpmak) yapan kullanıcılar için birbirine karışır ve görünmez hale gelir.

Web İçeriği Erişilebilirlik Kılavuzları (WCAG), insan gözü tarafından algılanan parlaklık olan bağıl ışık yoğunluğu kullanarak matematiksel olarak kontrastı tanımlar. Bu formül, gözlerimizin kırmızı veya mavi ışığa göre yeşil ışığa daha duyarlı olduğunu hesaba katar. Aynı sayısal parlaklıkta olan parlak kırmızı ve parlak yeşil renklerden, yeşilin daha parlak göründüğünü belirtir. WCAG formülü bu durumu düzelterek, insan algısını doğru şekilde yansıtan bir kontrast oranı üretir.

Oran, 1:1 (aynı renk, kontrast yok) ile 21:1 (sağlam siyah üzerinde safran beyaz, maksimum kontrast) arasında değişir. En erişilebilir tasarımlar genellikle ortada yer alır. WCAG AA için normal metin için 4.5:1 minimum oranı, 7:1 ise daha sıkı AAA standartıdır. Bu sayılar rastgele değil; farklı görsel engelli kullanıcıların gerçekten ayırt edebildiği şeylere dayanmaktadır.

Erişilebilirlikten öteye geçerek, kontrast herkesi etkiler. Yüksek kontrastlı tasarımlar küçük ekranlarda, parlak ortamlarda ve 40 yaş üstü kullanıcılar için doğal olarak kontrast hassasiyetini kaybeden gözler için daha kolay okunabilir. Düşük kontrastlı metin, tasarımcının kalibre edilmiş monitöründe zarif görünebilir, ancak bütçeli bir laptop, çatlamış bir telefon ekranı veya aydınlatılmış bir odadaki bir projektörde okunamaz hale gelir.

Kontrast Kontrolcüsünü Nasıl Kullanabilirsiniz

Bir renk kombinasyonunu test etmek birkaç saniye alır. İki renk seçin ve anında karar verin.

1. Ön plan rengini seçin. Genellikle metin renginizdir. Renk swatch'ını tıklayarak yerel renk seçiciyi açın veya doğrudan girdi alanına bir HEX kodu yazın.
2. Arka plan rengini seçin. Metnin arkasındaki yüzeydir. Aynı renk seçiciyi kullanın veya manuel olarak bir HEX kodu girin.
3. Kontrast oranını okuyun. Araç, örneğin 7.23:1 gibi, tam olarak oranı öne çıkarır — böylece nerede olduğunuzu tam olarak bilirsiniz.
4. WCAG uyumluluğunu kontrol edin. Sonuçlar tablosu şu durumları gösterir:
   • Normal metin için WCAG AA (4.5:1) ve AAA (7:1)
   • Büyük metin için WCAG AA (3:1) ve AAA (4.5:1)
   • UI bileşenleri için WCAG AA (3:1)
5. Renkleri bağlamda önizleyin. Araç, seçtiğiniz kombinasyonla örnek normal metin ve büyük başlık metnini render eder, böylece gerçek dünya okunabilirliğini görsel olarak değerlendirebilirsiniz.
6. Renkleri değiştirin. Ters kombinasyonu test etmek için çevirme butonuyla renkleri değiştirin — karanlık arka planda açık metin yerine açık metin karanlık arka planda.
7. Oranı kopyalayın. Belgeleme veya tasarım sistemi notları için bir tıklamayla kopyalayın.

Tamamı anında gerçekleşir. Herhangi bir rengi ayarlayın ve oran, uyumluluk tablosu ve önizleme anında güncellenir.

Kontrast Oranlarını Anlamak

Oran Aralığı	Erişilebilirlik Seviyesi	Ne Anlama Gelir
1:1 ile 2.99:1	Tüm standartları geçmez	Metin arka planla neredeyse ayırt edilemez; okunabilir içeriğe uygun değil
3:1 ile 4.49:1	Büyük metin ve UI için AA geçer	Büyük başlıklar (18pt+), butonlar, ikonlar ve kenarlıklar için uygun; normal metin için başarısız
4.5:1 ile 6.99:1	Tüm metin için AA geçer	Normal metin için minimum standart; çoğu kullanıcı için okunabilir
7:1 ile 21:1	Normal metin için AAA geçer	Erişilebilirlik artırılmış; ciddi görüş kaybı olan kullanıcılar için okunabilir; uzun formatta içerik için ideal

"Büyük Metin" Ne Anlama Gelir?

WCAG, büyük metin olarak 18 punto (24 piksel) veya daha büyük, veya 14 punto kalın (yaklaşık 18.67 piksel kalın) veya daha büyük tanımlar. Başlıklar, çağrı için butonlar ve ana metin genellikle büyük metin olarak kabul edilir, bu da normal metin için daha düşük kontrast oranı ile geçebilecekleri anlamına gelir. Ancak her yerde en az 4.5:1 hedeflemek hala en iyi uygulamadır çünkü tutarlılık sağlar ve tasarımın boyutlandırma ve yakınlaştırma karşıtı olmasına yardımcı olur.

Neden Formül Bağıl Işık Yoğunluğunu Kullanır

WCAG kontrast formülü basit bir RGB değeri karşılaştırması değildir. İlk olarak her renk bağıl ışık yoğunluğuna dönüştürülür — bu, insan gözlerinin yeşil ışığa daha duyarlı olduğunu dikkate alan algılanan parlaklık ölçümüdür. Bu nedenle, RGB'de aynı parlaklık değerlerine sahip iki renk çok farklı kontrast oranları üretebilir. Saf kırmızı (#FF0000) ve saf yeşil (#00FF00) her ikisi de bir kanalda maksimum yoğunluğa sahiptir, ancak yeşil insan gözlerine göre daha parlak görünür, bu nedenle bağıl ışık yoğunluğu daha yüksektir.

Ana Özellikler

Özellik	Ne Yapar	Neden Önemlidir
Gerçek Zamanlı Kontrast Hesaplama	Renkleri ayarladıkça anında WCAG oranını hesaplar	Palet seçeneklerini yineleyin ve uyumluluk anında güncellenir
WCAG AA & AAA Testi	Normal metin, büyük metin ve UI bileşenleri için her iki seviyede geçip geçmediğini gösterir	Hangi standartlara uydığınızı bilmeden hafızada tutmaya gerek kalmadan
Canlı Metin Önizlemesi	Seçtiğiniz renklerle örnek metin ve büyük başlıklar oluşturur	Matematiksel olarak değil görsel olarak okunabilirliği değerlendirin
Renk Değiştirme	Bir tıklamayla ön plan ve arka planı değiştirir	Koyu arka planda açık metin ve açık arka planda koyu metin varyantlarını anında test edin
HEX Girişi	Tasarım sisteminizden tam renk eşleme için doğrudan HEX kodlarını kabul eder
Oran Kopyalama	Kontrast oranını panoya kopyalar	Tasarım belgeleri ve denetimlerde erişilebilirlik uyumluluğunu belgeleyin
Gizlilik Önceliği	Tüm hesaplamalar tarayıcınızda yapılır	Tasarım verileri herhangi bir sunucuya gönderilmez

Bazı temel kontrast araçları sadece bir sayı gösterirken, bu kontrolcü oranı bağlamda gösterir. Sadece kombinasyonunuzun 4.2:1 skorladığını değil, aynı zamanda normal metin için AA'yi geçemediğini ancak büyük metin için geçtiğini görebilirsiniz — bu, metni koyulaştırıp font boyutunu artırıp karar vermenize yardımcı olan eylemli bilgi sağlar.

Gerçek Dünya Kullanım Durumları

Erişilebilirlik Arayüzleri Oluşturan Web Tasarımcıları Bir tasarımcı, koyu deniz mavisi arka planı ve açık gri metinle bir landing page oluşturuyor. Kombinasyon, monitöründe zarif görünüyor, ancak kontrast kontrolcüsü sadece 3.8:1 oranını gösteriyor — normal metin için AA'yi geçmiyor. Tasarımcı metni biraz daha koyulaştırarak 4.6:1 elde ediyor ve artık düşük görüşlü kullanıcılar için okunabilir hale geliyor, karanlık estetikten ödün vermeden.

Tasarım Sistemlerini Uygulayan Geliştiriciler Bir geliştirici, onlarca renk tokenı olan bir bileşen kütüphanesi koruyor. Yeni bir tema yayınlamadan önce her metin-arka plan çiftini kontrast kontrolcüsüne geçiriyor. Erken başarısızlıkları yakalayarak erişilebilirlik hatalarının üretimde ulaşmasını engelliyor ve denetim sonrası bileşenleri yeniden tasarlamak için maliyetli bir yeniden tasarımın önüne geçiyor.

Belge Formatlama Yapan İçerik Oluşturucuları Bir pazarlama uzmanı, renkli kutular ve vurgulanan metin içeren bir PDF kılavuzu oluşturuyor. Kontrast kontrolcüsünü kullanarak her metin renginin her arka planda WCAG AA'yi geçip geçmediğini doğruluyor. Bu, PDF'nin HTML'e dönüştürüldüğünde veya ekran okuyucular tarafından okunduğunda erişilebilir olduğundan emin olur ve organizasyonu erişilebilirlikle ilgili şikayetlerden korur.

Erişilebilirlik Denetimleri Yapan Ürün Yöneticileri Bir ürün yöneticisi, VPAT (Gönüllü Ürün Erişilebilirlik Şablonu) incelemesi için hazırlanıyor. Uygulamadaki her renk kombinasyonunu WCAG standartlarına göre test ederek her birinin oranlarını belgelemek için kontrast kontrolcüsünü kullanıyor. Bu, dikkatli olunduğunu ve uyumluluğu gösteren bir denetim izi oluşturur.

Öğretmenlerin Öğrenme Materyalleri Oluşturması Bir öğretmen, slaytlar, testler ve okuma materyalleri içeren bir çevrimiçi kurs oluşturuyor. Her metin-arka plan kombinasyonunu kontrol ederek görsel engelli öğrencilerin eşit şekilde katılabileceği emin oluyor. Yüksek kontrast, öğrencilerin telefon veya tabletlerde değişen ışık koşullarında dersleri izlemesine de yardımcı olur.

Mobil Uygulama Tasarımcıları Mobil ekranlar her yerde görülür — dışarda güneş ışığında, içerde floresan ışıklar altında ve yatakta gece modu etkinleştirildiğinde. Kontrast kontrolcüsü, tasarımcılara bu değişken koşulları dikkate alarak ekran parlaklığı düşük, ekran kirli veya anti-ışık filtreleri uygulandığında da okunabilir kalacak şekilde kombinasyonların yeterli boşluk bırakmasını sağlar.

İpuçları ve En İyi Uygulamalar

• İmkâna kadar AAA hedefleyin. AA çoğu yerde yasal minimumdur, ancak AAA herkes için daha iyi bir deneyim sunar. Marka renkleriniz 7:1 elde edebiliyorsa ve çakışmıyorsa onları kullanın. Küçük görsel ödün, büyük erişilebilirlik kazanı.
• Renkten yalnızca bağımlı olmayın. İdeal kontrast bile herkese erişilebilir değildir. Renk körlüğü olan kullanıcılar kırmızı ve yeşili ayırt edemeyebilir. Renk, ikonlar, etiketler, desenler veya metinle birlikte kullanarak anlam ifade etmeli.
• Tüm paletinizi test edin. Bir tasarım sistemi on tane metin rengi ve on tane arka plan rengi olabilir. Bu, yüz kombinasyonu anlamına gelir. Tüm çiftleri sistematik olarak test edin — en azından en yaygın olanları — erişilebilirlik başarısızlıklarının gizlenmesini önlemek için.
• Odak durumlarını ve etkileşimli öğeleri kontrol edin. Butonlar, bağlantılar, form alanları ve anahtarlar, çevrelerine karşı en az 3:1 kontrast gerektirir. Metin için geçen bir buton, UI bileşeni olarak çok ince bir kenarlıkla başarısız olabilir.
• Şeffaflık ve örtüleri hesaba katın. Metnin bir resim veya yarı şeffaf örtü üzerinde olduğunda etkili arka plan renklerin bir karışımıdır. Kontrast kontrolcüsü katı renkleri test eder, örtüleri test etmek için önce karışım sonucunu hesaplayın veya konservatif şekilde test edin.
• Farklı yakınlaştırma seviyelerinde test edin. Düşük görüşlü kullanıcılar %200 veya daha fazla yakınlaşırlar. Yüksek yakınlaşımda metin daha büyük görünür, bu da faydalıdır, ancak kontrast oranı aynı kalır. Oranlarınızın yakınlaştırmaya dayanabilecek kadar güçlü olduğundan emin olun.
• Oranlarınızı belgeleyin. Renk çiftini sonlandırdığınızda, tasarım sistemi belgelerinizde kontrast oranını kaydedin. Bu, ürünün gelişimine rağmen erişilebilirliği korumak için gelecekteki tasarımcı ve geliştiricilere yardımcı olur.

Sıkça Sorulan Sorular

Kontrast Kontrolcüsü ücretsiz mi?

Evet. Kontrast Kontrolcüsü sınırsız kullanım, kayıt veya reklam olmadan tamamen ücretsizdir. Gerekirse ne kadar çok renk kombinasyonu test edin.

WCAG nedir?

WCAG, Web İçeriği Erişilebilirlik Kılavuzları anlamına gelir. W3C tarafından yayınlanan uluslararası tanınmış bir standarttır ve engelli kullanıcılar için web içeriğini erişilebilir hale getirmeyi tanımlar. WCAG 2.1 mevcut sürümüdür ve WCAG 2.2 ek kriterler ekler. Kılavuzlar, A (minimum), AA (standart) ve AAA (artırılmış) olmak üzere üç seviyeye ayrılmıştır.

WCAG AA geçmek için hangi kontrast oranı gerekir?

Normal metin (18pt veya 14pt kalın altında) için en az 4.5:1 gerekir. Büyük metin (18pt veya daha büyük, veya 14pt kalın veya daha büyük) ve UI bileşenleri (butonlar ve form alanları gibi) için en az 3:1 gerekir.

WCAG AA ve AAA arasındaki fark nedir?

AA, ABD'deki Section 508 ve Avrupa Erişilebilirlik Yasası gibi çoğu erişilebilirlik yasası ve kılavuzunın gerekli standart seviyesidir. AAA, daha fazla erişilebilirlik sağlar ancak her yerde gerekli değildir ve genel web içeriği için aşırı sıkı olarak kabul edilir. AAA için normal metin 7:1 kontrast, büyük metin 4.5:1 kontrast gerekir.

RGB veya HSL renklerini test edebilir miyim?

Araç doğrudan HEX renk girişi kabul eder. Eğer RGB veya HSL değerleriniz varsa, önce Renk Seçici aracımızı kullanarak onları HEX'e dönüştürün. HEX kodunu Kontrast Kontrolcüsüne girin ve anında test edin.

Bu araç mobil cihazlarda çalışır mı?

Evet. Kontrast Kontrolcüsü tamamen yanıt verir ve akıllı telefonlar ve tabletlerde çalışır. Renk seçicileri, önizleme metinleri ve sonuçlar tablosu dokunmatik ekranlar ve küçük ekranlar için optimize edilmiştir.

Bu aracı baskı tasarımı için kullanabilir miyim?

WCAG, dijital içerik için özel olarak tasarlanmış olsa da kontrast ilkeleri baskı için de uygulanabilir. 4.5:1 veya daha yüksek bir oran genellikle baskı malzemelerinde okunabilir metin için garanti eder. Ancak baskı tasarımcıları, dijital kontrast oranlarına ek olarak mürekkep kaplaması, kağıt kalitesi ve görüntü mesafesi gibi faktörleri de dikkate almalıdır.

Marka renklerim WCAG'ı geçemiyorsa ne olur?

Marka renkleriniz gerekli oranı karşılamıyorsa birkaç seçenek vardır. Metni biraz daha koyulaştırın veya koyulaştırın. Metni "büyük metin" olarak kategorilendirin, bu da daha düşük oranı gerektirir. Metin gölgesi veya konturu ekleyin ve algılanan kontrastı artırın. Veya uyumsuz renk sadece dekoratif öğeler için kullanın ve işlevsel metin için erişilebilir bir alternatif seçin.