Metnin arka planına karşı en az 4,5:1, büyük metinde en az 3:1 kontrast oranına sahip olmasını ister. Böylece az gören ya da renk körü kullanıcılar metni okuyabilir.
Beyaz zemin üzerindeki açık gri metin, bir tasarımcının parlak monitöründe zarif görünür. Az gören, renk görme güçlüğü olan, katarakt hastası bir kişi için, eski bir ekranda ya da güneş altındaki bir telefonda ise okunamaz.
Bu kriter, metin ile arka planı arasında en az 4,5:1 kontrast oranı ister. En az 24 px ya da en az 18,66 px ve kalın olan büyük metin için en az 3:1 gerekir. Oran, iki rengin göreli parlaklığından hesaplanır ve 1:1 (kontrast yok) ile 21:1 (beyaz üzerinde siyah) arasında değişir.
Az gören, renk görme farklılığı olan ve yaşa bağlı görme değişiklikleri yaşayan kişiler okumak için kontrasta ihtiyaç duyar. Ekranı parlak ışıkta, düşük kaliteli bir ekranda ya da küçük bir telefonda kullanan herkes de yararlanır. Yüksek kontrast, disleksisi olanlar ve çabuk yorulanlar için de daha kolaydır. Ayrıca herkes için içeriği okumayı kolaylaştırır.
Avrupa Erişilebilirlik Yasası (Direktif (AB) 2019/882) 28 Haziran 2025'ten sonra piyasaya sunulan kapsamdaki ürün ve hizmetler için geçerlidir. Yasanın 47. gerekçesi web siteleri ve mobil uygulamalar için dört ilkeyi sayar: algılanabilirlik, işletilebilirlik, anlaşılabilirlik ve sağlamlık. Okunabilir kontrast, "algılanabilirlik" ilkesinin parçasıdır.
Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 1.4.3'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.
| Madde | Ortam | Ne ister? |
|---|---|---|
| 9.1.4.3 | Web sayfaları | Web içeriğinin WCAG 1.4.3 kriterini karşılamasını ister. |
| 10.1.4.3 | Web dışı dokümanlar (PDF, Office dosyaları) | Aynı kriterin dokümanlardaki metin renklerine uygulanmasını ister. |
| 11.1.4.3 | Web dışı yazılım (yerel mobil uygulamalar) | Ekran okuyucuyu destekleyen yazılımda kriterin karşılanmasını ister. |
Madde numaraları EN 301 549'un "9. + WCAG numarası" düzenine göredir. V3.2.1'de yazılım maddesi, açık ve kapalı işlevsellik için ayrı alt maddelere bölünmüştür. Kaynak gösterirken tam numaraları standarttan kontrol edin.
Standart sürümü: EN 301 549 V4.1.1 (Eylül 2026), WCAG 2.2'yi esas alan ve EAA için hazırlanan ilk sürümdür. Henüz AB Resmî Gazetesi'nde atıf almamıştır; bu nedenle EAA gereksinimlerini karşılamanın gönüllü teknik yolu olarak görülmelidir. Atıf yapıldığında EAA ile ilgili uygunluk karinesi sağlayacaktır. 1.4.3 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır. AA düzeyinde bir kriterdir.
EAA bağlamında dikkat: Yasanın Madde 2/4 hükmü bazı içerikleri gereksinimlerin dışında bırakır; örneğin 28 Haziran 2025'ten önce yayımlanmış ofis dosya biçimleri ve bu tarihten sonra güncellenmeyen arşivler. Bu tarihten sonra yayımladığınız ya da değiştirdiğiniz içerik bu istisnaların kapsamında değildir.
Directive (EU) 2019/882, EUR-Lex, İngilizce, yeni sekmede açılır
Açık gri metin güzel görünür ama başarısız olur. Beyaz üzerinde #767676, normal metin için geçen en açık gridir.
ENbody { color: #999999; background: #ffffff; } /* 2,85:1, başarısız */body { color: #595959; background: #ffffff; } /* 7,0:1 */
/* Beyaz üzerinde #767676, 4,54:1 ile geçen en açık gridir */Büyük metin yalnızca 3:1 gerektirir. Gövde metni için başarısız olan bir renk, büyük bir başlık için geçebilir.
.not { color: #888888; font-size: 16px; } /* 3,54:1, başarısız: normal metin */h1 { color: #888888; font-size: 32px; } /* 3,54:1, geçer: büyük metin */
.not { color: #595959; font-size: 16px; } /* 7,0:1 */Açık bir marka rengi üzerindeki beyaz metin çoğu zaman başarısız olur. Oran yeterli olana kadar arka planı koyulaştırın.
.btn { background: #4caf50; color: #ffffff; } /* 2,78:1, başarısız */.btn { background: #2e7d32; color: #ffffff; } /* 5,13:1 */Yer tutucu metin de metindir. Aynı orana ihtiyaç duyar.
::placeholder { color: #aaaaaa; } /* 2,32:1, başarısız */::placeholder { color: #6b6b6b; } /* 5,33:1 */Metnin arkasındaki en kötü noktayı kontrol edin. Koyu bir katman ya da metnin arkasında düz bir zemin oranı öngörülebilir kılar.
.kahraman { background: url(foto.jpg); }
.kahraman h2 { color: #ffffff; }.kahraman { background: url(foto.jpg); }
.kahraman h2 {
color: #ffffff;
background: rgba(0, 0, 0, 0.7);
padding: 8px 12px;
}Varsayılan renkle birlikte üzerine gelme, odak ve ziyaret edilmiş renklerini de kontrol edin.
a { color: #0066cc; }
a:visited { color: #b8a9d9; } /* beyaz üzerinde başarısız */a { color: #0066cc; } /* 5,57:1 */
a:visited { color: #6b3fa0; } /* beyaz üzerinde geçer */
a:hover { color: #003d7a; } /* beyaz üzerinde geçer */Yerel mobil uygulamalarda aynı kural geçerlidir. Hem açık hem koyu modda oranlarını kontrol ettiğiniz sistem renklerini ya da renk belirteçlerini kullanın.
import SwiftUI
struct FiyatEtiketi: View {
var body: some View {
VStack(alignment: .leading, spacing: 8) {
// Kaçının: özel bir açık gri (beyaz üzerinde yaklaşık 2,85:1)
// Text("Toplam").foregroundColor(Color(hex: 0x999999))
// Koyu moda uyum sağlayan anlamsal renkleri kullanın
Text("Toplam")
.foregroundStyle(.secondary)
// Ya da kontrol edilmiş bir belirteç
Text("₺420,00")
.foregroundStyle(Color("MetinBirincil")) // Arka planda 7:1
}
}
}import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
@Composable
fun FiyatEtiketi() {
// Kaçının: özel bir açık gri (beyaz üzerinde yaklaşık 2,85:1)
// Text("Toplam", color = Color(0xFF999999))
// Açık ve koyu temalarda çiftlerini kontrol ettiğiniz tema renklerini kullanın
Text(
text = "Toplam",
color = MaterialTheme.colorScheme.onSurfaceVariant
)
// Ya da kontrol edilmiş bir renk (beyaz üzerinde 5,62:1)
Text(
text = "Ödeme başarısız",
color = Color(0xFFC62828)
)
}Corpowid, dijital erişilebilirlik alanındaki yenilikçi yaklaşımı ve performansı nedeniyle dünyanın önde gelen araştırma ve danışmanlık şirketlerinden biri olan Gartner tarafından takdir edilmiştir. Bu rozetler, yapay zeka destekli ve kapsayıcı web deneyimleri oluşturma konusundaki kararlılığımızı yansıtmaktadır.
