Renk Kontrastı Kontrolü — WCAG AA/AAA Oranı
İki renk arasında WCAG göreli parlaklık kontrast oranı; AA ve AAA geçiş kontrolü.
İki hex renk arasındaki WCAG kontrast oranını hesaplayın. AA için normal metinde en az 4,5:1; büyük metinde 3:1 gerekir.
Sıradaki Adım: 👇
Bunları Biliyor muydunuz?
Bilgiler yükleniyor...
Sosyal Medyada Paylaş
📑 İçindekiler
Detaylı Açıklama
Renk kontrastı, metin ile arka plan arasındaki göreli parlaklık farkını ölçer; WCAG 2.2 AA için normal metinde en az 4,5:1, büyük metinde 3:1 oranı gerekir.
Renk Kontrastı Kontrolü: WCAG Oranı ve Erişilebilirlik
İki rengin (ön plan / arka plan) kontrast oranı, göreli parlaklık (relative luminance) formülüyle hesaplanır. Oran 1:1 (aynı renk) ile 21:1 (siyah–beyaz) arasındadır. Tasarım ve arayüz kararlarında AA/AAA eşikleri, okunabilirlik ve yasal erişilebilirlik beklentisini netleştirir.
Formül (özet)
- Hex/RGB → sRGB → doğrusal RGB
- Göreli parlaklık $$L = 0{,}2126R + 0{,}7152G + 0{,}0722B$$
- Kontrast $$(L_{\text{açık}} + 0{,}05) / (L_{\text{koyu}} + 0{,}05)$$
| Seviye | Normal metin | Büyük metin |
|---|---|---|
| AA | ≥ 4,5:1 | ≥ 3:1 |
| AAA | ≥ 7:1 | ≥ 4,5:1 |
Büyük metin: en az 18 pt (veya 14 pt kalın) kabul edilir.
Senaryo
Arka plan #FFFFFF, metin #767676 ≈ 4,54:1 → AA geçer, AAA kalır. Marka rengi koyu arka planda metin olarak kullanılıyorsa oranı yeniden ölçün.
İç linkler
Renk paleti oluşturucu, Rastgele renk üretici.
Bu içerik genel bilgilendirme amaçlıdır; kesin fatura, harç, vergi ve süreler için resmî kurum duyuruları, sözleşmeler ve güncel mevzuat esastır.
Editör notu ve şeffaflık
NetSonuç editör notu: Bu araç oran ölçer; palet üretmez. Uyumlu tonlar için [renk paleti oluşturucu](/renk-paleti-olusturucu/), ilham için [rastgele renk üretici](/rastgele-renk-uretici/) araçlarını kullanın.
Resmi ve güvenilir kaynaklar
Nasıl Kullanılır?
Ön plan (metin) rengini hex olarak girin.
Arka plan rengini hex olarak girin.
Hesapla ile kontrast oranını ve AA/AAA sonuçlarını görün.
Büyük metin eşiğini ayrı satırda kontrol edin.
Sıkça Sorulan Sorular
WCAG AA kontrast oranı nedir?
AAA ne ister?
Kontrast nasıl hesaplanır?
Hex yeterli midir?
Gri metin neden sorun olur?
Logo kontrastı zorunlu mu?
Koyu tema farklı mı?
Grafik ve ikon?
Bu araç palet üretir mi?
Renk körlüğü?
Opacity etkisi?
Hukuki zorunluluk?
Büyük metin tanımı?
Sonuç kesin midir?
İlgili araçlar?
Bu Aracı Sitenize Ekleyin
Aşağıdaki kodları sitenize ekleyerek bu hesaplama aracını kendi sitenizde gösterebilirsiniz.
<div class="netsonuc-embed-wrapper" itemscope itemtype="https://schema.org/WebApplication" style="margin: 20px 0; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
<meta itemprop="name" content="Renk Kontrastı Kontrolü — WCAG AA/AAA Oranı">
<meta itemprop="description" content="İki renk arasında WCAG göreli parlaklık kontrast oranı; AA ve AAA geçiş kontrolü.">
<meta itemprop="url" content="https://www.netsonuc.com/renk-kontrast-kontrolu">
<meta itemprop="applicationCategory" content="UtilityApplication">
<meta itemprop="operatingSystem" content="Any">
<meta itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<meta itemprop="price" content="0">
<meta itemprop="priceCurrency" content="TRY">
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<meta itemprop="ratingValue" content="4.8">
<meta itemprop="ratingCount" content="1000">
<meta itemprop="bestRating" content="5">
<meta itemprop="worstRating" content="1">
</div>
<iframe
src="https://www.netsonuc.com/renk-kontrast-kontrolu"
width="100%"
height="800"
frameborder="0"
scrolling="auto"
title="Renk Kontrastı Kontrolü — WCAG AA/AAA Oranı - NetSonuç Hesaplama Aracı"
loading="lazy"
allowfullscreen
aria-label="Renk Kontrastı Kontrolü — WCAG AA/AAA Oranı hesaplama aracı">
</iframe>
<div style="background: #f8f9fa; padding: 12px; border-top: 1px solid #e5e7eb; text-align: center;">
<p style="margin: 0; font-size: 12px; color: #666; line-height: 1.6;">
<a href="https://www.netsonuc.com/renk-kontrast-kontrolu" target="_blank" rel="dofollow" title="Renk Kontrastı Kontrolü — WCAG AA/AAA Oranı Hesaplama Aracı - NetSonuç" style="color: #3b82f6; text-decoration: none; font-weight: 500;">Renk Kontrastı Kontrolü — WCAG AA/AAA Oranı Hesaplama Aracı</a> -
<a href="https://www.netsonuc.com" target="_blank" rel="dofollow" title="NetSonuç - Ücretsiz Online Hesaplama Platformu" style="color: #3b82f6; text-decoration: none; font-weight: 500;">NetSonuç</a> tarafından sağlanan ücretsiz online hesaplama platformu.
<a href="https://www.netsonuc.com/renk-kontrast-kontrolu" target="_blank" rel="dofollow" title="Renk Kontrastı Kontrolü — WCAG AA/AAA Oranı Hesaplayıcı" style="color: #3b82f6; text-decoration: none;">Hesaplayıcıyı kullan</a>,
<a href="https://www.netsonuc.com/renk-kontrast-kontrolu" target="_blank" rel="dofollow" title="Renk Kontrastı Kontrolü — WCAG AA/AAA Oranı Hesaplama Simülatörü" style="color: #3b82f6; text-decoration: none;">hesaplama simülatörü</a> veya
<a href="https://www.netsonuc.com" target="_blank" rel="dofollow" title="NetSonuç Hesaplama Araçları" style="color: #3b82f6; text-decoration: none;">tüm araçları görüntüle</a>.
</p>
</div>
</div>📝 Kullanım Talimatları:
- Iframe Embed: Web sitenizin HTML koduna doğrudan yapıştırın.
- HTML Snippet: Blog yazılarınızda, makalelerinizde kullanın (en SEO-friendly, Google'ın favorisi)
- WordPress: WordPress sitenizde shortcode olarak kullanın. Eklenti gerekmez.
- QR Kod: Fiziksel materyallerde, sunumlarda, broşürlerde kullanın. Mobil erişim için ideal.
- Bookmarklet: Tarayıcı yer imlerinize ekleyin. Hızlı erişim için mükemmel.