Renk, Kontrast ve Okunabilirlik Hkk

Merhaba, blog yapımında kullanmak için arka plan ve yazı rengi seçimlerini araştırırken okuduğum birkaç şeyi sizinle paylaşmak istedim. Yıllar önceden beri detaylı yazmak istiyordum; fakat çok detaya inmeden kısaca belirtmem daha uygun olacak 🙂

Web Content Accessiblity Guideline bazı engeli olan kişilerin web erişiminde kolaylıklar yaşamasını sağlayacak önerilerde bulunmaktadır.

Yayınladıkları kılavuza göre standart bir yazı için yazı rengi ve arkaplan arasındaki kontrast oranı minimum 4.5:1 şeklinde olmalıdır. Bu oran karakter boyutu arttırılarak ya da yazı tipi koyulaştırılarak biraz daha düşük tutulabiliyor. Fakat normal şartlarda minimum 4.5:1 yapılarak okumak için yeterli koşul sağlanabiliyor.

Kontrast Oranı Nasıl Hesaplanıyor

(L1 + 0.05) / (L2 + 0.05)

• L1 relative luminance değeri açık olan renk
• L2 relative luminance değeri koyu olan renk

L değeri renklerin RGB değerlerine göre hesaplanıyor ve bu değer en açık beyaz için 0 ve en koyu siyah için ise 1 olarak geliyor.

İster RGB değeriyle, ister L değeriyle isterse de rengin Hex değeriyle bu kontrast oranına ulaşmak mümkün.

Ayrıca office programlarında ya da benzeri programlarda renk seçimleri yaparken size kontrast hesaplamasında gerekecek hex değerine aşağıdaki şekilde renk seçim kutusuna tıklayıp customa tıklayarak ulaşabilirsiniz.

Gerekli değerleri hesaplayan yahut direk kontrast oranını hesaplayan sitelere aşağıdaki linklerden ulaşabilirsiniz.

Relative Luminance and Contrast Ratio Calculator

Contrast Finder

Contrast Ratio

Webaim Contrast Checker

Aşağıdaki linklerden herhangi bir değerini bilmediğiniz renklerin değerlerine ulaşabilirsiniz.

Web Accessibility Evaluation Tool – İnternet sitesi girerek girdiğiniz adresteki uyumsuzlukları görebiliyorsunuz.

ColorZilla – Renk görüntüleme eklentisi

Instant Eye Dropper – Renk Değeri Bulma Programı – Küçük ve hızlı bir tıkla çalıştır programı

Color Picker and Analyser – Renk görüntüleme ve analiz programı

İmage Color Picker – Elinizdeki rengin ekran görüntüsünü upload ederek renk değerini öğrenebilirsiniz

Ayrıca maksimum kontrastı sağlamak için renk paletlerinde bulunan Complementary Colors – tamamlayıcı renkleri seçebilirsiniz.

Bu sitede de konu hakkında güzel bilgiler var, örneğin ikea ve fedex logolarında zıt renklerin kullanılarak maksimum okunabilirlik ve tanınırlığın sağlandığından bahsetmiş.

İlave Linkler

Yüklediğiniz görselle uyumlu renkleri gösteren bir site

Renk incelemeleri yapan ve güzel bilgiler içeren bir site

Çeşitli hesaplayacıların olduğu bir site, ve benzeri bir diğer site

Çeşitli bilgiler veren bir boya firmasının sitesi

Gelecekte konuya tekrar dönmek istediğimde bulunsun diye tüm ilgimi çeken linkleri ekledim. Hayatın çoğu anında renk seçimleri yapabildiğimiz için konuya biraz hakim olmak önemli aslında.

Renkli ve güzel günler dilerim 🙂