·web
Color Contrast (WCAG)
Foreground + background renkleri seç, contrast ratio'yu hesapla, WCAG AA / AAA pass/fail durumunu canlı gör. Normal ve büyük metin için ayrı verdikt.
accessibility · wcag · color · contrast
Foreground + background renkleri seç, contrast ratio'yu hesapla, WCAG AA / AAA pass/fail durumunu canlı gör. Normal ve büyük metin için ayrı verdikt.
accessibility · wcag · color · contrast
Tasarımcının "şu griyi açayım azıcık" kararı, renk körü kullanıcı için okunmaz hale gelebilir. WCAG kontrast oranı bu sezgisizliği matematiğe çevirir. Bu lab live preview ile fg/bg değiştirdikçe ratio'yu canlı hesaplar.
hsl(222° 47% 11%)
hsl(48° 96% 89%)
The quick brown fox
jumps over the lazy dog. 1234567890.
16.03:1 · Lc -95.1
normal text
< 18pt / < 14pt bold
large text
≥ 18pt / ≥ 14pt bold
UI / graphics
WCAG 1.4.11 non-text
APCA kullanır sRGB^2.4 transfer fonksiyonu, direktional — metin renginin arka plana göre konumu önemlidir. Negatif Lc: koyu arka plan üzerinde açık metin.
| Seviye | Normal metin | Büyük metin (≥18pt veya ≥14pt bold) |
|---|---|---|
| AA (yasal minimum çoğu yerde) | 4.5:1 | 3:1 |
| AAA (hassas izleyici) | 7:1 | 4.5:1 |
WCAG 2.x relative luminance formülünü kullanır:
Sonra ratio = (L_açık + 0.05) / (L_koyu + 0.05). Yeşil ağırlığı (0.7152) yüksek çünkü insan gözü yeşile en duyarlı.
::placeholder) — çoğu sistemde input text'ten ~%40 daha açık. Kontrast'ı tetikler. Tasarımda hesaba kat.#48d597 beyaz üstünde 1.8:1 — fail. Brand kontrastlı bir varyant gerektir (koyulaştırılmış mor 4.6:1 gibi).Ratio testi geçmek başlangıç. Renk körlüğü (deuteranopia, protanopia) için renk tek başına information taşımamalı — ikon + label kombinasyonu kullan. Form hatası kırmızı ✓ ama kırmızı + ikon + metin daha sağlam.