Renk Kodları ve WCAG Kontrast Rehberi (2026)
HEX, RGB, HSL Renk Kodları ve WCAG Erişilebilirlik Standartları: Web tasarımcıları ve geliştiriciler için kapsamlı renk rehberi.
İçindekiler
1. Renk Kodları Nedir?
Web tasarımı ve grafik çalışmalarında renkler, sayısal kodlarla ifade edilir. Bu kodlar, ekranlarda milyonlarca farklı rengin doğru şekilde görüntülenmesini sağlar. En yaygın kullanılan üç renk formatı HEX, RGB ve HSL'dir.
Her format farklı kullanım senaryolarına uygundur. Web geliştiriciler genellikle HEX, tasarımcılar RGB veya HSL tercih eder. Hangi formatı kullanırsanız kullanın, hepsi aynı rengi temsil edebilir.
Örnek Renkler
- #00BFA5 - Turkuaz
- #6366F1 - Mor
- #F59E0B - Turuncu
2. HEX Renk Kodu
HEX (Hexadecimal / Onaltılık) kodlar, renkleri 6 haneli bir kod ile ifade eder. # işareti ile başlar ve 0-9 rakamları ile A-F harflerini kullanır.
HEX Kod Yapısı
#RRGGBB
#FF5733 → Kırmızı: FF (255), Yeşil: 57 (87), Mavi: 33 (51)
HEX Kod Bileşenleri
- RR (Kırmızı): 00 - FF arası (0-255)
- GG (Yeşil): 00 - FF arası (0-255)
- BB (Mavi): 00 - FF arası (0-255)
İpucu
Kısa HEX kodları da kullanılabilir. #FFF = #FFFFFF (beyaz), #000 = #000000 (siyah)
3. RGB Renk Kodu
RGB (Red, Green, Blue), renkleri kırmızı, yeşil ve mavi bileşenlerinin 0-255 arasındaki değerleri
ile
ifade eder. CSS'de rgb(r, g, b) veya rgba(r, g, b, a) şeklinde kullanılır.
RGB Örnekleri
rgb(255, 87, 51) → Turuncu kırmızırgba(0, 191, 165, 0.5) → %50 şeffaf turkuaz
RGB Ne Zaman Kullanılır?
- Şeffaflık (alpha) gerektiğinde
- JavaScript ile dinamik renk hesaplamalarında
- Renk karışımları oluştururken
4. HSL Renk Kodu
HSL (Hue, Saturation, Lightness) renkleri daha sezgisel bir şekilde ifade eder:
HSL Bileşenleri
- H (Ton): 0° - 360° (Renk çemberinde derece: 0=kırmızı, 120=yeşil, 240=mavi)
- S (Doygunluk): 0% - 100% (0=gri, 100=tam canlı)
- L (Parlaklık): 0% - 100% (0=siyah, 50=normal, 100=beyaz)
HSL Örnekleri
hsl(168, 100%, 37%) → Turkuazhsla(168, 100%, 37%, 0.8) → %80 opaklık
Avantaj
HSL ile renk varyasyonları oluşturmak çok kolay. Sadece L değerini değiştirerek aynı rengin açık/koyu tonlarını elde edebilirsiniz.
Renk Kodlarını Hemen Dönüştürün
HEX, RGB ve HSL formatları arasında kolayca dönüşüm yapın
Renk Kodu Oluşturucu →5. WCAG Kontrast Standartları
WCAG (Web Content Accessibility Guidelines), web içeriğinin engelli bireyler için erişilebilir olmasını sağlayan uluslararası standartlardır. Renk kontrastı, görme güçlüğü çeken kullanıcıların metni rahatça okumasını sağlar.
Kontrast Oranı Nedir?
Kontrast oranı, iki renk arasındaki parlaklık farkını ölçer. 1:1 (aynı renk) ile 21:1 (siyah-beyaz) arasında değişir. Oran ne kadar yüksekse, metin o kadar okunabilirdir.
WCAG Seviye Gereksinimleri
- AA Normal (4.5:1): 18px altı normal metin
- AA Büyük (3:1): 18px+ veya 14px kalın metin
- AAA Normal (7:1): En yüksek erişilebilirlik
- AAA Büyük (4.5:1): Büyük metinler için AAA
Önemli
Birçok ülkede kamu kurumları ve büyük şirketler için AA seviyesi yasal zorunluluktur. Web sitenizin erişilebilir olması hem yasal hem de etik bir gerekliliktir.
Kontrast Oranı Nasıl Hesaplanır?
Kontrast oranı, iki rengin "göreli parlaklık" (relative luminance) değerleri kullanılarak hesaplanır:
Kontrast Formülü
Kontrast Oranı = (L1 + 0.05) / (L2 + 0.05)L1 = Açık rengin göreli parlaklığıL2 = Koyu rengin göreli parlaklığı
Kontrastınızı Hemen Test Edin
Metin ve arka plan renklerinizin WCAG uyumluluğunu kontrol edin
Kontrast Kontrolü →6. Renk Harmonileri
Renk harmonileri, birbiriyle uyumlu renk kombinasyonları oluşturmak için kullanılan teorik yaklaşımlardır. Renk çemberi üzerindeki geometrik ilişkilere dayanır.
Temel Harmoniler
- Tamamlayıcı: Renk çemberinde tam karşıt renkler (180°) - Güçlü kontrast
- Üçlü (Triadic): Çemberde eşit mesafeli 3 renk (120°) - Dinamik tasarımlar
- Benzer (Analogous): Yan yana renkler (30°) - Uyumlu, huzurlu tasarımlar
- Bölünmüş Tamamlayıcı: Ana renk + tamamlayıcının yanındaki 2 renk - Dengeli kontrast
7. Ücretsiz Renk Araçları
Sitemizde yer alan renk araçlarını kullanarak kolayca renk dönüşümü yapabilir ve kontrastınızı kontrol edebilirsiniz.
Özet
- HEX: Web'de en yaygın format, CSS'de kullanımı kolay
- RGB: Şeffaflık gerektiğinde, programatik hesaplamalar için
- HSL: Sezgisel renk ayarları, ton varyasyonları için
- WCAG AA: Minimum 4.5:1 kontrast, çoğu site için yeterli
- WCAG AAA: Minimum 7:1 kontrast, en yüksek erişilebilirlik
Renk seçimi hem estetik hem de erişilebilirlik açısından önemlidir. Tasarımlarınızda güzel görünen renkler seçerken, tüm kullanıcıların içeriğinizi rahatça okuyabilmesini sağlayın.
Sıkça Sorulan Sorular
HEX renk kodu nedir?
HEX (Hexadecimal) renk kodu, renkleri 6 haneli onaltılık sayı sistemiyle ifade eder. # işareti ile başlar ve RGB değerlerini temsil eder. Örneğin #FF0000 kırmızı renktir.
WCAG kontrast oranı ne olmalıdır?
WCAG 2.1 standartlarına göre normal metin için minimum 4.5:1, büyük metin için 3:1 kontrast oranı gerekir. AAA seviyesi için bu oranlar sırasıyla 7:1 ve 4.5:1'dir.
RGB ve HSL arasındaki fark nedir?
RGB (Kırmızı-Yeşil-Mavi) renkleri ışık karışımıyla tanımlar. HSL (Ton-Doygunluk-Aydınlık) ise rengi insan algısına daha yakın bir şekilde ifade eder ve tasarımda daha sezgiseldir.
Web erişilebilirliğinde renk kontrasti neden önemlidir?
Düşük kontrast oranı, görme bozukluğu olan kullanıcıların içeriği okumasını zorlaştırır. Yasal olarak birçok ülkede web sitelerinin WCAG standartlarına uyması gerekmektedir.