Renk Kontrast Denetleyicisi
Ön plan ve arka plan renkleri arasındaki WCAG AA ve AAA kontrast oranını kontrol edin
Ön plan (metin) rengi
Arka plan rengi
Büyük Metin Örneği (18px kalın)
Normal metin örneği — gövde metniniz seçtiğiniz arka plan rengi üzerinde bu şekilde görünecektir.
Kontrast oranı
14.63:1
WCAG uyumluluğu
Geçti
Normal AA
Geçti
Normal AAA
Geçti
Büyük AA
Geçti
Büyük AAA
WCAG AA — Normal metin: 4.5:1, Büyük metin (18px+ veya 14px kalın): 3:1
WCAG AAA — Normal metin: 7:1, Büyük metin (18px+ veya 14px kalın): 4.5:1
Renk Kontrast Denetimi Nedir?
Renk kontrast denetimi, bir ön plan rengi (genellikle metin) ile arka plan rengi arasındaki parlaklık farkını ölçer ve sonucu bir oran olarak ifade eder. 1:1 oranı renklerin özdeş olduğunu; 21:1 ise siyah üzerine beyaz veya tersini temsil eden en yüksek değeri gösterir. W3C tarafından yayımlanan Web İçeriği Erişilebilirlik Yönergeleri (WCAG), düşük görüşe sahip ya da renk körlüğü bulunan kişilerin metni okuyabilmesi için karşılanması gereken asgari kontrast oranlarını tanımlar.
Kontrast oranı formülü WCAG 2.x'ten alınmış olup göreli parlaklığa dayanır. Göreli parlaklık, bir rengin insan gözüne ne kadar parlak göründüğünü ifade eden bir ölçüttür. Her sRGB kanalının gamasını kaldırarak doğrusallaştırılır ve kanallar ITU-R BT.709 katsayılarıyla ağırlıklandırılır: kırmızı için 0,2126, yeşil için 0,7152, mavi için 0,0722. Yeşil en yüksek katkıyı sağlar çünkü insan gözü yeşil ışığa en duyarlıdır. Oran şu şekilde hesaplanır: (L1 + 0,05) / (L2 + 0,05); burada L1 daha açık rengin parlaklığıdır.
WCAG iki uyumluluk düzeyi tanımlar. AA düzeyi, normal boyutlu metin için en az 4,5:1, büyük metin için (18 piksel ve üzeri ya da 14 piksel kalın) 3:1 kontrast oranı gerektirir. AAA düzeyi bu eşiği sırasıyla 7:1 ve 4,5:1'e yükseltir. WCAG 2.1 ayrıca kenarlıklar, simgeler ve odak göstergeleri gibi metin dışı arayüz bileşenleri için 3:1 oranı zorunlu kılan 1.4.11 Başarı Ölçütünü de tanıtmıştır.
Bu Kontrast Denetleyicisini Neden Kullanmalısınız?
Kontrasta göz kararı bakmak güvenilir değildir. Kalibreli ekranınızda birbirinden ayrı görünen renkler, düşük kaliteli bir dizüstü bilgisayarda, doğrudan güneş ışığında ya da deuteranopi gibi renk görüş bozukluğu olan biri için iç içe geçebilir. Sayısal bir oran tahmin unsurunu ortadan kaldırır ve size WCAG standardına göre geçti/başarısız sonucu verir.
Kontrast Denetleyicisi Kullanım Senaryoları
WCAG Kontrast Oranı Gereksinimleri
Aşağıdaki tablo, WCAG 2.1'in farklı içerik türleri ve uyumluluk düzeyleri için gerektirdiği asgari kontrast oranlarını özetlemektedir. Büyük metin; normal ağırlıkta 18 piksel (24 CSS pikseli) ve üzeri ya da kalın ağırlıkta 14 piksel (18,66 CSS pikseli) ve üzeri olarak tanımlanır.
| Düzey | Asgari oran | Geçerli olduğu | Not |
|---|---|---|---|
| AA Normal text | 4.5 : 1 | Body text, paragraphs, labels | Minimum for most UI text |
| AA Large text | 3.0 : 1 | Text >= 18px, or >= 14px bold | Minimum for headings |
| AA UI components | 3.0 : 1 | Borders, icons, focus indicators | Non-text contrast (WCAG 1.4.11) |
| AAA Normal text | 7.0 : 1 | Body text at highest standard | Enhanced readability |
| AAA Large text | 4.5 : 1 | Large text at highest standard | Enhanced for headings |
Parlaklık, AA ve AAA Açıklaması
Kontrast oranı hesaplaması üç aşamadan oluşur: her renk için parlaklığı hesapla, oranı türet ve WCAG eşiğiyle karşılaştır.
Kod Örnekleri
WCAG kontrast oranlarını programatik olarak hesaplayın. Her örnek, WCAG 2.x'ten göreli parlaklık formülünü ve kontrast oranı hesaplamasını uygular. Karşılaştırma için siyah-beyaz ve indigo-beyaz çiftleri test edilmiştir.
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
const [rs, gs, bs] = [r, g, b].map(c => {
c /= 255
return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
})
return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}
// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
const l1 = luminance(...fg)
const l2 = luminance(...bg)
const lighter = Math.max(l1, l2)
const darker = Math.min(l1, l2)
return (lighter + 0.05) / (darker + 0.05)
}
contrastRatio([0, 0, 0], [255, 255, 255]) // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255]) // -> 6.06 (AA pass)def luminance(r: int, g: int, b: int) -> float:
"""Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
channels = []
for c in (r, g, b):
c /= 255
channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]
def contrast_ratio(fg: tuple, bg: tuple) -> float:
l1 = luminance(*fg)
l2 = luminance(*bg)
lighter, darker = max(l1, l2), min(l1, l2)
return (lighter + 0.05) / (darker + 0.05)
print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}") # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}") # -> 3.95
# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}") # -> 6.06 — AA passpackage main
import (
"fmt"
"math"
)
func linearize(c float64) float64 {
c /= 255
if c <= 0.04045 {
return c / 12.92
}
return math.Pow((c+0.055)/1.055, 2.4)
}
func luminance(r, g, b int) float64 {
return 0.2126*linearize(float64(r)) +
0.7152*linearize(float64(g)) +
0.0722*linearize(float64(b))
}
func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
l1 := luminance(fgR, fgG, fgB)
l2 := luminance(bgR, bgG, bgB)
lighter := math.Max(l1, l2)
darker := math.Min(l1, l2)
return (lighter + 0.05) / (darker + 0.05)
}
func main() {
ratio := contrastRatio(0, 0, 0, 255, 255, 255)
fmt.Printf("%.2f\n", ratio) // -> 21.00
ratio = contrastRatio(29, 78, 216, 255, 255, 255)
fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}/* WCAG-safe color pairs — tested contrast ratios */
/* 12.63:1 — passes AAA normal text */
.high-contrast {
color: #1e293b; /* slate-800 */
background: #f8fafc; /* slate-50 */
}
/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
color: #e2e8f0; /* slate-200 */
background: #0f172a; /* slate-900 */
}
/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
color: #1d4ed8; /* blue-700 */
background: #ffffff;
}
/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
color: #94a3b8; /* slate-400 */
background: #ffffff;
}