XTools Logosu
XTools

Kontrast Denetleyici

Metin ve arka plan kontrastını WCAG AA ve AAA ölçütlerine göre denetleyin
  • Dosyalar cihazınızdan çıkmaz
  • Tarayıcıda çalışır
  • Ücretsiz, kayıt yok, filigran yok

Contrast ratio

4.54:1

Passes AA for all text

  • AANormal text

    4.5:1

    Pass

  • AALarge text

    3:1 · 24px+, or 18.66px+ bold

    Pass

  • AAANormal text

    7:1

    Fail

  • AAALarge text

    4.5:1 · 24px+, or 18.66px+ bold

    Pass

  • AAUI components & graphics

    3:1 · Icons, borders of inputs, focus rings

    Pass

APCA lightness contrast

Lc 71.6

OK for content text, not long body copy

From the WCAG 3 draft. Polarity aware: negative Lc means light text on a dark background.

Preview

Large heading

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Body text is where low contrast hurts most: long paragraphs at small sizes tire the eyes quickly, especially on phones in sunlight.

The quick brown fox jumps over the lazy dog

Small print, captions and footnotes

ButtonButton

Nearest passing colors

AA · 4.5:1

Adjust textAlready passes
Adjust backgroundAlready passes

AAA · 7:1

Adjust text

#595959 · 7.00:1

Adjust backgroundNot reachable by changing lightness alone
Changes only lightness (in OKLCH), so the hue and feel of your color stay the same.
4.54:1 Passes AA for all text · #767676

Kontrast Denetleyici nasıl kullanılır

Bir metin ve arka plan renk çiftini WCAG 2'ye göre denetleyin (normal metin, büyük metin ve kullanıcı arayüzü bileşenleri için AA ve AAA) ve WCAG 3 taslağındaki APCA açıklık kontrastını görün. Bir çift başarısız olduğunda en yakın geçen renkleri önerir.

  1. 1

    Metin rengi ve Arka plan rengi'ni HEX, rgb(), hsl(), oklch() veya bir renk adı olarak girin ya da renk seçiciyi açmak için bir örneğe tıklayın.

  2. 2

    Kontrast oranını ve her AA ile AAA denetimi için Geçti veya Kaldı sonucunu okuyun.

  3. 3

    Önizleme'ye bakın, kendi Örnek metninizi yazın ve tersini denemek için Renkleri değiştir'i kullanın.

  4. 4

    En yakın geçen renkler altında, AA (4.5:1) veya AAA (7:1) için bir Metni ayarla veya Arka planı ayarla önerisinde Uygula'ya tıklayın.

  5. 5

    Bir rengi değiştirdikten sonra sayfa URL'si her iki rengi de tutar; sonucu paylaşmak için kopyalayabilirsiniz.

Sık sorulan sorular

Hangi kontrast oranına ihtiyacım var?

WCAG AA normal metin için 4.5:1, büyük metin (24px ve üzeri veya 18.66px kalın) ile simgeler ve girdi kenarlıkları gibi kullanıcı arayüzü bileşenleri için 3:1 ister. AAA ise 7:1 ve 4.5:1 ister.

4.497:1 neden 4.50 yerine 4.49 olarak gösteriliyor?

Oran bir eşiğin ötesine asla yukarı yuvarlanmaz; 4.5:1'i kıl payı kaçıran bir çift geçmiş gibi görünmez.

Yarı saydam metni deneyebilir miyim?

Evet. Metin opaklığı kaydırıcısını kullanın; yarı saydam metin oran ölçülmeden önce arka planın üzerine karıştırılır.

APCA sayısı nedir?

APCA, WCAG 3 taslağından gelir ve hangi rengin metin olduğuna bağlı bir açıklık kontrastı (Lc) verir; negatif değerler koyu arka plan üzerinde açık metin anlamına gelir. Hâlâ bir taslaktır, bu yüzden olağan uyum hedefi WCAG 2 oranları olmaya devam eder.

Önerilen renkler nasıl seçilir?

Yalnızca açıklık değiştirilir (OKLCH içinde), böylece renginizin tonu ve hissi aynı kalır. Hiçbir yön hedefe ulaşmazsa Yalnızca açıklığı değiştirerek ulaşılamaz; diğer rengi ayarlamayı deneyin der.