Ücretsiz Renk Kontrast Denetleyici

Metin ve arka plan renk kombinasyonlarınızı WCAG 2.1 erişilebilirlik uyumluluğu için test edin. AA ve AAA standartları için anlık geçer/kalır sonuçları alın — kayıt gerekmez.

94,217+ kontrast kontrolü yapıldı

Kontrast Oranı

17.06:1

Büyük Metin Önizlemesi (24px)

Normal gövde metin önizlemesi (16px). Hızlı kahverengi tilki tembel köpeğin üzerinden atlar. Bu örnek, renk kombinasyonunuzun tipik gövde kopyası boyutunda nasıl göründüğünü gösterir.

Küçük metin (14px) — genellikle alt yazılar, dipnotlar ve meta veriler için kullanılır.

Tersine: metin rengi üzerinde arka plan (17.06:1 — aynı oran)

AA Normal Metin

4,5:1 gerektirir

GEÇTİ

AA Büyük Metin

3:1 gerektirir

GEÇTİ

AAA Normal Metin

7:1 gerektirir

GEÇTİ

AAA Büyük Metin

4,5:1 gerektirir

GEÇTİ

Bu renklerle erişilebilir bir web sitesi oluşturmaya hazır mısınız?

Bu renklerle oluştur

Renk Kontrast Denetleyici Nedir?

Renk kontrast denetleyici, iki renk arasındaki parlaklık farkını — genellikle ön plan metni ve arka planı — ölçen ve Web İçeriği Erişilebilirlik Kılavuzları (WCAG) uyarınca bir kontrast oranı hesaplayan bir araçtır. Bu oran, renk kombinasyonunuzun renk körlüğü ve düşük görme dahil görme bozuklukları olan kişiler için okunabilir olup olmadığını belirler.

Kleap'ın kontrast denetleyicisi, WCAG 2.1 kontrast oranını anında hesaplar ve tüm dört uyum düzeyine göre test eder: AA Normal Metin (4,5:1), AA Büyük Metin (3:1), AAA Normal Metin (7:1) ve AAA Büyük Metin (4,5:1). Renkleriniz başarısız olursa, araç en yakın erişilebilir alternatifi önerir.

WCAG Kontrast Düzeyleri Açıklandı

AA Normal Metin

Minimum 4,5:1

Minimum 4,5:1 kontrast oranı gerektirir. En yaygın uyum hedefidir ve 18 punto altındaki (veya 14 punto kalın) gövde metni için geçerlidir.

AA Büyük Metin

Minimum 3:1

Minimum 3:1 kontrast oranı gerektirir. En az 18 punto (24px) veya 14 punto kalın (18,66px kalın) olan metin için geçerlidir.

AAA Normal Metin

Minimum 7:1

7:1 kontrast oranı gerektiren en yüksek standart. Orta derecede düşük görme (yaklaşık 20/80) olan kullanıcılar için okunabilirliği sağlar.

AAA Büyük Metin

Minimum 4,5:1

AAA düzeyinde büyük metin için 4,5:1 gerektirir. Başlıklar ve ekran metni için gelişmiş okunabilirlik sağlar.

Erişilebilir Renk Paletleri Oluşturmak için 5 İpucu

1

Start with contrast

Choose your text and background colors with contrast in mind from the beginning. Retrofitting accessibility is much harder than building it in from the start.

2

Don't rely on color alone

Use icons, patterns, underlines, or labels alongside color to convey meaning. About 8% of men have some form of color blindness.

3

Test on real devices

Colors look different on monitors, phones, and in bright sunlight. Test your contrast ratios on actual devices, not just in your design tool.

4

Use dark mode too

If your site supports dark mode, verify contrast ratios for both themes. A color pair that passes in light mode may fail in dark mode.

5

Mind the font weight

Thin and light font weights reduce perceived contrast. If you use weights below 400, aim for a higher contrast ratio than the minimum.

6

Check interactive states

Hover, focus, and active states often use different colors. Make sure all interactive states meet contrast requirements, not just the default.

Contrast Checker Comparison

ÖzellikKleapWebAIMCoolorsAdobe Color
FiyatÜcretsizÜcretsizFreemiumFree (with Adobe account)
Real-time PreviewYes, live text on backgroundEvet, temelEvetEvet
Nearest Accessible ColorYes, auto-suggestedHayırHayırKısmi
WCAG Levels TestedAA + AAA (normal + large)AA + AAAAA onlyAA + AAA
Built-in Website BuilderYes, AI-poweredHayırHayırHayır
Swap Colors ButtonEvetHayırHayırHayır
Random Accessible PairEvetHayırHayırHayır

