Kontrast Kontrolü

WCAG 2.1 / 2.2 Kontrast Standartlarını Anlamak

Web İçeriği Erişilebilirlik İlkeleri (WCAG) 2.1 ve 2.2 standartları, dijital içeriklerin herkes tarafından okunabilir olmasını sağlamak için belirli kontrast oranları belirlemiştir. Kontrast Kontrolü aracı, girdiğiniz metin rengi ile arka plan rengi arasındaki kontrast oranını bu güncel WCAG 2.1 / 2.2 formülünü kullanarak hesaplar.

Hesaplanan kontrast oranı, iki renk arasındaki parlaklık farkını gösterir ve 1:1 ile 21:1 arasında değişen bir değer alır. 1:1 oranı hiçbir kontrastın olmadığını (örneğin beyaz arka plan üzerinde beyaz metin) temsil ederken, 21:1 oranı elde edilebilecek en yüksek kontrastı (siyah üzerine beyaz veya beyaz üzerine siyah) ifade eder. Bu araç, yaptığınız sorgulamalarda renk kombinasyonunun normal metin, büyük metin ve arayüz bileşenleri için belirlenen erişilebilirlik seviyelerini geçip geçmediğini anında gösterir.

Renk Girişleri ve Desteklenen Formatlar

Kontrast Kontrolü aracını kullanırken iki temel renk değeri girmeniz gerekir:

• Metin rengi: Kontrol etmek istediğiniz metnin renk değeridir.
• Arka plan rengi: Metnin arkasında yer alan yüzeyin renk değeridir.

Her iki alan için de üç farklı renk formatı desteklenmektedir:

• #1a1a1a gibi Hex değerleri,
• rgb(26, 26, 26) gibi RGB değerleri,
• hsl() formatındaki değerler.

Araç ilk açıldığında varsayılan olarak metin rengi için #4f46e5, arka plan rengi için ise #ffffff değerleriyle yüklenir. Bu başlangıç renkleri 6.29 kontrast oranı sunar. Araçta yer alan takas butonu, girdiğiniz metin ve arka plan renklerini birbiriyle hızlıca yer değiştirmenizi sağlar.

Eğer geçersiz bir renk formatı girilirse araç kullanıcıyı uyarır:

• Geçersiz bir metin rengi girildiğinde: #1a1a1a or rgb(26, 26, 26) gibi geçerli bir metin rengi girin. uyarısı gösterilir.
• Geçersiz bir arka plan rengi girildiğinde: #ffffff veya rgb(255, 255, 255) gibi geçerli bir arka plan rengi girin. uyarısı gösterilir.

Kontrast Oranı Sonuçları ve Değerlendirme Seviyeleri

Araç, girdiğiniz renkleri analiz ederek aşağıdaki çıktılarları üretir:

• Kontrast oranı: Renkler arasındaki kontrast farkı "X:1" biçiminde gösterilir.
• Normal metin: AA ve AAA seviyeleri için ayrı ayrı Geçer veya Geçersiz durumunu gösterir. Normal metinlerde AA seviyesini geçmek için en az 4.5:1, AAA seviyesini geçmek için ise en az 7:1 kontrast oranı gereklidir.
• Büyük metin: AA ve AAA seviyeleri için Geçer veya Geçersiz durumunu gösterir. Büyük metinlerde AA seviyesi için en az 3:1, AAA seviyesi için ise en az 4.5:1 kontrast oranı yeterlidir.
• Arayüz ve grafikler: Bu satır, AA veya AAA ayrımı olmaksızın tek bir 3:1 eşik değerine göre değerlendirilir. Araç bu satır için iki farklı sonuç yerine sadece tek bir Geçer veya Geçersiz sonucu gösterir.

Sonuç Özeti ve Karar Mesajları

Renklerin analiz edilmesiyle birlikte araç, elde edilen en yüksek başarı seviyesini özetleyen net bir karar mesajı sunar. Bu mesajlar şu şekildedir:

