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)

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 🙂

Renk, Kontrast ve Okunabilirlik Hkk” için 2 yorum

  1. Berker, renk secimi basit ve onemli degilmis gibi gorunen ama dogru yapilmadiginda kullanilabilirligi kotu yonde etkileyen bir sey. Bu konuyla ilgili birden fazla ders aldim. Uzun zamandir https://color.adobe.com/explore sayfasini kullaniyorum. Bu sayfada birbiriyle uyumlu renklerleden olusturulmus renk paletleri var. Ayrica cok fazla sayida renk kullanmak da kullanilabilirligi azaltan bir etken.

    Beğen

    1. Önerdiğin link de güzelmiş Kadir, matematiksel yöntemlerle doğru renkleri seçmek daha kolay oluyor, biraz göz zevki biraz da renk paketlerini kullanarak doğru yolu bulmak lazım

      Beğen

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s