Renk Kullanımı

Kısaca

Renk, bilgiyi hızlı iletmenin etkili bir yoludur; ama tek yol olduğunda bazı kullanıcılar bilgiyi tamamen kaçırır. Kırmızı çerçeveyle gösterilen bir hata, renk ayırt edemeyen biri için normal bir alandan farksızdır.

Bu kriter rengin kullanılmasını yasaklamaz. Rengin taşıdığı bilginin metin, simge, desen, alt çizgi veya şekil gibi ikinci bir ipucuyla da verilmesini ister.

Neleri kapsar?

• Bilgi: Tabloda en yüksek değerin, takvimde bugünün yalnızca renkle gösterilmesi.
• Durum: Başarılı, beklemede, reddedildi gibi durumların yalnızca renkli rozetlerle verilmesi.
• Kullanıcı yanıtı: Doğru/yanlış cevabın yalnızca yeşil veya kırmızıyla gösterilmesi.
• Kullanıcı eylemi: Hatanın yalnızca kırmızı çerçeveyle, seçimin yalnızca renk değişimiyle belirtilmesi.
• Bağlantılar ve grafikler: Metin içindeki bağlantıların ve grafik serilerinin yalnızca renkle ayırt edilmesi.
• Kapsam dışı notlar: Metin ve arka plan arasındaki kontrast oranı bu kriterin değil, AA düzeyindeki kontrast kriterinin konusudur ve A Seviyesi listesinde yer almaz.

Kimleri etkiler?

