Metin Dışı Kontrast

Kısaca

Bir metin alanının çevresindeki soluk gri kenarlık zarif görünür, ama az gören biri ortada bir alan olduğunu hiç görmeyebilir. Aynısı bir simge düğmesi, bir onay kutusu, bir grafik çizgisi ya da arka planına karışan bir odak halkası için de geçerlidir.

Bu kriter, kullanıcı arayüzü bileşenlerini ve durumlarını tanımlamak için gereken görsel bilginin ve içeriği anlamak için gereken grafik nesnelerin komşu renklere karşı en az 3:1 kontrast oranına sahip olmasını ister.

Neleri kapsar?

• Kullanıcı arayüzü bileşenleri: Bir kontrolü tanımlayan sınır ya da başka görsel ipucu: metin alanı kenarlığı, onay kutusu, radyo düğmesi, anahtar, metin etiketi olmayan düğme.
• Durumlar: Odak göstergeleri, seçili ve işaretli durumlar, basılı ya da genişletilmiş durumlar; durumun yalnızca renk ya da şekille gösterildiği hâllerde.
• Grafik nesneler: Simgelerin, grafiklerin ve diyagramların içeriği anlamak için gereken kısımları; grafik çizgileri, çubuklar ve anlamlı simgeler gibi.
• Gerekmeyenler: Devre dışı kontroller, metni onu zaten tanımlayan bileşenler, salt süsleme ile logolar ve marka işaretleri.
• Metin etiketli düğme: Metin düğmeyi tanımlıyorsa düğme kenarlığının 3:1'e ihtiyacı yoktur. Metin yine 1.4.3 gereği 4,5:1 gerektirir.
• Kapsam dışı notlar: Metin kontrastı 1.4.3'tür. Yalnızca renge dayanmamak 1.4.1'dir. Odağın görünür olması 2.4.7, odak göstergelerinin boyutu ise 2.4.13 (AAA düzeyi) kapsamındadır.

Kimleri etkiler?

Kontrollerin nerede olduğunu ve hangi durumda bulunduğunu görmesi gereken az gören, renk görme farklılığı olan ya da yaşa bağlı görme değişiklikleri yaşayan kişiler. Ekranı güçlü ışıkta ya da zayıf bir ekranda kullanan herkes.

EAA ve EN 301 549'da

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. Görünür ve ayırt edilebilir kontroller ve grafikler "algılanabilirlik" ilkesinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 1.4.11'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.

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.11 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

Web için kod örnekleri

1. Form alanı kenarlıkları

Alanın nerede olduğunu gösteren tek şey kenarlıksa sayfa arka planına karşı 3:1 gerekir.

