Renk Kontrastı Denetleyicisi

WCAG AA ve AAA'ya karşı ön plan/arka plan kontrastını kontrol edin. Renkleri seçerken oran güncellemesini görün.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Ön plan/arka plan kontrastını WCAG AA ve AAA yönergelerine göre kontrol edin.
Tarayıcınızda çalışır
Kullanımı ücretsiz

Nasıl kullanılır

Metin (ön plan) ve arka plan renklerini seçin.
Kontrast oranını ve AA/AAA sonuçlarını okuyun.
Hedef seviyenizi geçene kadar ayarlayın.

How this tool works

Metin (ön plan) ve arka plan renklerini seçin.
Kontrast oranını ve AA/AAA sonuçlarını okuyun.
Hedef seviyenizi geçene kadar ayarlayın.

Recommended settings

Önce varsayılan seçenekleri kullanın, ardından gerekirse ayarlayın

Supported formats

Text / on-page input

File size and limits

Çok karmaşık, çok katmanlı önizlemeler eski telefonlarda daha yavaş gelebilir.

Privacy

Renk ve CSS oluşturucular tamamen tarayıcınızda çalışır. Önizlemeler ve dönüşümler hiçbir zaman stillerinizi yüklemez.

Common use cases

İhtiyaç duyduğunuzda Renk Kontrastı Denetleyicisini kullanın: Ön plan/arka plan kontrastını WCAG AA ve AAA yönergelerine göre kontrol edin.

Troubleshooting

Yapıştırma işleminden sonra önizleme farklı görünüyor

Sayfanızda rakip CSS olup olmadığını kontrol edin (sıfırlamalar, devralınan renkler). Oluşturulan kuralı önce yalıtılmış bir stil sayfasına kopyalayın.

SSS

Bu benim CSS'mi yüklüyor mu?

Hayır. Oluşturucular ve dönüştürücüler tarayıcınızda canlı önizlemeyle çalışır.

Bir hesaba ihtiyacım var mı?

Hayır. Aracı açın, kontrollerde ince ayarlar yapın ve CSS'yi kopyalayın.