Renk görme eksikliği olan kişiler (erkeklerde yaklaşık 12'de 1 oranında görülür) kırmızı ile yeşili veya mavi ile moru ayırt etmekte zorlanabilir. Az gören kullanıcılar, yüksek kontrast modu veya gri tonlama kullananlar ve ekran okuyucu kullanan kör kişiler de renkle verilen bilgiye ulaşamaz. Güneş altında telefon kullanan ya da siyah-beyaz çıktı alan herkes de aynı sorunla karşılaşır.

Kontrol listesinde

Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 51–53 numaralı soruları kapsar. Yönlendirme soruları sayfada ilgili içerik olup olmadığını belirler; yoksa liste sizi sonraki soruya geçirir. Aşağıdaki açıklamalar sorulardan alıntı değil, özetidir. Soruların tam metni için resmî listeye bakın.

Resmî kontrol listesini indirin (PDF), yeni sekmede açılır

Web için kod örnekleri

1. Form hatası

Kırmızı çerçeve kalabilir; ancak yanında hatayı anlatan bir metin ve tercihen bir simge de olmalıdır.

<label for="telefon">Telefon numarası</label>
<input type="tel" id="telefon"
       style="border:2px solid red">

<label for="telefon">Telefon numarası</label>
<input type="tel" id="telefon"
       aria-invalid="true"
       aria-describedby="telefon-hata"
       class="alan-hatali">
<p id="telefon-hata" class="hata-mesaji">
  <svg aria-hidden="true" focusable="false">…</svg>
  Hata: Telefon numarası 0 ile başlayan 11 haneli olmalıdır.
</p>

2. Metin içindeki bağlantılar

Paragraf içindeki bağlantıları yalnızca renkle ayırmak yerine alt çizgiyi koruyun.

a {
  color: #0b5cad;
  text-decoration: none;
}

p a, li a {
  color: #0b5cad;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

Not: Alt çizgi kaldırılacaksa bağlantı rengi ile çevresindeki metin arasında en az 3:1 kontrast olmalı ve odaklanma ile üzerine gelmede ek bir görsel ipucu (alt çizgi gibi) verilmelidir. En güvenli yol alt çizgiyi korumaktır.

3. Zorunlu alanlar

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

<label for="ad">Ad Soyad (zorunlu)</label>
<input type="text" id="ad" required>

4. Başvuru durumu rozetleri

Durum rozetlerinde rengin yanında durum metni ve ayırt edici bir simge kullanın.

<td><span class="nokta yesil"></span></td>
<td><span class="nokta kirmizi"></span></td>

<td>
  <span class="rozet onaylandi">
    <svg aria-hidden="true" focusable="false">…</svg>
    Onaylandı
  </span>
</td>
<td>
  <span class="rozet reddedildi">
    <svg aria-hidden="true" focusable="false">…</svg>
    Reddedildi
  </span>
</td>

5. Grafiklerde veri serileri

Çizgi veya çubuk grafiklerde serileri yalnızca renkle ayırmak yerine doğrudan etiket, farklı çizgi stili veya desen kullanın.

<svg role="img" aria-label="Başvuru grafiği">
  <polyline stroke="#2e7d32" points="…"/>
  <polyline stroke="#c62828" points="…"/>
</svg>

<svg role="img" aria-labelledby="grafik-baslik">
  <title id="grafik-baslik">Aylara göre onaylanan ve
    reddedilen başvurular</title>
  <polyline stroke="#2e7d32" points="…"/>
  <polyline stroke="#c62828" stroke-dasharray="6 4" points="…"/>
  <text x="…" y="…">Onaylanan</text>
  <text x="…" y="…">Reddedilen (kesikli)</text>
</svg>

6. Seçili sekme veya seçili gün

Seçili öğe yalnızca arka plan rengiyle değil, kalın çizgi gibi bir şekil farkıyla da gösterilmeli; durum ayrıca kodda bildirilmelidir.

<button role="tab" aria-selected="true" class="sekme">Başvurularım</button>
<button role="tab" aria-selected="false" class="sekme">Belgelerim</button>

<style>
  .sekme[aria-selected="true"] {
    background: #e8f0fe;
    border-bottom: 3px solid currentColor;
    font-weight: 700;
  }
</style>

Mobil için kod örnekleri

iOS (SwiftUI)

import SwiftUI

struct DurumRozeti: View {
    let onaylandi: Bool

    var body: some View {
        // Renk + simge + metin birlikte kullanılır.
        Label(
            onaylandi ? "Onaylandı" : "Reddedildi",
            systemImage: onaylandi ? "checkmark.circle.fill" : "xmark.octagon.fill"
        )
        .foregroundStyle(onaylandi ? .green : .red)
    }
}

struct TelefonAlani: View {
    @State private var telefon = ""
    let hataVar: Bool

    var body: some View {
        VStack(alignment: .leading) {
            TextField("Telefon numarası", text: $telefon)
                .keyboardType(.phonePad)
                .padding(8)
                .overlay(
                    RoundedRectangle(cornerRadius: 6)
                        .stroke(hataVar ? Color.red : Color.gray, lineWidth: 2)
                )
            if hataVar {
                Label("Telefon numarası 11 haneli olmalıdır.",
                      systemImage: "exclamationmark.triangle.fill")
                    .foregroundStyle(.red)
                    .font(.footnote)
            }
        }
    }
}

Android (Jetpack Compose)

Material 3 metin alanında isError yalnızca rengi değiştirir; hatanın metni supportingText ile verilmelidir.

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Warning
import androidx.compose.material3.*
import androidx.compose.runtime.*

@Composable
fun TelefonAlani() {
    var telefon by remember { mutableStateOf("") }
    val hataVar = telefon.isNotEmpty() && telefon.length != 11

    OutlinedTextField(
        value = telefon,
        onValueChange = { telefon = it },
        label = { Text("Telefon numarası") },
        isError = hataVar,
        supportingText = {
            if (hataVar) Text("Hata: Telefon numarası 11 haneli olmalıdır.")
        },
        trailingIcon = {
            if (hataVar) Icon(Icons.Filled.Warning, contentDescription = null)
        }
    )
}

Nasıl test edilir?

• Gri tonlamada inceleyin: İşletim sisteminin gri tonlama filtresini açın veya ekran görüntüsünü siyah-beyaza çevirin. Hata, durum, seçim ve bağlantılar hâlâ ayırt edilebiliyor mu?
• Renk körlüğü simülasyonu: Tarayıcı geliştirici araçlarındaki görme bozukluğu öykünmesiyle (Chrome ve Firefox'ta bulunur) sayfayı farklı renk görme türlerinde inceleyin.
• Ekran okuyucuyla dinleyin: Renkle verilen durumlar (hata, seçili, onaylandı) ekran okuyucu tarafından da duyuruluyor mu?
• Otomatik araçların sınırı: Bazı otomatik araçlar paragraf içinde altı çizili olmayan ve çevre metinle düşük kontrastlı bağlantıları işaretleyebilir. Ancak bir rengin bilgi taşıyıp taşımadığını, grafikte serilerin ayırt edilip edilmediğini ya da hatanın yalnızca çerçeve rengiyle gösterilip gösterilmediğini çoğunlukla anlayamaz; bu kriter ağırlıklı olarak elle denetlenir.

Sık yapılan hatalar

• Yalnızca kırmızı çerçeveli hata alanı: En sık karşılaşılan sorundur; hata metni eklenmeden çözülmez.
• Bağlantıların alt çizgisini kaldırmak: Tasarım tercihi olarak alt çizgi kaldırıldığında bağlantılar metinden ayırt edilemez.
• Yeşil/kırmızı nokta ile durum: Tablolarda ve listelerde metinsiz renk noktaları kullanmak.
• Grafik açıklamasında yalnızca renk kutucuğu: Lejantta rengin yanında ad olsa bile çizgiler grafikte yalnızca renkle ayrılıyorsa eşleştirme yapılamaz.
• Takvimde dolu/boş günler: Randevu sistemlerinde müsait günlerin yalnızca renkle gösterilmesi.

Kaynaklar

• Understanding SC 1.4.1: Use of Color (W3C), İngilizce, yeni sekmede açılır
• Erişilebilirlik blogu — Uygulamadan örnekler ve güncel yazılar.
• Erişilebilirlik sözlüğü — Renk körlüğü, kontrast, durum bildirimi ve diğer terimler.

Kontrol listesi sürümü: V2.2.30.01 (2026). Bu sayfa bilgilendirme amaçlıdır; bağlayıcı metin için Aile ve Sosyal Hizmetler Bakanlığı'nın resmî kontrol listesini esas alın.