WCAG contrast checker
Test any foreground and background color pair for WCAG 2.1 contrast ratio (1 to 21). See pass/fail for Level AA and AAA, for normal text, large text (18pt+ or 14pt bold), and UI components. Essential before shipping buttons, links, and form labels — many brand palettes fail until you darken text or lighten surfaces.
Metin rengi
Arka plan rengi
Aa Bb Cc — 123
Sonuç
16.12 : 1
AA — Geçti
AA (büyük metin) — Geçti
AAA — Geçti
AAA (büyük metin) — Geçti
How to check color contrast
1. Enter or pick foreground (text) and background colors.
2. Read the contrast ratio (e.g. 4.52:1).
3. Check AA and AAA rows for normal and large text sizes.
4. Adjust HSL lightness until required level passes, then copy hex values.
Kontrast kontrolü örnekleri
#FFFFFF üzerindeki gövde metni #374151
Oran ≈ 8,9:1 — normal metin için AAA'yı geçer (7:1 gerekir). Uzun formda rahat okuma.
Beyaz üzerine açık gri #9CA3AF
Oran ≈ 2,6:1 — normal metin için AA'da başarısız olur (4,5:1 gerekir). Yaygın yer tutucu hatası.
#2563EB üzerindeki birincil düğme beyaz
Oran ≈ 4,6:1 — AA normal metnini geçer; AAA veya yalnızca büyük ölçekli kullanım için daha koyu maviye geçiş yapın.
Ne zaman kullanılmalı
• Yayınlanmadan önce tasarım sistemi belirteçlerini denetlediğinizde.
• Erişilebilirlik bulgularını Lighthouse veya Axe'dan düzelttiğinizde.
• Bağlantı renklerini seçtiğinizde, yalnızca renk tonu açısından değil, gövde metninden de farklı olması gerekir.
Ne zaman başka bir şey seçmeli
• Tam sayfa denetimine ihtiyaç duyduğunuzda, oluşturulan DOM'da otomatik tarayıcıları kullanın.
• Katı olmayan arka planları (görüntüler, degradeler) test ederken en kötü durumdaki pikselleri örnekleyin.
• Renk körlüğünü simüle ederken özel görme simülatörleri kullanın.
WCAG 2.1 seviyeleri açıklandı
A Düzeyi minimumdur; AA birçok yargı bölgesinde (ADA, EAA kamu sektörü) yasal hedeftir. AAA gövde metni için idealdir; büyük başlıklar AAA'yı 14 piksellik başlıklardan daha kolay geçebilir. Görünür odak göstergeleri (2.4.7) kontrastı tamamlar — klavye kullanıcılarının, genellikle bitişik renklere karşı 3:1 oranında görünür odak halkalarına ihtiyacı vardır. Başarılı/başarısız olduğunu tasarım sisteminizde her jeton çiftinin yanında belgeleyin.
Yeniden markalama olmadan hataları düzeltme
Marka moru beyaz üzerinde başarısız olursa, renk tonunu değiştirmeyin; ön planı %5-10 açıklık adımlarıyla koyulaştırın veya moru yalnızca büyük başlıklar için kullanın. Yer tutucu metni yalnızca giriş değerlerini değil, kontrastı da (4,5:1) karşılamalıdır. Devre dışı bırakılan durumlar katı metin kontrastından muaf olabilir ancak kritik bilgileri yalnızca renge göre aktarmamalıdır. Hızlı HSL yinelemesi için bu denetleyiciyi renk dönüştürücüyle eşleştirin.
Sık sorulan sorular
WCAG AA normal metin için hangi kontrast oranı?
Normal metin için en az 4,5:1 ve büyük metin için 3:1 (18pt+ veya 14pt kalın).
AAA'ya ne olacak?
7:1 normal metin, 4,5:1 büyük metin — daha katı, genellikle devlet siteleri için kullanılır.
UI bileşenlerinin kontrasta ihtiyacı var mı?
WCAG 2.1, grafik nesneler ve kullanıcı arayüzü bileşen sınırları (1.4.11) için 3:1 gerektirir.
Oran nasıl hesaplanır?
sRGB renklerinin bağıl parlaklığına dayalıdır: (L1 + 0,05) / (L2 + 0,05), burada L1 daha açıktır.
Alt çizgi düşük kontrastlı bağlantıları düzeltir mi?
Hayır — kontrast hâlâ gerekli. Alt çizgiler renk dışı ipuçlarına yardımcı olur ancak oran kurallarının yerini almaz.
Verilerim bir sunucuya mı gönderiliyor?
HAYIR.
Bu araç ücretsiz mi?
Evet.