• Normal metin için AA ve AAA seviyelerini geçiyor. (En yüksek uyumluluk seviyesi sağlandığında).
• Normal metin için AA seviyesini geçiyor. (Yalnızca AA standartları karşılandığında).
• Yalnızca büyük metinler için AA seviyesini geçiyor. (Kontrast sadece büyük metin sınırını kurtardığında).
• AA minimum sınırının altında — kontrastı artırın. (Kontrast oranı AA seviyesinin dahi altında kaldığında).

Kimler İçin Gerekli?

Renk kontrastının doğru ayarlanması dijital dünyada erişilebilirliğin temel taşlarından biridir. Bu araç özellikle şu meslek grupları ve ekipler için tasarlanmıştır:

• Tasarımcılar: Hazırladıkları arayüzlerdeki metinlerin ve görsel bileşenlerin okunabilirliğini tasarım aşamasında kontrol etmek için kullanırlar.
• Geliştiriciler: Yazdıkları kodların ve oluşturdukları web sayfalarının uluslararası erişilebilirlik standartlarına uygun olmasını sağlamak amacıyla yararlanırlar.
• İçerik Ekipleri: Yayınladıkları materyallerde, görsellerde ve metinlerde renk uyumunun ve kontrastın yeterli olduğunu doğrulamak için bu araca ihtiyaç duyarlar.

Gizlilik ve Veri İşleme

Kontrast Kontrolü aracını kullanırken girdiğiniz verilerin güvenliği tamamen korunur. Yapılan her bir kontrast kontrolü doğrudan kendi web tarayıcınızda gerçekleştirilir. Girdiğiniz renk değerleri veya yaptığınız sorgular hiçbir şekilde BroBroGo sunucularına yüklenmez ve dışarıya aktarılmaz.

---

Sıkça Sorulan Sorular

AA ve AAA sonuçları ne anlama geliyor?

AA, çoğu web sitesinin yasal ve pratik olarak hedeflediği temel erişilebilirlik seviyesidir; normal metinler için en az 4.5:1, büyük metinler için ise 3:1 oranı gerektirir. AAA ise çok daha katı kurallara sahip en yüksek seviyedir; normal metinler için en az 7:1, büyük metinler için ise 4.5:1 oranı ister. Kontrast oranı 1:1 (hiç kontrast yok) ile 21:1 (beyaz üzerine siyah) arasında değişmektedir.

Neler büyük metin sayılır?

Erişilebilirlik standartlarına göre, 18pt (yaklaşık 24px) ve üzerindeki metinler doğrudan büyük metin kabul edilir. Eğer metin kalın (bold) olarak yazılmışsa, 14pt (yaklaşık 18.5px) ve üzerindeki boyutlar da büyük metin sınıfına girer. Büyük metinler, boyutlarından ötürü düşük kontrastta bile daha kolay okunabildiği için AA seviyesini 3:1, AAA seviyesini ise 4.5:1 oranıyla geçebilirler.

Hangi renk formatlarını girebilirim?

Metin ve arka plan alanlarına #1a1a1a gibi bir hex değeri, rgb(26, 26, 26) gibi bir rgb() değeri veya herhangi bir hsl() değeri yazabilirsiniz. Ayrıca renk seçmek için paletlere tıklayarak da renk belirleyebilirsiniz. Metin ve arka plan renklerinin yerini hızlıca değiştirmek için takas butonunu kullanabilirsiniz.

Bu araç WCAG 2 mi yoksa yeni APCA yöntemini mi kullanıyor?

Bu araç, günümüzde küresel erişilebilirlik kurallarının ve resmi denetimlerin temel referansı olan WCAG 2.1 / 2.2 formülünü temel alır. APCA (Gelişmiş Algısal Kontrast Algoritması), WCAG 3 için taslak aşamasında geliştirilen daha yeni ve algısal bir yöntemdir. Gelecek için önemli bir alternatif olsa da henüz resmi bir uyumluluk standardı haline gelmediği için bu aracın geçiş ve uygunluk sonuçlarında kullanılmamaktadır.