Sıkça Sorulan Sorular

WCAG kontrast oranı nedir?+
WCAG kontrast oranı, iki rengin göreli parlaklığını karşılaştıran bir ölçümdür. 1:1 (aynı renk) ile 21:1 (siyah üzerine beyaz) arasında değişir. WCAG 2.1, AA uyumu için normal metinde en az 4,5:1 ve büyük metinde 3:1 gerektirir.
Web sitem WCAG uyumlu olmak zorunda mı?+
Bu konumunuza ve web sitenizin türüne bağlıdır. ABD'de, Birleşik Krallık'ta ve AB'de devlet web siteleri erişilebilirlik standartlarına uymak zorundadır. Pek çok özel şirket, dava riskini azaltmak ve kapsayıcılığı desteklemek için gönüllü olarak AA uyumluluğunu hedeflemektedir.
Kontrast denetleyici nasıl çalışır?+
Araç, iki rengi görece parlaklıkları için analiz eder (WCAG 2.1 spesifikasyonu başına hesaplanmıştır). Parlaklık oranı, WCAG tarafından tanımlanan tüm eşiklere göre test edilir ve anlık geçer/kalır sonuçları üretir.
Hem AA hem de AAA uyumuna ihtiyacım var mı?+
Çoğu proje AA uyumluluğunu hedefler. AAA gereksinimleri çok katıdır (normal metin için 7:1) ve diğer tasarım hedeflerini karşılarken elde edilmesi zordur. AA, çoğu yasal çerçeve için kabul edilen standarttır.
Gradientler veya resimler üzerindeki metni nasıl kontrol ederim?+
Gradientin en açık noktasındaki rengi metin rengine karşı test edin — bu en kötü durum senaryosudur. Gradientler ve metin kombinasyonları için %50 opak siyah metin gölgesi eklemek okunabilirliği önemli ölçüde artırır.
Is WCAG AA enough for my website?+
WCAG AA is the standard referenced by most accessibility laws worldwide, including the ADA (US), EAA (EU), and EN 301 549 (Europe). For most websites and apps, AA compliance is both legally sufficient and provides good readability. AAA is recommended for government sites, healthcare, and education, but is not typically required by law.
What if my brand colors fail contrast?+
You have several options: slightly adjust the shade of your brand color (often a small lightness change is enough), use your brand color for decorative elements only and a high-contrast color for text, increase font size to qualify for the large text threshold, or add a semi-transparent overlay behind text placed on colored backgrounds. Our tool suggests the nearest accessible color automatically.
Does contrast matter for dark mode?+
Absolutely. The same WCAG contrast requirements apply regardless of the color scheme. In fact, dark mode introduces unique challenges: pure white (#FFFFFF) text on a very dark background can cause halation (a glowing effect) for users with astigmatism. A slightly off-white (#E0E0E0 to #F0F0F0) on a dark gray (#1A1A1A to #2D2D2D) often provides better readability while still meeting AA standards.
Can colorblind users see enough contrast?+
High contrast ratios help colorblind users significantly, but contrast alone is not sufficient. WCAG also requires that color is not the sole means of conveying information (1.4.1). For example, don't use only red/green to indicate error/success — add icons or text labels. The contrast ratio formula accounts for luminance, not hue, so it helps across all types of color blindness.
How do I test contrast in my existing website?+
You can use browser DevTools (Chrome's Lighthouse audit includes contrast checks), browser extensions like axe or WAVE, or paste your exact HEX/RGB values into this tool. For comprehensive testing, use automated tools like Lighthouse for a full-page scan, then manually verify any flagged elements. Remember to test hover states, focus styles, and placeholder text — these are commonly missed.

Erişilebilir Bir Web Sitesi Oluşturmaya Hazır mısınız?

Kleap'ın AI web sitesi oluşturucusu, erişilebilirlik göz önünde bulundurularak oluşturulmuştur. Dakikalar içinde WCAG uyumlu, görsel olarak çarpıcı bir web sitesi oluşturun.

Ücretsiz Web Sitesi Oluştur

Related Free Tools

CSS Gradient Generator

Color Picker

Color Palette Generator

Button Generator

Ücretsiz Renk Kontrast Denetleyici | WCAG Erişilebilirlik Aracı 2026