input { border: 1px solid #cccccc; } /* beyaz üzerinde 1,61:1, başarısız */

input { border: 1px solid #767676; } /* beyaz üzerinde 4,54:1 */

2. Yalnızca simgeli düğmeler

Anlamı taşıyan bir simge arka planına karşı 3:1 gerektirir. Yine de erişilebilir bir ada ihtiyacı vardır.

.simge-dugme svg { fill: #aaaaaa; } /* beyaz üzerinde 2,32:1, başarısız */

.simge-dugme svg { fill: #6b6b6b; } /* beyaz üzerinde 5,33:1 */

<button class="simge-dugme" aria-label="Ara">…</button>

3. Özel onay kutuları

Yerel kontrolü değiştirdiğinizde 3:1 kontrastlı bir kenarlık ya da dolgu bırakın ve işaretli durumu açıkça gösterin.

.kutu { border: 2px solid #dddddd; } /* 1,36:1, başarısız */

.kutu { border: 2px solid #767676; }
.kutu.isaretli { background: #0b5fff; border-color: #0b5fff; }

4. Odak göstergesi

Dış çizgi, yanındaki renklerle karşıtlık oluşturmalıdır.

a:focus { outline: 2px solid #dddddd; } /* beyaz üzerinde 1,36:1, başarısız */

a:focus-visible { outline: 3px solid #0b5fff; outline-offset: 2px; } /* 5,13:1 */

5. Grafikler

Veri taşıyan çizgiler ve çubuklar grafik arka planına karşı 3:1 gerektirir. Rengin tek ipucu olmaması için etiket ya da desen ekleyin (1.4.1).

<path stroke="#cccccc" d="…" /> <!-- 1,61:1, başarısız -->

<path stroke="#6b6b6b" stroke-width="2" d="…" /> <!-- 5,33:1 -->
<text x="300" y="40">Satışlar</text>

6. Yalnızca renkle verilen durum

Bir anahtar yalnızca açık griden biraz farklı bir açık griye geçiyorsa değişiklik görünmez. Durumları en az 3:1 farklı yapın.

.anahtar { background: #e0e0e0; }
.anahtar.acik { background: #d0d0d0; }

.anahtar { background: #767676; }
.anahtar.acik { background: #2e7d32; } /* düğmenin konumu da değişir */

Mobil için kod örnekleri

Yerel uygulamalarda özel alanların kenarlıklarını, simge renklerini ve seçili durumları hem açık hem koyu modda kontrol edin. Sistem kontrolleri platformun kontrast kurallarını zaten izler.

iOS (SwiftUI)

import SwiftUI

struct AramaAlani: View {
    @State private var metin = ""

    var body: some View {
        HStack {
            Image(systemName: "magnifyingglass")
                .foregroundStyle(Color("KontrolCizgisi")) // arka plana karşı en az 3:1
                .accessibilityHidden(true)
            TextField("Ara", text: $metin)
        }
        .padding(12)
        .overlay(
            RoundedRectangle(cornerRadius: 8)
                // Kaçının: Color.gray.opacity(0.2), 3:1'in çok altında
                .stroke(Color("KontrolCizgisi"), lineWidth: 1)
        )
    }
}

Android (Jetpack Compose)

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.*

@Composable
fun AramaAlani() {
    var metin by remember { mutableStateOf("") }
    OutlinedTextField(
        value = metin,
        onValueChange = { metin = it },
        label = { Text("Ara") },
        colors = OutlinedTextFieldDefaults.colors(
            // Çiftini 3:1 için kontrol ettiğiniz tema renklerini kullanın
            unfocusedBorderColor = MaterialTheme.colorScheme.outline,
            focusedBorderColor = MaterialTheme.colorScheme.primary
        )
    )
}

Nasıl test edilir?

• Her kontrolü bulun: Sayfadaki alanları, düğmeleri, onay kutularını, anahtarları, sekmeleri, simgeleri ve grafik öğelerini listeleyin.
• Görsel ipucunu ölçün: Kenarlığı, simgeyi ya da dolguyu komşu renge karşı bir renk seçici ya da kontrast denetleyiciyle ölçün. En az 3:1 olmalıdır.
• Tüm durumları kontrol edin: Varsayılan, üzerine gelme, odak, işaretli, seçili, genişletilmiş ve hata. Durum değişikliği 3:1 ile görünür olmalıdır.
• Odak halkasını kontrol edin: Sayfada Tab ile gezinin. Odağın nerede olduğunu hem açık hem koyu arka planlarda hep görebiliyor musunuz?
• Grafikleri kontrol edin: Grafik çizgileri, çubuklar ve anlamlı simgeler arka plandan 3:1 ile ayrılıyor mu?
• Koyu modu test edin: Açık modda geçen bir çift koyu modda başarısız olabilir.
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar bir bileşenin hangi kısımlarının onu tanımlamak için gerekli olduğunu söyleyemez. Buna bir kişi karar vermelidir.

Sık yapılan hatalar

• Açık gri girdi kenarlıkları: Bu kriterin en yaygın ihlali.
• Görünür alan yerine yer tutucu metin: Alanın görünür sınırı yoksa kullanıcılar onu bulamaz.
• Soluk gri simgeler: Anlamlı simgeler 3:1 gerektirir.
• Bazı arka planlarda kaybolan odak halkaları: Bileşenin göründüğü her arka planda kontrol edin.
• Benzer tonlarda grafik çizgileri: Komşu çizgiler arka plandan olduğu kadar birbirinden de ayırt edilebilmelidir.
• Açık ve kapalıyken aynı görünen anahtarlar: Durum görünür olmalıdır.
• Devre dışı olmayı bahane etmek: Yalnızca gerçekten devre dışı kontroller istisnadır.
• Koyu modu unutmak: Koyu temalarda sık sık soluk kenarlıklar kullanılır.

Kaynaklar

• Understanding SC 1.4.11: Non-text Contrast (W3C), İngilizce, yeni sekmede açılır
• G195: Using an author-supplied, highly visible focus indicator (W3C), İngilizce, yeni sekmede açılır
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), İngilizce, yeni sekmede açılır
• EN 301 549 V4.1.1 (ETSI), İngilizce, yeni sekmede açılır
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), İngilizce, yeni sekmede açılır

Standart sürümü: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz; bağlayıcı metin için Avrupa Erişilebilirlik Yasası'nın (Direktif (AB) 2019/882) ve EN 301 549 standardının resmî metinlerini esas alın.