İki Rengin Kontrast Oranı Nasıl Hesaplanır?

Genel bakış

Bu araç, bir ön plan rengi ile arka plan rengi arasındaki kontrast oranını kontrol etmek ve sonucu metin boyutuna göre değerlendirmek için kullanılır. Örneğin bir başlığın metin rengini, kart yüzeyinin ya da sayfa arka planının rengiyle karşılaştırabilirsiniz. Böylece seçtiğiniz renk çiftinin sayısal oranını ve aracın dört eşik için yaptığı değerlendirmeleri aynı sonuçta görürsünüz.

Ön plan, metnin veya simgenin rengi; arka plan ise bu içeriğin üzerinde bulunduğu yüzeyin rengidir. Renk alanlarını boş bırakırsanız ön plan için siyah (#000000), arka plan için beyaz (#ffffff) kullanılır. Bu varsayılanlar, giriş yapmadan aracın nasıl sonuç verdiğini incelemek için de kullanılabilir.

Giriş olarak # ile başlayan üç ya da altı basamaklı onaltılık renk metni veya rgb ile başlayan, virgülle ayrılmış üç sayısal bileşen içeren RGB benzeri metin kullanın. Renk yazarken biçimin başındaki işarete, bileşen sayısına ve virgül ayraçlarına dikkat edin. Araç, renk metninin başındaki ve sonundaki boşlukları kaldırır ve harfleri küçültür; bu nedenle aynı renk farklı boşluk veya harf biçimiyle yazıldığında normalleştirilerek işlenebilir.

Adımlar

1. Karşılaştırmak istediğiniz metin ya da simge rengini ön plan alanına, üzerinde görüneceği yüzey rengini arka plan alanına yazın. İki alanı da boş bırakmanız hâlinde aracın siyah ve beyaz varsayılanlarını kullanacağını dikkate alın. Yalnızca bir alanı doldurursanız diğer alan için ilgili varsayılan renk geçerli olur.

2. Renkleri desteklenen biçimlerden biriyle girin. Üç basamaklı #000 ve altı basamaklı #ffffff onaltılık örneklerdir. RGB benzeri giriş için rgb(0, 0, 0) biçiminde, rgb ile başlayan ve virgülle ayrılan üç sayısal bileşen kullanın. Renk adı, farklı bir CSS yazımı veya burada belirtilen kalıpların dışındaki bir onaltılık biçim yerine bu biçimlerden birini seçin.

3. Girişlerde başta ya da sonda boşluk varsa bunlar işleme alınmadan önce temizlenir; harfler de küçük harfe dönüştürülür. RGB bileşenleri ondalık tam sayı olarak okunur ve bu bileşenler için ayrıca bir aralık denetimi uygulanmaz. Bu nedenle RGB girişlerini beklenen üç bileşenli renk gösterimine uygun yazın ve bileşenleri kontrol ederken yalnızca biçime değil, kullandığınız sayıların tasarımınızdaki rengi temsil edip etmediğine de bakın.

4. Renkleri girdikten sonra kontrast kontrolünü çalıştırın. Her iki renk çözümlenebiliyorsa sonuçta kontrast oranını arayın. Araç, değerlendirmeden önce geçerli renkler için oranı iki ondalık basamağa yuvarlar; sonraki eşik değerlendirmeleri bu yuvarlanmış orana dayanır.

5. Sonuç bölümünde normal metin için 4,5 ve 7,0 eşiklerine, büyük metin için 3,0 ve 4,5 eşiklerine göre verilen değerlendirmeleri ayrı ayrı okuyun. İncelediğiniz metnin boyutunu ve tasarım bağlamını dikkate alarak uygun kategoriyi kullanın. Oranın ve eşik değerlendirmelerinin hangi renk çiftiyle ilişkili olduğunu karıştırmamak için değişiklik yaptıktan sonra kontrolü yeniden çalıştırın.

Sonuçları yorumlama

Sonuçtaki oran, girilen ön plan ve arka plan renkleri arasındaki kontrastı sayısal olarak özetler. Değerlendirmeler, bu oranı iki metin boyutu kategorisinde inceler: normal metin için 4,5 ve 7,0; büyük metin için 3,0 ve 4,5. Bu eşikler, aracın sunduğu kontrast değerlendirmesini anlamaya yardımcı olur. Ancak yalnızca bu sonuçlara bakarak bir tasarımın erişilebilirliğinin diğer yönleri hakkında karar vermeyin; araç burada belirtilen kontrast oranı ve metin eşikleriyle sınırlı bir değerlendirme yapar.

Renklerden biri çözümlenemiyorsa araç normal kontrast değerlendirmelerini oluşturmaz. Bunun yerine başarılı bir sonuç içinde hata belirtimi döndürür. Bu durum kontrolün çalıştırılmadığı anlamına gelmez; sorun, renk girişlerinden birinin işlenebilir biçimde olmamasıdır. Böyle bir sonuç gördüğünüzde renk alanlarını yeniden kontrol edin: onaltılık girişin # ile başlayıp üç veya altı basamak içermesine, RGB benzeri girişin rgb ile başlayıp virgülle ayrılmış üç sayısal bileşen taşımasına bakın. Ardından düzeltilen renklerle kontrolü yeniden çalıştırın.

İki giriş aynı renge çözümlenirse bildirilen kontrast oranı 1,0 olur. Bu sonuç, ön plan ile arka plan arasında oran bakımından fark bulunmadığını gösterir; eşik değerlendirmelerini de bu bağlamda okuyun. Başında veya sonunda boşluk bulunan, harf büyüklüğü farklı yazılmış bir renk metni ise işlenmeden önce normalleştirildiği için sonuç, metnin ilk yazılışından farklı görünmeyebilir. Renkleri değiştirirken oranı tek başına değil, normal ve büyük metin kategorilerindeki ilgili değerlendirmeyle birlikte incelemek daha açıklayıcıdır.

Uygulamalı örnek

Bir tasarımcı, siyah metin ile beyaz arka planı karşılaştırarak bu renk çiftinin kontrast sonuçlarını görmek ister.

Ön plan alanına #000000, arka plan alanına #ffffff yazıp kontrast kontrolünü çalıştırın; ardından oranı ve dört değerlendirmeyi inceleyin.

Sonuçta iki ondalık basamağa yuvarlanmış bir kontrast oranı ile normal metin ve büyük metin için ayrı eşik değerlendirmeleri yer alır.

Sınırlamalar

• Sonuç, kontrast oranı ile dört belirtilen metin eşiğine ilişkin değerlendirmeyle sınırlıdır; tasarımın erişilebilirliğinin diğer unsurları hakkında sonuç vermez.

Sık yapılan hatalar

• Renk adı, desteklenmeyen bir CSS biçimi veya virgülle ayrılmamış RGB girişi renklerden birinin çözümlenememesine yol açabilir. Girişi #000 ya da #ffffff gibi üç veya altı basamaklı onaltılık biçime ya da rgb(0, 0, 0) gibi virgülle ayrılmış üç bileşenli biçime çevirip kontrolü yeniden çalıştırın.

Sık sorulan sorular

Renk alanlarını boş bırakırsam ne olur?

İki alanı da boş bırakırsanız ön plan için siyah (#000000), arka plan için beyaz (#ffffff) kullanılır. Yalnızca bir alan boşsa boş kalan alan için ilgili varsayılan renk geçerli olur.

Hangi renk biçimlerini kullanabilirim?

# ile başlayan üç veya altı basamaklı onaltılık metin ile rgb ile başlayan ve virgülle ayrılmış üç sayısal bileşen içeren RGB benzeri metin kullanabilirsiniz. Renklerden biri çözümlenemezse normal kontrast değerlendirmeleri yerine hata belirtimi içeren başarılı bir sonuç döner.

Sonuçtaki eşikler neyi gösterir?

Geçerli renklerde oran iki ondalık basamağa yuvarlanır. Ardından normal metin için 4,5 ve 7,0; büyük metin için 3,0 ve 4,5 eşikleri değerlendirilir.