Türkçe
WCAG renk kontrastını kontrol et ve başarısız kombinasyonları tek tıkla düzelt.
Son güncelleme
Büyük başlık — 24px kalın
Gövde metni. Hızlı kahverengi tilki tembel köpeğin üzerinden atlar. Bir iki paragraf oku ve kontrastın uzun bir oturumda rahat olup olmadığına bak.
Küçük açıklama — 12px normal. WCAG bu boyutta yalnızca 14pt ve üstünü korur, küçücük metin en sıkı kontrastı ister.
*Kontrast denetleyici*, tasarımcı ve geliştiricilerin bir ekranı yayınlamadan önce başvurduğu araçtır. İki rengin — metnin ve onun arkasındaki arka planın — **kontrast oranını** Web İçeriği Erişilebilirlik Kılavuzlarının (WCAG) formülüyle hesaplar. Oran ne kadar yüksek olursa metin o kadar okunaklıdır.
WCAG üç eşik tanımlar. **3:1** büyük başlıklar (24px+ normal veya 18,66px+ kalın) ve buton, form alanı, ikon gibi etkileşimli bileşenlerin görünür kenarı için minimumdur. **4,5:1** gövde metni için AA minimumudur — çoğu ekibin hedeflediği çıta. **7:1** AAA'dır, en yüksek not; düşük görüşlü okuyucular için güçlü destek sağlar.
Kontrast iki rengin ne kadar canlı göründüğüyle aynı **değildir**. İki çarpıcı marka rengi *parlaklıkları* yakınsa hâlâ zor okunabilir. Bu araç WCAG parlaklık formülünü her kanalda çalıştırır, tam oranı raporlar ve her bağlamı notlar, böylece tahmin etmek zorunda kalmazsın.
Bir HEX değeri yaz/yapıştır veya renk seçiciyi kullan. Ön plan metnin veya ikonun; arka plan onun arkasında ne varsa odur.
Soldaki büyük sayı WCAG kontrast oranıdır. 3:1'in altı herhangi bir UI için risklidir; 4,5:1'in altı gövde metni için başarısızdır.
Üç satır normal metin (4,5/7), büyük metin (3/4,5) ve UI bileşenleri (3:1) için geçti/kaldı gösterir. Tasarımının kullandığı her satırda yeşil tikleri hedefle.
AA başarısız olduğunda araç ön plan parlaklığını yukarı veya aşağı iter — tonu koruyarak — çift geçene kadar. AAA için tekrar tıkla.
İki renk de ihtiyaç duyduğun bağlamları geçtiğinde CSS snippet'ini (color: + background:) kopyala ve stil dosyana veya design token dosyana yapıştır.
Tasarladığını ihtiyaç duyduğun seviyeyle eşle. Kaynak: WCAG 2.2 Understanding 1.4.3 ve 1.4.11.
| Hedef | AA min | AAA min | Notlar |
|---|---|---|---|
| Gövde metni (< 18pt normal) | 4.5 : 1 | 7 : 1 | Paragraf, etiket, açıklamalar için varsayılan kural |
| Büyük metin (≥ 18pt normal veya ≥ 14pt kalın) | 3 : 1 | 4.5 : 1 | Başlıklar, hero metinleri, büyük alıntılar |
| UI bileşenleri ve grafik nesneler | 3 : 1 | — | Buton kenarları, form alanları, ikonlar, focus halkaları |
| Logo veya saf dekorasyon | Muaf | Muaf | Logo ve tesadüfi metin muaftır — ama kullanılabilirlik hâlâ önemlidir |
| Devre dışı durum | Muaf | Muaf | Pasif kontroller muaftır, ama bunu düşük kontrastlı varsayılanlar için bahane yapma |
color: #1f2937; /* slate-800 */background: #f9fafb; /* slate-50 *//* Contrast ratio ≈ 14.6:1 */Klasik koyu slate üstüne neredeyse beyaz. Gövde metni için (≥ 7:1) AAA'yı bolca geçer. Çoğu ürün UI'sı varsayılan olarak bu bölgeyi hedeflemeli.
color: #3b82f6; /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */Beyaz üstüne canlı maviler genellikle 4:1 civarına oturur — büyük başlıklar için okunaklı (3:1 AA Large'i geçer) ama gövde metni 4,5:1 çıtasında düşer. 18px+ buton/CTA için kullan, paragraf metni için değil.
color: #facc15; /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 */Beyaz arka plana karşı parlak sarı meşhur tuzaktır: renkler güçlü görünür ama parlaklıkları çok yakındır. Bu kombini koyu zeminler için sakla (#1f2937 üstüne #facc15 ≈ 12:1).
