🎨 Color Contrast Checker — WCAG AA/AAA

Check foreground/background color contrast ratios against WCAG AA and AAA accessibility standards. Instant pass/fail results for normal and large text. Free color contrast checker.

Foreground (Text)

Background

The quick brown fox jumps over the lazy dog

Normal body text — can you read this clearly?

Large Text (24px bold)

—

Contrast Ratio

—

AA Normal ≥4.5:1

—

AA Large ≥3:1

—

AAA Normal ≥7:1

—

AAA Large ≥4.5:1

How to Use

Pick your colors

Use the color pickers or type HEX codes for both the foreground (text) color and background color.

Read the contrast ratio

The tool instantly calculates the contrast ratio and shows Pass/Fail for all four WCAG 2.1 standards (AA/AAA × normal/large text).

Adjust until you pass

Tweak colors until you reach the standard you need. The preview text updates in real time so you can see the actual readability.

Frequently Asked Questions

What contrast ratio does WCAG require? +

WCAG 2.1 Level AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text.

What counts as large text? +

Large text is defined as 18pt (24px) or larger, or 14pt bold (18.67px bold) or larger. Below these sizes the stricter AA 4.5:1 requirement applies.

How is the contrast ratio calculated? +

The tool calculates relative luminance for each color using the WCAG formula, then divides the lighter luminance by the darker: (L1 + 0.05) / (L2 + 0.05).

Can I check transparent overlays? +

This tool checks opaque colors. For semi-transparent text, first compute the final rendered color by blending with the background, then paste that result into the checker.

Tam Rehber: Renk Kontrast Denetleyicisi — WCAG AA ve AAA Uyumluluğu

Renk Kontrastı Nedir ve Neden Önemlidir?

Renk kontrast oranı, ön plan rengi (genellikle metin) ile arka plan rengi arasındaki parlaklık ilişkisinin matematiksel ölçüsüdür. 1:1'den (özdeş renkler, sıfır kontrast) 21:1'e (beyaz üzerine siyah, maksimum kontrast) kadar bir oran olarak ifade edilir. Oran ne kadar yüksekse, düşük görme engeli, renk körlüğü veya parlak güneş ışığı ya da düşük kaliteli ekran gibi zorlu koşullarda okuma yapan kişiler için metin o kadar okunabilir olur.

W3C tarafından yayımlanan Web İçerik Erişilebilirlik Kılavuzları (WCAG), erişilebilir kontrast için uluslararası standardı tanımlar. AB, ABD (ADA), İngiltere ve Avustralya dahil pek çok ülkedeki yasal taban olan WCAG 2.1 Seviye AA, normal metin için minimum 4,5:1 ve büyük metin için 3:1 kontrast oranı gerektirir. Gelişmiş standart olan WCAG 2.1 Seviye AAA ise normal metin için 7:1 ve büyük metin için 4,5:1 gerektirir.

Bu pratikte ne anlama gelir? Dünya genelinde yaklaşık 300 milyon kişinin renk görme bozukluğu vardır. Yaklaşık 246 milyon kişinin düşük görme yetisi bulunmaktadır. Tipik görme yetisine sahip kişiler bile yorgun olduklarında, doğrudan güneş ışığı altında mobil ekranlarda veya eski monitörlerde düşük kontrastlı metinle zorlanmaktadır. Yetersiz kontrast, web'deki en yaygın erişilebilirlik hatasıdır.

Etik ve hukuki boyutların ötesinde ticari nedenler de vardır: erişilebilirlik denetimlerini geçemeyen siteler, sağlık, finans ve kamu gibi düzenlemeye tabi sektörlerde hukuki sorumlulukla karşılaşır. İyi kontrast ayrıca tasarımın diğer unsurlarından bağımsız olarak daha profesyonel görünür.

WCAG Kontrast Oranı Nasıl Hesaplanır?

WCAG formülü, bir rengin insan gözüne ne kadar parlak göründüğünün algısal ölçüsü olan göreli parlaklık'ı kullanır. Gözün yeşile kırmızıdan, kırmızıya ise maviden daha duyarlı olduğunu dikkate alır. Formül önce sRGB kanal değerlerini doğrusallaştırır, ardından onları ağırlıklandırır: L = 0,2126 R + 0,7152 G + 0,0722 B. L1 ve L2 parlaklığına (L1 daha açık olan) sahip iki renk arasındaki kontrast oranı (L1 + 0,05) / (L2 + 0,05)'tir.

Bu, renkleri "göz kararı" seçmenin güvenilmez olduğu anlamına gelir. Kalibre edilmiş tasarım monitörünüzde mükemmel okunabilir görünen iki renk, daha ucuz bir ekranda matematiksel eşiği geçemeyebilir. Emin olmanın tek yolu ölçmektir — bu araç tam olarak bunu yapar.

Adım Adım Kullanım Kılavuzu

