Renk Kullanımı

Kısaca

Erkeklerin yaklaşık on ikide biri, kadınların ise iki yüzde biri renk görme farklılığına sahiptir. Çok daha fazla kişi ekranı parlak ışıkta, gri tonlamada ya da yüksek kontrast modunda kullanır; kör kullanıcılar ise rengi hiç göremez. Onlara bir şeyi anlatan tek şey renkse, bunu kaçırırlar.

Bu kriter, rengin bilgiyi aktarmanın, bir eylemi göstermenin, bir yanıt istemenin ya da bir görsel öğeyi ayırt etmenin tek görsel yolu olmamasını ister. Renk yine kullanılabilir; yeter ki metin, şekil, desen ya da alt çizgi gibi başka bir ipucu aynı anlamı taşısın.

Neleri kapsar?

• Metin içindeki bağlantılar: Bir paragraf içindeki bağlantı, çevresindeki metinden yalnızca renkle değil, örneğin alt çizgi gibi bir şeyle de ayırt edilebilmelidir.
• Form hataları ve zorunlu alanlar: Kırmızı bir kenarlık ya da kırmızı bir etiket yeterli değildir. Metin, simge ya da sembol ekleyin.
• Grafikler ve haritalar: Yalnızca renkle ayrılan çizgiler, çubuklar ve harita alanları etiket, desen ya da işaretçi gerektirir.
• Durum: Başarıyı, uyarıyı, çevrimdışı olmayı ya da seçili olmayı gösteren renkler metin ya da simgeyle de gösterilmelidir.
• Yönergeler: "Yeşil düğmeye basın" demek 1.3.3 (Duyusal Özellikler) ile birlikte ele alınır.
• Kapsam dışı notlar: Metnin kontrastı 1.4.3, simgelerin ve bileşen kenarlıklarının kontrastı 1.4.11, ekran okuyucunun duyurduğu bilgi ise 1.3.1 kapsamındadır.

Kimleri etkiler?

Renk görme farklılığı olanlar bazı renkleri ayırt edemez. Kör kullanıcılar renkten hiçbir bilgi alamaz. Az gören kullanıcılar, ekranı güçlü ışıkta kullananlar, gri tonlama, yüksek kontrast ya da zorlanmış renk modlarını kullananlar ve siyah beyaz yazdıranlar da renk ipuçlarını kaybeder. Net metin ve semboller, bilişsel farklılıkları olanlar dahil herkese yardımcı olur.

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. Yalnızca renge dayanmayan bilgi, "algılanabilirlik" ilkesinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 1.4.1'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.1 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır.

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. Metin içindeki bağlantılar

Akan metindeki bir bağlantı renkten başka bir ipucu gerektirir. En basiti alt çizgidir.

