Kontrast Oranı Kontrol Aracı
Arka planınız ile yazı fontunuz arasındaki okunabilirlik eşiğini WCAG şartlarıyla test edin.
Geçersiz puan alırsanız sistem size erişilebilir bir renk önerip puan verir ve sertifika sunar.
🔤 Metin Rengi
🎨 Arkaplan Rengi
Bu normal metin (16px) önizlemesidir
Bu kalın metindir (16px kalın)
Bu büyük metindir (24px)
Bu büyük kalın metindir (18px kalın)
Kontrast Oranı
12.63 : 1
AA Normal Metin
≥ 4.5:1
AA Büyük Metin
≥ 3:1
AAA Normal Metin
≥ 7:1
AAA Büyük Metin
≥ 4.5:1
💡 AA standardını karşılamak için önerilen renkler:
Metin rengini ayarla:
Arkaplan rengini ayarla:
🏆 WCAG AA Uyumluluk Sertifikası
* '𝕏’da Paylaş' tıklandığında sertifika otomatik olarak da kaydedilir.
📋 CSS Kodu
Hakkında
Web veya uygulamanızın renk kombinasyonlarının WCAG 2.1 kontrast standartlarını karşılayıp karşılamadığını anında kontrol etmek için ücretsiz bir araç. Düşük kontrast, görme bozukluğu olan kişiler için metnin okunmasını zorlaştırır.
Renkleriniz kalite standartlarında başarısız olduğunda, bu araç en yakın geçen rengi otomatik olarak önerir, böylece tasarımınızı kökten değiştirmeden erişilebilirliği artırabilirsiniz.
AA standardını başarıyla geçtiğinizde, küresel olarak referans gösterebileceğiniz resmi bir WCAG AA Uyumluluk Sertifikası kaydedebilir ve oluşturabilirsiniz.
Nasıl Kullanılır
Renkleri Girin
Renk seçiciye tıklayın veya hem metin hem de arka plan rengi için doğrudan bir HEX / RGB kodu girin.
Sonuçları Görün
Kontrast oranı ve WCAG AA / AAA geçme / kalma durumu canlı bir önizlemeyle gerçek zamanlı güncellenir.
Sertifika Üretin
AA uygunluk eşiğini aştıysanız, arayüzden tek tıkla resmi bir sertifika imajı indirebilir ve paylaşabilirsiniz.
Sözlük
- Kontrast Oranı
- Ön plan ile arka plan renkleri arasındaki ışık farkını temsil eden sayısal bir değer. 1:1 (fark yok) ile 21:1 (beyaz üzerine siyah) arasında değişir.
- WCAG (Web Content Accessibility Guidelines)
- W3C tarafından oluşturulan ve web içeriğinin nasıl daha erişilebilir hale getirileceğini tanımlayan uluslararası standartlar. Dünya çapındaki devletler veya kanunlar bu kurallara uyumu zorunlu kılar.
- AA Standardı
- Orta düzey ve yeterli sayılabilecek kontrast hedefi. Normal boyutlu metinler en az 4.5:1, büyük boyutlu metinler (18pt+) ise 3:1 oran gerektirir.
- AAA Standardı
- Özel erişilebilirlik gereksinimlerini hedefleyen en katı WCAG seviyesidir. Normal metin için 7:1, büyük metin için 4.5:1 oran ister. Tasarım seçeneklerini ciddi oranda kısıtlayabilir.
- Göreceli Parlaklık (Relative Luminance)
- Belirli bir rengin aydınlık derecesini, insan gözünün algı kapasitesine uygun katsayılarla hesaplayarak 0 ile 1 arasına ölçeklendiren değer biçimidir.
- Erişilebilirlik (a11y - Accessibility)
- İnternet ürünlerini ve tasarımlarını; görme engelli, işitme engelli, bilişsel zorlukları bulunan gruplar veya yaş geçişleri olan herkes için daha kapsayıcı hale getirme pratiği.
SSS
- S.Web metinleri için önerilen kontrast oranı ideal olarak nedir?
- WCAG AA seviye standartlarına göre normal metnin arka planla en az 4.5:1 kontrast oranına sahip olması istenir. Metin kalınlaşır veya çok büyürse (18pt+) bu oran 3:1 değerine kadar inebilir.
- S.Renk görme engeli veya renk körlüğü için de işe yarar mı?
- Bu sürüm yalnızca matematiksel (aydınlık karşılaştırması) kontrast doğrulama aracıdır. Renk körlüğünü taklit etmez (simüle etmez). Ancak yüksek kontrast puanları, görsel engel yaşayan herkese otomatik olarak destekleyici olur.
- S.Algoritma yüzdelik değeri ve puanları nasıl tespit ediyor?
- Yazılımlar doğrudan W3C ve WCAG kuruluşlarının sağladığı standart (L1 + 0.05) / (L2 + 0.05) "Bağıl Parlaklık Kat Sayısı" baz alınarak net çalışır.
- S.Kendi projelerimde AA'yı mı yoksa AAA'yı mı hedeflemeliyim?
- Çoğu ticari, ulusal ve global web uygulaması ve standardı için gerekli görülen uyumluluk düzeyi AA'dır. AAA son derece katı bir seviye olduğu için genelde yalnızca eğitim departmanlarına, devlet kurumlarına ve özel platformlara zorunlu tutulmaktadır.
- S.Kurumuma ait renk şemalarını girersem verilerim buluta yükleniyor mu?
- Asla. Hiçbir girdi veriniz sunucuya fırlatılmaz. Tüm analitik hesaplamalar sertifika üretimi dâhil yalnızca ve doğrudan bilgisayarınızda çevrimdışı işleyişe girer.
- S.Sadece #000000 tarzı HEX şemasını mı girmem gerekli, farklı renk kodu destekleniyor mu?
- Hayır. Dilerseniz renk paletine basarak farenizle canlı RGB kodlarını, veya direkt olarak ilgili Red-Green-Blue hanelerine rakam verisi yazarak kullanabilirsiniz.
- S.Otomatik olarak indirebildiğim sertifikanın yasal bir bağlayıcılığı var mı?
- Sertifika, girdiğiniz iki rengin WCAG denklemleri bazında başarı oranını yansıtan dökümentasyonudur. Herhangi avukat, danışman veya tam teşekküllü (tüm kod bazını ele alan) üçüncü taraf erişilebilirlik denetimi niteliği barındırmamaktadır.
Kullanım Senaryoları
Web Tasarım Doğrulaması
Kurumsal sitelerin veya hizmet sayfalarının WCAG normlarına uygun inşa edildiğinden emin olmak için kodlamadan önce kontrol sağlama.
Mobil Arayüz Testleri
Mobil Cihazlarda buton ya da ikaz metinlerinin güneş ışığı veya düşük parlaklıkta tüm gözler için belirgin kalıp kalmadığının simülasyonu.
Kamu Standartlarına Uyum
Global olarak kamu kurumlarının (Devlet, ADA, veya Avrupa regülasyonları) zorunlu kıldığı standart erişilebilirliğe ulaşıldığını kanıtlama.
Slayt ve Sunum Tasarımları
Toplantı veya konferanslarda kullanılan metinlerin ve tabloların uzak mesafedeki seyirciler tarafından dahi en net okunaklığa sahip olmasını doğrulama.