Nasıl kullanılır?
- 1Metin (ön plan) ve arka plan renklerini seçin veya kodlarını girin.
- 2Kontrast oranını ve AA/AAA sonuçlarını normal ve büyük metin için inceleyin.
- 3Canlı örnek metinde okunabilirliği kendi gözünüzle kontrol edin.
- 4Geçmiyorsa "en yakın uygun rengi öner" butonunu kullanın.
Kontrast oranı nedir?
Kontrast oranı, iki rengin göreli parlaklıkları arasındaki farkı 1:1 (aynı renk) ile 21:1 (siyah-beyaz) arasında ifade eder. Uluslararası erişilebilirlik standardı WCAG, metnin görme zorluğu yaşayanlar, yaşlı kullanıcılar ve güneş altında telefon kullananlar tarafından da okunabilmesi için minimum oranlar belirler.
AA ve AAA eşikleri
WCAG 2 AA seviyesinde normal metin için en az 4.5:1, büyük metin (yaklaşık 24 piksel veya 18,5 piksel kalın ve üzeri) için en az 3:1 oran gerekir. Daha sıkı olan AAA seviyesinde bu değerler normal metin için 7:1, büyük metin için 4.5:1’dir. Çoğu kurum ve mevzuat AA seviyesini hedef alır; araç dört durumu da ayrı ayrı gösterir.
Kontrast neden önemli?
Açık gri üzerine beyaz yazı veya pastel buton üzerinde ince metin şık görünse de birçok kullanıcı için okunmaz. Düşük kontrast dönüşüm oranını düşürür; Lighthouse erişilebilirlik puanında da yetersiz kontrast en sık görülen hatalardan biridir. Marka renginiz kontrast testinden geçmiyorsa öneri butonu, eşiği geçen en yakın rengi bulmanıza yardımcı olur.
Sık sorulan sorular
Minimum kontrast oranı kaç olmalı?
Normal metin için en az 4.5:1, büyük metin ve arayüz öğeleri için en az 3:1 (WCAG AA). Daha yüksek erişilebilirlik için normal metinde 7:1 (AAA) hedeflenebilir.
Kontrast SEO’yu etkiler mi?
Doğrudan bir sıralama faktörü değildir. Ancak okunabilirlik kullanıcı deneyimini ve dönüşümleri etkiler; Lighthouse erişilebilirlik raporunda da kontrol edilir.
Logolar kontrast kuralına dahil mi?
Hayır. WCAG, logo ve marka adlarının parçası olan metinleri kontrast gerekliliğinden muaf tutar. Dekoratif ve devre dışı öğeler de muaftır.
Önerilen renk markamdan çok mu farklı olur?
Öneri, mevcut renginize olabildiğince yakın kalıp eşiği geçen rengi arar. Çoğu durumda rengi biraz açmak veya koyulaştırmak yeterli olur.
Sonuçlar iç açıcı değil mi?
Hızlı, SEO uyumlu web siteleri, e-ticaret ve Google Ads yönetimi için Webin Agency ekibiyle görüşün.