Renk Kontrast Denetleyici

Erişilebilirlik için WCAG 2.1 uyumunu kontrol edin

{{ __t('small_text') }}: The quick brown fox jumps over the lazy dog.

{{ __t('large_text') }}: The quick brown fox.

{{ ratio }}:1

{{ __t('contrast_ratio') }}

{{ passAAsmall ? '✓' : '✗' }}
AA Small (4.5:1)
{{ passAAlarge ? '✓' : '✗' }}
AA Large (3:1)
{{ passAAAsmall ? '✓' : '✗' }}
AAA Small (7:1)
{{ passAAAlarge ? '✓' : '✗' }}
AAA Large (4.5:1)

Renk kontrastı neden önemli?

Erkeklerin yaklaşık %8'i ve kadınların %0,5'i bir tür renk körlüğüne sahiptir. Düşük kontrast metni okumayı zorlaştırır — özellikle küçük yazı, kötü ekran ve görme engelli kullanıcılar için. WCAG, birçok ülkede yasal olarak gerekli minimum değerleri tanımlar (AB EN 301 549, ABD ADA).

WCAG 2.1 eşikleri

AA seviyesi normal metin için 4,5:1 (24 px altında veya 18,66 px kalın altında) ve büyük metin için 3:1 gerektirir. AAA seviyesi normal metin için 7:1, büyük metin için 4,5:1 gerektirir. UI bileşenleri ve grafikler en az 3:1. Bu değerler WCAG formülünün göreli parlaklığına dayanır.