QuickATools

Geliştirici araçları · Free browser tool

WCAG Renk Kontrastı Kontrolü

Metinden arka plana renk kontrast oranlarını gerçek zamanlı kontrol edin. Erişilebilir web tasarımı için WCAG 2.1 AA ve AAA uyumunu anında doğrulayın.

Colors

Pick or type hex values for text and background.

#
#

Live preview

Sample heading

The quick brown fox jumps over the lazy dog. Body text should stay readable at this size for AA compliance (4.5:1).

Smaller supporting copy — check Normal Text AA/AAA below.

Contrast ratio

17.74:1

Range is 1:1 (identical) to 21:1 (black on white).

Text luminance
0.0092
rgb(17, 24, 39)
Background luminance
1.0000
rgb(255, 255, 255)

WCAG 2.1 compliance

Large text means at least 18pt (24px) regular or 14pt (18.66px) bold.

  • Normal text · AA

    Body copy under ~18pt / 14pt bold · ≥ 4.5:1

    Pass

  • Normal text · AAA

    Enhanced contrast for body copy · ≥ 7:1

    Pass

  • Large text · AA

    ≥18pt regular or ≥14pt bold · ≥ 3:1

    Pass

  • Large text · AAA

    Enhanced contrast for large text · ≥ 4.5:1

    Pass

Frequently Asked Questions

WCAG 2.1 gerçekte hangi kontrast oranlarını ister?

WCAG 2.1 Başarı Kriteri 1.4.3 (Contrast Minimum) AA seviyesinde normal metin için en az 4.5:1, büyük metin için 3:1 kontrast oranı ister. AAA seviyesi (1.4.6 Contrast Enhanced) bu tabanları normal metin için 7:1, büyük metin için 4.5:1’e yükseltir. Oranlar her rengin göreli parlaklığından hesaplanır ve 1:1 (özdeş renkler) ile 21:1 (saf siyah üzerinde saf beyaz) arasında değişir.

AA ile AAA arasındaki pratik fark nedir?

AA, halka açık web siteleri, devlet hizmetleri ve ticari ürünler için en yaygın uyum hedefidir — okunabilirliği tasarım esnekliğiyle dengeler. AAA, maksimum okunabilirlik gerektiğinde (örneğin uzun form okuma deneyimleri veya önemli düşük görüşlü kitleler) kullanılan daha sıkı geliştirilmiş seviyedir. Her UI öğesi için AAA’ya ulaşmak sıkça pratik değildir; bu yüzden birçok ekip genel olarak AA’yı hedefler ve kritik gövde metni için AAA’yı.

WCAG altında "büyük metin" ne sayılır?

Büyük metin en az 18 punto (tipik ~24px) düzenli ağırlık veya en az 14 punto (tipik ~18.66px) kalın olarak tanımlanır. Başlıklar ve hero metinler sıkça nitelik kazanır; gövde paragrafları genelde kazanmaz. Büyük metin daha düşük kontrast eşiği alır çünkü daha büyük glifler daha zayıf kontrasta rağmen okunaklı kalır — ama tasarım dosyasına değil CSS’inizdeki gerçek işlenmiş boyuta göre doğrulamalısınız.

Renk kontrastı erişilebilirlik için neden bu kadar önemli?

Düşük kontrast en yaygın erişilebilirlik başarısızlıklarından biridir. Düşük görüşlü kullanıcılar, yaşlı yetişkinler, loş veya güneş yıkanmış ekranlardakiler ve birçok renk görüşü eksikliği olan kişi metni okumak için yalnızca ton değil yeterli parlaklık farkına dayanır. Kontrastı erken kontrol etmek, ideal koşullarda cilalı görünen ama gerçek ziyaretçilerin büyük kısmı için kullanılamaz arayüzleri yayınlamayı önler.

İhtiyacınız olabilecek diğer araçlar

Satıcılar, içerik üreticileri ve profesyoneller için diğer ücretsiz tarayıcı araçlarını keşfedin.

Erişilebilir Arayüzler için Renk Kontrastı Neden Tartışılmaz?

Engelsiz tasarım isteğe bağlı bir cilalama adımı değildir — düşük görüş, renk görüşü eksikliği veya sert dış mekân parlaması olan insanların UI’nizi hâlâ okuyabilmesidir. WCAG 2.1, içeriğin çok daha geniş kullanıcı aralığı için okunaklı kalması amacıyla metin ile arka planı arasında minimum kontrast oranları tanımlar. Bu eşikleri kaçırmak, kalibre monitörlerde tasarımcılara iyi görünen formlardan, belgelerden, panolardan ve pazarlama sayfalarından insanları sessizce dışlar.

Devlet siteleri, kurumsal ürünler ve birçok küresel tüketici uygulamasının en azından WCAG AA’yı karşılaması beklenir. Spesifikasyonun kullandığı aynı göreli parlaklık formülüyle tarayıcıda kontrast kontrol etmek, marka renklerini üçüncü taraf hizmete yüklemeden palet kararlarını yayınlanmadan önce doğrulamanızı sağlar. Metin ve arka planı değiştirin, büyük vs normal metni önizleyin ve bir kombinasyon geçtiğinde ekibinizle palet bağlantısı paylaşın.

AA normal metin için 4.5:1, büyük metin için 3:1 ister; AAA bu çubukları 7:1 ve 4.5:1’e yükseltir. Büyük metin genelde 18pt (yaklaşık 24px) düzenli veya 14pt (yaklaşık 18.66px) kalın demektir. Bu aracı tasarım incelemelerinde hızlı kapı olarak kullanın, ardından nihai UI’yi bağlamda doğrulayın — simgeler, degradeler ve örtüler iki düz hex değeri geçse bile etkili kontrastı değiştirebilir.

Bu sitedeki daha fazla geliştirici yardımcı programı: form desenlerini Regex Test Aracı ile doğrulayın, auth jetonlarını JWT Çözücü’de inceleyin, tasarım jetonlarını JSON Biçimlendirici ve Doğrulayıcı ile düzenleyin veya varlıkları Base64 Kodla/Çöz ile kodlayın. Pazaryeri ürün fotoğrafları için Ürün Fotoğrafı Arka Plan Kontrolü aynı parlaklık matematiğini gerçek görsellere karşı yeniden kullanır.