Ön plan rengini girin (metin renginiz) — ilk alana. #1a2b3c gibi bir hex kodu, rgb(26,43,60) gibi bir RGB değeri yazabilir veya görsel seçim için renk seçiciyi kullanabilirsiniz.
Arka plan rengini ikinci alana girin. Aynı formatlar desteklenir.
Kontrast oranını okuyun — örneğin 7,23:1. Araç, hem normal hem büyük metin boyutlarında WCAG AA ve AAA için geçti/kaldı rozetleri gösterir (toplamda dört sonuç).
Kombinasyonu önizleyin — canlı önizleme paneli seçilen arka plana karşı hem normal hem de büyük boyutlarda örnek metin gösterir.
Tüm gerekli eşikler geçene kadar renkleri ayarlayın — kaydırıcıları kullanarak veya yeni değerler yazarak. Değerleri değiştirdikçe oran gerçek zamanlı olarak güncellenir.

Dört WCAG Sonucunu Anlamak

Denetleyici, eşikler metin boyutuna ve uyumluluk seviyesine göre farklılaştığı için dört geçti/kaldı sonucu gösterir:

AA Normal metin — 4,5:1 gerektirir. Standart boyutlarda (18pt / 24px altında) gövde metni, etiketler, gezinti bağlantıları ve form alanı metni için geçerlidir.
AA Büyük metin — 3:1 gerektirir. 18pt (24px) veya daha büyük metin ya da 14pt (yaklaşık 18,67px) kalın veya daha büyük metin için geçerlidir.
AAA Normal metin — 7:1 gerektirir. En yüksek uyumluluk seviyesi için gereklidir.
AAA Büyük metin — 4,5:1 gerektirir. Büyük veya kalın metin için gelişmiş standart.

Pratik Kullanım Senaryoları

Tasarım sistemi token'ı kontrol etmek: Tasarım sisteminiz #ffffff üzerine --color-text-secondary: #767676 tanımlıyor. Her iki hex değerini girin — araç hemen 4,48:1 raporlar ve normal metin için AA'yı geçemez (4,5:1 gerekli). #767676'yı #757575 olarak ayarlayın — 4,61:1, AA'yı geçer.

Bir butonu denetlemek: Ana CTA butonunuz #4285f4 marka mavisi üzerine beyaz metin kullanıyor. Araç 3,07:1 raporlar — büyük metin için geçer ancak normal metin için geçemez. Buton etiketleri genellikle 14–16px olduğundan bu AA'yı geçemez. Mavi rengi #1a73e8'e koyulaştırarak 4,56:1 elde edin ve tüm metin boyutlarında AA'yı geçin.

Karanlık mod paleti: Karanlık modda arka plan #121212 ve metniniz #e0e0e0. Araç 13,85:1 raporlar — AAA'nın çok üzerinde. Herhangi bir eşiği geçemeden göz yorgunluğunu azaltmak için biraz daha donuk bir metin rengi kullanma alanınız var.

Renk Kontrastıyla Çalışırken Yaygın Hatalar

Yalnızca görsel yargıya güvenmek: İnsan renk algısı son derece özneldir. Bir ekranda okunabilir görünen renkler başkasında başarısız olabilir. Her zaman sayısal olarak ölçün.
Hover ve focus durumlarını unutmak: Etkileşimli öğelerin birden fazla durumu vardır. Bağlantı metniniz normal durumda geçebilir ancak :hover veya :focus durumunda geçemeyebilir.
Görsel üzerindeki metni göz ardı etmek: Kontrast gereksinimi metin fotoğraf veya gradyan üzerinde olduğunda bile geçerlidir. Tutarlı, ölçülebilir bir arka plan sağlamak için yarı saydam bir katman kullanın.
Opaklık yerine düz renkler kullanmak: Beyaz üzerine rgba(0,0,0,0,6) metin rengi yaklaşık olarak #666666'ya eşdeğerdir. Kontrol ederken düz eşdeğerini kullanın.

Sık Sorulan Sorular

WCAG kontrast gereksinimi ikonlar için de geçerli mi?
Evet, WCAG 1.4.11 (Metin Dışı Kontrast) kapsamında bilgilendirici ikonların bitişik arka planlarına karşı 3:1 oranını karşılaması gerekir. Tamamen dekoratif ikonlar muaftır.

Gradyan arka plan üzerinde görünen metin için ne yapmalıyım?
Metnin gerçekten görüntülendiği noktada — genellikle metnin altındaki gradyanın en açık noktasında — kontrast doğrulaması yapmanız gerekir.

WCAG 3.0 kontrast formülünü değiştiriyor mu?
Evet, WCAG 3.0 (geliştirme aşamasında) modern ekran teknolojileri için daha doğru olan APCA algoritmasını tanıtmaktadır. 2025 itibarıyla WCAG 2.1 AA çoğu yargı bölgesinde yasal standart olmaya devam etmektedir.

Kenarlıklar ve ayırıcılar gibi metin dışı öğeler için kontrast önemli mi?
Yalnızca içeriği anlamak veya arayüzü kullanmak için gerekliyse. Dekoratif ayırıcılar ve kenarlıklar muaftır. Gerekli bir form alanının kenarlığı, WCAG 1.4.11 kapsamında 3:1 karşılamalıdır.