Ücretsiz Dönüştürücü

Renk Kontrastı Denetleyici (WCAG)

WCAG AA ve AAA erişilebilirlik uyumluluğu için iki renk arasındaki kontrast oranını kontrol edin. Ücretsiz, anında ve tamamen tarayıcınızda çalışır.

Örnek Metin — Normal Boyut

Örnek küçük metin — 14 piksel

Kontrast Oranı:21.00:1
WCAG AANormal MetinGeçmek
WCAG AABüyük MetinGeçmek
WCAG AAANormal MetinGeçmek
WCAG AAABüyük MetinGeçmek

Bu araç hakkında

WCAG 2.1 erişilebilirlik yönergelerine göre ön plan metni ve arka plan renkleri arasındaki renk kontrast oranlarını kontrol edin. Renkleri onaltılık kodlar, RGB değerleri veya HSL değerleri olarak girin ve hem normal hem de büyük metin boyutlarında WCAG AA ve AAA uyumluluğu için başarılı/başarısız sonuçlarının yanı sıra kontrast oranını anında görün.

Nasıl kullanılır

  1. Renk seçiciyi veya onaltılık girişi kullanarak ön plan (metin) renginizi girin veya seçin.
  2. Arka plan renginizi girin veya seçin.
  3. Kontrast oranını ve WCAG 2.1 AA/AAA başarılı/başarısız sonuçlarını anında görüntüleyin.
  4. İstediğiniz uyumluluk düzeyine ulaşana kadar renkleri ayarlayın.

Sık sorulan sorular

WCAG uyumluluğu için hangi kontrast oranı gereklidir?
WCAG AA, normal metin için 4,5:1 ve büyük metin için 3:1 (18pt+ veya 14pt+kalın) gerektirir. WCAG AAA, normal metin için 7:1 ve büyük metin için 4,5:1 gerektirir. Mümkün olan maksimum oran 21:1'dir (beyaz üzerine siyah).
Renk kontrastı neden önemlidir?
Yeterli kontrast, az gören, renk körü olan veya ekranları parlak güneş ışığında görüntüleyen kullanıcılar için metnin okunabilir olmasını sağlar. Bu aynı zamanda birçok web sitesi için ADA ve AB erişilebilirlik düzenlemeleri kapsamında yasal bir gerekliliktir.
WCAG'de 'büyük metin' olarak kabul edilen şey nedir?
Büyük metin, normal ağırlık için 18 punto (24 piksel) ve üzeri, kalın metin için ise 14 punto (18,66 piksel) ve üzeri olarak tanımlanır. Büyük metinlerin kontrast gereksinimleri daha düşüktür çünkü doğası gereği okunması daha kolaydır.
Bu araç metin dışı öğelerin kontrastını kontrol ediyor mu?
WCAG 2.1, kullanıcı arayüzü bileşenleri ve grafik nesneler (düğmeler, simgeler, form alanları) için 3:1 kontrast oranı gerektirir. Bunları doğrulamak için de bu aracı kullanabilirsiniz; yalnızca bileşen ve arka plan renklerini girmeniz yeterlidir.