a { color: #0066cc; text-decoration: none; }

a { color: #0066cc; text-decoration: underline; }

2. Form hataları

Hatayı metinle gösterin ve alana bağlayın. Renk ve bir simge buna destek olabilir.

<label for="eposta">E-posta</label>
<input id="eposta" style="border: 2px solid red">

<label for="eposta">E-posta</label>
<input id="eposta" aria-invalid="true"
       aria-describedby="eposta-hata"
       style="border: 2px solid #c62828">
<p id="eposta-hata" class="hata">
  <span aria-hidden="true">⚠</span>
  Hata: bir e-posta adresi girin, örneğin [email protected].
</p>

3. Zorunlu alanlar

Bir alanın zorunlu olduğunu etiketinde söyleyin.

<label for="ad" style="color:red">Ad</label>
<input id="ad">

<label for="ad">Ad <span>(zorunlu)</span></label>
<input id="ad" required>

4. Durum

Renkli bir nokta tek başına, rengi göremeyen kullanıcıya hiçbir şey söylemez.

<span class="nokta nokta-yesil"></span>

<span class="nokta nokta-yesil" aria-hidden="true"></span>
<span>Çevrimiçi</span>

5. Grafikler

Çizgiler ya da çubuklar yalnızca renkle ayrılıyorsa doğrudan etiketler ya da farklı işaretçiler ve desenler ekleyin.

<!-- Kırmızı, yeşil ve mavi üç çizgi ve bir renk göstergesi -->
<svg>…</svg>

<!-- Doğrudan etiketli ve farklı işaretçili üç çizgi -->
<svg>
  <path d="…" stroke="#c62828" />
  <text x="300" y="40">Satışlar ●</text>
  <path d="…" stroke="#2e7d32" stroke-dasharray="6 4" />
  <text x="300" y="90">Giderler ▲</text>
</svg>

6. Seçili durum

Seçili öğeyi yalnızca renk değişikliğiyle değil, örneğin kalın yazı, bir onay işareti ya da alt çizgiyle de belirtin ve durumu kodda sunun.

.sekme { color: #666; }
.sekme.aktif { color: #0066cc; }

.sekme { color: #595959; }
.sekme[aria-selected="true"] {
  color: #0b5fff;
  font-weight: 700;
  border-bottom: 3px solid currentColor;
}

Mobil için kod örnekleri

Yerel mobil uygulamalarda aynı kural geçerlidir. Her rengi bir simge ya da metinle eşleştirin ve erişilebilirlik etiketinin de durumu söylediğinden emin olun.

iOS (SwiftUI)

import SwiftUI

struct DurumSatiri: View {
    let cevrimici: Bool

    var body: some View {
        HStack(spacing: 8) {
            // Renk + simge + metin, yalnızca renk değil
            Image(systemName: cevrimici ? "checkmark.circle.fill" : "xmark.circle.fill")
                .foregroundStyle(cevrimici ? .green : .red)
                .accessibilityHidden(true)

            Text(cevrimici ? "Çevrimiçi" : "Çevrimdışı")
        }
        .accessibilityElement(children: .combine)
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.Row
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.CheckCircle
import androidx.compose.material.icons.filled.Cancel
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.semantics

@Composable
fun DurumSatiri(cevrimici: Boolean) {
    // Renk + simge + metin, yalnızca renk değil
    Row(modifier = Modifier.semantics(mergeDescendants = true) {}) {
        Icon(
            imageVector = if (cevrimici) Icons.Filled.CheckCircle else Icons.Filled.Cancel,
            contentDescription = null,
            tint = if (cevrimici) Color(0xFF2E7D32) else Color(0xFFC62828)
        )
        Text(if (cevrimici) "Çevrimiçi" else "Çevrimdışı")
    }
}

Nasıl test edilir?

• Gri tonlamada görüntüleyin: Sayfayı ya da uygulamayı gri tonlamaya alın ya da tarayıcının görüntü emülasyonunu kullanın. Bağlantıları, hataları, durumları ve grafik serilerini hâlâ ayırt edebiliyor musunuz?
• Renk görme farklılıklarını simüle edin: Renk körlüğünü emüle etmek için tarayıcı geliştirici araçlarını kullanın. Kaybolan bir bilgi var mı?
• Yalnızca renkle verilen ipuçlarını arayın: Metin içindeki bağlantıları, form hatalarını, zorunlu alanları, durum rozetlerini, seçili sekmeleri, grafikleri, haritaları ve göstergeleri kontrol edin.
• Kodu inceleyin: Bilgi ayrıca metin, simge, desen ya da aria-invalid ve aria-selected gibi programatik bir durum olarak da bulunuyor mu?
• Zorlanmış renklerle test edin: Yüksek kontrast ya da zorlanmış renk modunu açın. Durumlar hâlâ görünüyor mu?
• Mobili kontrol edin: Uygulamadaki her durumun renkle birlikte bir simgesi ya da metni var mı ve ekran okuyucu bunu duyuruyor mu?
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar rengin tek ipucu olup olmadığını söyleyemez. Buna ancak bir kişi karar verebilir.

Sık yapılan hatalar

• Alt çizgisiz bağlantılar: Yalnızca renkle ayrılan bir bağlantıyı herkes bulamaz.
• Tek hata ipucu olarak kırmızı kenarlık: Neyin yanlış olduğunu söyleyen bir ileti ekleyin.
• Grafikte benzer renkli bir renk göstergesi: Doğrudan etiket, işaretçi ya da desen ekleyin.
• Metinsiz durum noktaları: Yeşil ve kırmızı bazı kullanıcılara benzer görünür.
• Seçili öğeyi yalnızca renkle işaretlemek: Kalınlık, onay işareti ya da alt çizgi ekleyin.
• "Yeşil düğme" gibi yönergeler: Düğmeyi adıyla da anın. Bkz. 1.3.3.
• Zorunlu alanlar için yalnızca renk kullanmak: Etikette "zorunlu" deyin.
• Yazdırmayı ve zorlanmış renkleri unutmak: Renk ipuçları siyah beyazda ve yüksek kontrast modlarında kaybolur.

Kaynaklar

• Understanding SC 1.4.1: Use of Color (W3C), İngilizce, yeni sekmede açılır
• Form Notifications Tutorial (W3C WAI), İ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.