WCAG AA ve AAA Uyumluluk Arasındaki Fark
Bir kontrast aracı sonucunuza "AA geçti, AAA kaldı" dediğinde bu ne anlama gelir? Bu rehberde WCAG'ın iki ana uyumluluk seviyesini — AA ve AAA — eşik tablosu, gerçek renk örnekleri ve hangi durumda hangisini hedeflemeniz gerektiğiyle birlikte açıklıyoruz.
WCAG AA ve AAA uyumluluk arasındaki fark nedir?
WCAG (Web Content Accessibility Guidelines), üç uyumluluk seviyesi tanımlar: A (temel), AA (standart) ve AAA (gelişmiş). Kontrast oranı konusunda genelde yalnızca AA ve AAA konuşulur çünkü A seviyesinde renk kontrastına dair bir başarı kriteri yoktur. Renklerinizin hangi seviyeye ulaştığını kontrast hesaplayıcıda anında görebilirsiniz — araç normal metin, büyük metin ve UI bileşeni için ayrı ayrı AA/AAA rozeti gösterir.
Eşik tablosu: AA vs AAA
| İçerik türü | AA (asgari) | AAA (gelişmiş) |
|---|---|---|
| Normal metin (14pt/18,66px altı, kalın değilse) | 4,5:1 | 7:1 |
| Büyük metin (18pt/24px+ veya 14pt/18,66px+ kalın) | 3:1 | 4,5:1 |
| UI bileşeni / grafik nesne sınırı | 3:1 | tanımsız |
| Logo ve marka isimleri | gerekmez | gerekmez |
| Dekoratif / devre dışı öğeler | gerekmez | gerekmez |
Kaynak: W3C WCAG 2.2, Başarı Kriteri 1.4.3 (Kontrast — Asgari, AA) ve 1.4.6 (Kontrast — Gelişmiş, AAA).
Dikkat edilmesi gereken nokta: AAA'nın büyük metin eşiği (4,5:1), AA'nın normal metin eşiğiyle (4,5:1) aynıdır. Yani AA'da normal metin için yeterli olan bir kontrast, AAA'da büyük metin için de yeterlidir — ama AAA'da normal metin için yeterli değildir. Bu, seviyeler arasında geçiş yaparken kafa karıştırabilir; en güvenli yöntem her zaman hesaplayıcıyla doğrudan test etmektir.
Hangi seviyeyi hedeflemeliyim, AA mi AAA mı?
| Senaryo | Önerilen seviye |
|---|---|
| Kurumsal web sitesi, blog, e-ticaret | AA |
| Mobil uygulama arayüzü | AA |
| Kamu kurumu / devlet portalı | AA (mevzuat gereği asgari) |
| Sağlık bilgisi, ilaç prospektüsü, acil durum uyarısı | AAA tercih edilir |
| Uzun okuma metni (e-kitap, uzun makale) | AAA tercih edilir |
| Dekoratif/marka görselleri, logolar | Kriter uygulanmaz |
Gerçek renk örnekleriyle AA/AAA sınırı
Aşağıdaki tablo, aynı renk ailesinden farklı koyulukların hangi seviyeyi geçtiğini gösterir. Bu, "biraz daha koyulaştırsam AAA'ya geçer miydim?" sorusunun somut cevabıdır:
| Ön plan | Oran | AA normal (4,5:1) | AAA normal (7:1) |
|---|---|---|---|
| #767676 | 4,54:1 | ✓ (sınır) | ✗ |
| #666666 | 5,74:1 | ✓ | ✗ |
| #595959 | 7,00:1 | ✓ | ✓ (sınır) |
| #111528 | 16,86:1 | ✓ | ✓ |
| #999999 | 2,85:1 | ✗ | ✗ |
Kaynak: KontrastHesap hesaplama motoru. #595959, beyaza karşı AAA sınırının (7:1) tam eşiğine yakın klasik bir referans grinin örneğidir.
Renginiz hangi seviyeyi geçiyor?
İki rengi girin; normal metin, büyük metin ve UI bileşeni için ayrı ayrı AA/AAA sonucunu anında görün.
Kontrast Hesaplayıcıyı Aç →UI bileşenleri için AAA seviyesi var mı?
Bu, pratikte şu anlama gelir: bir butonun kenarlığı veya arka planı sayfanın genel arka planından en az 3:1 oranında ayırt edilebilir olmalıdır, ama bunun için "daha da yüksek" bir AAA hedefi resmi olarak yoktur — isteğe bağlı olarak daha yüksek kontrast uygulayabilirsiniz ama bu bir WCAG zorunluluğu değildir. Metin içeren butonlarda ise buton yazısı ile buton arka planı arasındaki oran, normal metin kriterine (AA 4,5:1 / AAA 7:1) tabidir — bu ikisi farklı ölçümlerdir ve ayrı ayrı test edilmelidir.