WCAG kontrast gereksinimleri
| Öğe | AA (temel) | AAA (gelişmiş) |
|---|
| Normal metin | 4,5 : 1 | 7 : 1 |
| Büyük metin (≥ 24 px veya ≥ 18,7 px kalın) | 3 : 1 | 4,5 : 1 |
| Arayüz bileşenleri ve grafik nesneler | 3 : 1 | — |
Devre dışı (disabled) öğeler ve yalnızca süs amaçlı görseller bu gereksinimlerin dışındadır; ancak logodaki metin de genellikle kapsam dışı tutulur. Yine de sitenizdeki tüm bilgi veren metinlerde AA oranını yakalamak hem erişilebilirlik hem genel okunabilirlik açısından doğru hedeftir.
Kontrasta etki eden pratik noktalar
- Gri metni koyulaştırın: Açık gri üzerine açık gri yazı estetik görünür ama çoğu kullanıcı için okunmaz. Yan metinlerde bile 4,5:1'i koruyun.
- Görsel üzerindeki metin: Fotoğraf üzerine yazı koyuyorsanız arkasına yarı saydam koyu bir katman ekleyin ve oranı en açık/en koyu bölgeye göre kontrol edin.
- Bağlantıları ayırt edin: Bağlantı metnini yalnızca renkle değil, altı çizili veya kalın yazarak da belirtin.
- Odak göstergesi: Klavye ile gezinirken görünen odak çerçevesi de çevresiyle en az 3:1 kontrast taşımalıdır.
- Koyu mod: Koyu temada saf beyaz yazı yerine hafif kırık beyaz kullanmak göz yorgunluğunu azaltır; oranı yine kontrol edin.
Palet skalasını nasıl kullanmalı?
| Ton | Tipik kullanım |
|---|
| 50-100 | Sayfa veya kart zemini, hafif vurgu alanları |
| 200-300 | Kenarlıklar, ikincil düğmeler, ayırıcılar |
| 400-500 | İkonlar, grafikler, ana düğme zemini (beyaz yazıyla kontrastı kontrol edin) |
| 600-700 | Ana düğme üzerine gelme durumu, bağlantı metni |
| 800-900 | Başlık ve gövde metni, koyu zemin |
Marka renginizi önce logonuzdan alın; logonuz henüz yoksa logo oluşturucu aracımızın paletlerinden bir başlangıç seçebilirsiniz.
Renk körlüğü ve tasarım
Renk görme eksikliği, erkeklerin yaklaşık yüzde 8'inde (kadınlarda çok daha az) görülür; en yaygın türü kırmızı-yeşil ayırt etme güçlüğüdür. Grafiklerde, durum etiketlerinde ve formlarda yalnızca kırmızı/yeşille bilgi vermek bu kullanıcıları dışarıda bırakır. Önizleme bölümünde renklerinizin protanopi, döteranopi ve tritanopide ayırt edilebilir kalıp kalmadığını kontrol edin; ayırt edilemiyorsa simge, desen veya metin ekleyin.
Not: Bu araç yönerge ölçütlerini hesaplar; tam bir erişilebilirlik denetimi yerine geçmez. Yasal veya kurumsal uyumluluk gerekiyorsa sitenizin tamamını kullanıcı testleri ve uzman incelemesiyle değerlendirin.
Sık Sorulan Sorular
Kontrast oranı nedir, nasıl hesaplanır?
Kontrast oranı, iki rengin göreli parlaklıkları arasındaki farkın ölçüsüdür. WCAG'ye göre her rengin göreli parlaklığı (sRGB değerleri doğrusallaştırılıp 0,2126 R + 0,7152 G + 0,0722 B ile) hesaplanır; oran = (açık rengin parlaklığı + 0,05) ÷ (koyu rengin parlaklığı + 0,05) olur. Sonuç 1:1 (aynı renk) ile 21:1 (siyah-beyaz) arasındadır.
WCAG AA ve AAA arasındaki fark nedir?
AA, çoğu web sitesinin hedeflemesi gereken temel erişilebilirlik düzeyidir: normal metin için en az 4,5:1, büyük metin için en az 3:1. AAA daha katı bir düzeydir: normal metin için en az 7:1, büyük metin için 4,5:1. Arayüz öğeleri (düğme kenarlığı, simge, form alanı sınırı) için WCAG 2.1, en az 3:1 ister.
Hangi metin "büyük metin" sayılır?
WCAG'ye göre en az 18 punto (yaklaşık 24 px) normal ağırlıkta, ya da en az 14 punto (yaklaşık 18,7 px) kalın yazılmış metin büyük sayılır. Daha düşük bir kontrast oranı (3:1) bu metinler için yeterlidir; ancak ana metinde bu avantaja güvenmeyin.
Kontrast yeterli ama renkler hâlâ kötü görünüyor, neden?
Kontrast oranı okunabilirliğin yalnızca bir ölçüsüdür; renk uyumu, yazı tipi kalınlığı, satır aralığı ve çevre ışığı da etki eder. Oran geçse bile çok parlak zıt renkler (kırmızı-yeşil gibi) göz yorabilir. Araçtaki önizleme ve palet çıktıları, bu kararı gözle vermenize yardımcı olur.
Marka paleti 50-900 skalası nasıl üretiliyor?
Girdiğiniz ana renk 500 olarak korunur. 50-400 tonları ana rengi beyazla, 600-900 tonları siyahla karıştırarak elde edilir. Böylece bir arayüzde zemin (50-100), kenarlık/ikincil alan (200-300), vurgu (500-600) ve koyu metin/başlık (800-900) gibi kullanımlar için tutarlı bir ton kümesi çıkar. Sonuçlar bir başlangıç noktasıdır; tasarımcınızla ince ayar yapmanızı öneririz.
Renk körlüğü önizlemesi ne kadar doğru?
Önizleme, protanopi, döteranopi ve tritanopi için yaygın kabul gören dönüşüm matrislerini (Machado ve ark., 2009) kullanır; bireysel farklılıklar ve ekran ayarları nedeniyle yaklaşık bir görünümdür. Amaç, yalnızca renge dayanan bilginin (örneğin kırmızı = hata, yeşil = başarı) kaçırılıp kaçırılmadığını fark etmektir. Renk körlüğü yaygın olarak erkeklerin yaklaşık yüzde 8'ini, kadınların ise çok daha küçük bir bölümünü etkiler.
Geçen en yakın renk nasıl bulunuyor?
Rengin tonu ve doygunluğu korunur, yalnızca parlaklığı küçük adımlarla koyulaştırılıp açılarak istenen kontrast oranına en az değişiklikle ulaşan renk aranır. Hem yazı rengi hem arka plan için ayrı öneri sunulur; markanıza uygun olanı seçip "Uygula" ile deneyebilirsiniz.
Girdiğim renkler kaydediliyor mu?
Hayır. Tüm hesaplamalar tarayıcınızda yapılır; renkleriniz bir sunucuya gönderilmez.
Google Yorum Linki + QR
WhatsApp Link Oluşturucu
AI Bot Erişim Testi
SEO Analizi
Web Sitesi Fiyat Hesaplama
SSL Sertifika Kontrolü
robots.txt Oluşturucu
Schema Oluşturucu