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.
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.
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.
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.
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.