Renk kontrastı hesaplama aracı ile erişilebilirlik testi

Metin ve arka plan için WCAG AA ve AAA standartlarına uygunluğu ölçün.

Kontrast oranı

Büyük metin — 24px kalın başlık

Normal gövde metin 15px. Birçok arayüzde okunan standart metin budur, AA uyumunda bu seviye önemlidir.

Renk kontrastı neden önemlidir?

Erişilebilir web tasarımında, metin ile arka plan arasındaki kontrast oranı kullanıcıların içeriği rahatça okuyabilmesi için kritik önemdedir. WCAG standartları, farklı görme yetisine sahip kullanıcıların da rahatça içerik okuyabilmesini sağlamak için minimum kontrast oranları belirler.

Özellikle görsel engelli veya renk körü kullanıcıların dijital ortamlarda metinleri ayrıştırabilmesi için kontrast oranı yeterli olmalıdır. Kontrastı düşük renk kombinasyonları, okunabilirliği azaltır ve erişilebilirliği olumsuz etkiler.

Nasıl çalışır ve hangi standartları uygular?

Bu araç iki renk değeri alır: genellikle metin ve arka plan. WCAG 2.1 formülünü kullanarak her rengin göreceli parlaklık değerini hesaplar ve kontrast oranını belirler. Son olarak, bu oranı WCAG AA ve AAA standartlarındaki eşiklerle karşılaştırır.

Normal ve büyük metin için farklı kontrast eşikleri kullanılır. AA standardında normal metin için en az 4,5:1, büyük metin için 3:1 oran gerekir. AAA standardında ise normal metin için 7:1, büyük metin için 4,5:1 oranı aranır.

Kullanım ipuçları ve sınırlamalar

Araç tüm işlemleri tarayıcıda yapar; hiçbir veri sunucuya gönderilmez. Sadece iki sabit renk üzerinde test yapılabilir, dolayısıyla resimler veya geçişler için tek renk örneği almanız gerekir. Otomatik olarak metin boyutunu algılamaz; 'büyük' veya 'kalın' metin için uygun olanı siz seçmelisiniz.

UI ikonları veya butonlar gibi başka öğeler için de renk kontrastı test edebilirsiniz, ancak kontrast hesabı sadece girilen iki renk arasında yapılır. Yarı saydam renkler kullanıyorsanız, gerçek arka planla birleşik rengi manuel olarak hesaplamanız gerekir.

Sıkça Sorulan Sorular

Metinim 'büyük' olarak kabul ediliyor mu, hangi durumda daha düşük eşik kullanabilirim?

WCAG'a göre 18pt ve üzeri normal veya 14pt ve üzeri kalın metin 'büyük' sayılır. Genellikle başlıklar veya kalın fontlarla yazılmış metinlerde daha düşük kontrast oranı yeterlidir, ancak boyut ve kalınlık ayarını kendiniz kontrol etmelisiniz.

UI bileşenleri veya ikonlar için kontrast hesaplayabilir miyim?

Evet, girilen iki renk arasındaki kontrast her türlü öğe için geçerlidir. Ancak WCAG normalde metin için kontrastı zorunlu kılar; ikon ve butonlar için uyumlu olup olmadığını kendiniz değerlendirmelisiniz.

Yarı saydam (opacity) renkler kullanırsam nasıl sonuç alırım?

Araç, girilen renklerin opak değerleriyle hesaplama yapar. Yarı saydam bir renk kullandığınızda, arka planla birleşimin gerçek rengini manuel olarak hesaplayıp girmeniz gerekir. Aksi halde sonuçlar yanıltıcı olabilir.

Farklı cihazlarda renklerin görünümü değişir mi, gerçek okunabilirlik etkilenir mi?

Araç, WCAG formülünü kullanarak teorik kontrastı hesaplar ve tüm işlemler tarayıcıda yapılır. Ancak ekran kalitesi, renk profili veya ortam ışığı gibi faktörler gerçek dünyadaki okunabilirliği etkileyebilir.

Birden fazla renk kombinasyonunu aynı anda test edebilir miyim?

Bu araç her seferinde iki renk üzerinde çalışır; toplu test için her çifti ayrı ayrı girmeniz gerekir. Birden fazla kombinasyonu hızlıca denemek için renkleri değiştirerek tekrar hesaplama yapabilirsiniz.

Bu aracın hesaplaması gerçek dünyada yeterli mi?

WCAG'nın matematiksel formülünü birebir uygular; standartlara uygun sonuçlar verir. Fakat kişisel deneyim ve ekran koşullarına bağlı olarak okunabilirlik değişebilir, bu yüzden gerçek kullanıcı testleri de önerilir.

Bu araçta bir sorun mu var, ya da bir fikriniz mi var? Bize yazın