DevBentoDüğme Renk Kontrastı Erişilebilirlik Kontrolü
Düğme renklerinizin WCAG kontrast gereksinimlerini karşılayıp karşılamadığını kontrol edin. CTA düğmesi renk çiftlerini erişilebilirlik için test edin.
Pijamalı hasta yağız şoföre çabucak güvendi
Pijamalı hasta yağız şoföre çabucak güvendi
Pijamalı hasta yağız şoföre çabucak güvendi
Düğme Renk Kontrastını Kontrol Edin
Dügmeler, renk kontrastındaki metin hatalarından sonra en yaygın erişilebilirlik denetimi hatasıdır. Kontrast gereksinimlerini başaramayan bir düğme, kullanıcıların görevleri tamamlamasını, formları göndermesini veya uygulamanızda gezinmesini engeller. Bu örnek, beyaz metin (#ffffff) ve standart mavi düğme (#3b82f6) çiftini test eder.
Düğme Kontrastı Neden Karmaşıktır
Dügmelerin genellikle karıştırılan iki ayrı kontrast gereksinimi vardır:
- Metin kontrastı (SC 1.4.3): Düğmenin içindeki metin rengi, düğme arka plan rengine karşı %4.5:1 kontrasta sahip olmalıdır
- Metin dışı kontrast (SC 1.4.11): Düğmenin görsel sınırı, komşu arka plana (arkasındaki sayfa veya kart) karşı %3:1 kontrasta sahip olmalıdır
Bir düğme metin kontrastını geçebilir ama metin dışı kontrastı başaramayabilir, ya da tam tersi. Her ikisini de kontrol etmeniz gerekir.
Mavi Düğme Sorunu
Tasarım sistemlerinin çoğu birincil düğme rengi olarak mavi kullanır. İşte standart mavi tonlarının beyaz metin ile performansı:
| Düğme rengi | Beyaz metin oranı | WCAG AA | Notlar |
|---|---|---|---|
| #3b82f6 (blue-500) | %4.56:1 | Geçer | Zor geçer, pay yok |
| #2563eb (blue-600) | %6.44:1 | Geçer | Önerilen minimum |
| #1d4ed8 (blue-700) | %8.59:1 | Geçer | Birincil CTA’lar için iyi |
| #60a5fa (blue-400) | %2.73:1 | Başarısız | Yaygın hata |
| #93c5fd (blue-300) | %1.47:1 | Başarısız | Beyaz metin ile asla kullanmayın |
Düğme Durumları ve Kontrastı
Her etkileşimli durum kontrast gereksinimlerini karşılamalıdır:
| Durum | Ön plan | Arka plan | Oran | Geçer? |
|---|---|---|---|---|
| Varsayılan | #ffffff | #3b82f6 | %4.56:1 | AA geçer |
| Üzerine gelme | #ffffff | #2563eb | %6.44:1 | AA geçer |
| Aktif | #ffffff | #1d4ed8 | %8.59:1 | AA geçer |
| Devre dışı | #94a3b8 | #cbd5e1 | %1.46:1 | Muaf |
| Odak halkası | #ffffff | #1e40af | %10.03:1 | AA geçer |
Yaygın Düğme Erişilebilirliği Hataları
- Açık mavi ve beyaz metin: blue-400 veya blue-300’ü beyaz metin ile kullanmak WCAG’ı başarısız olur
- Gradyan arka planlar: Geçişten başaran bir gruba geçen tutarsız kontrast yaratır
- Karışan odak halkaları: Odak göstergeleri hem düğmeye hem sayfa arka planına karşı görünür olmalıdır
- Etiketsiz yalnızca simgeli düğmeler: Eksik aria-label, düğmeyi ekran okuyucular için görünmez yapar
- Yalnızca renk gösterge olarak: Devre dışı düğmeler opaklık azaltmasına yalnızca diğer görsel ipuçları olmadan güvenir
Nasıl Kullanılır
- Düğme metin renginizi ön plan alanına girin
- Düğme arka plan renginizi arka plan alanına girin
- Oranın normal metin için %4.5:1 veya büyük metin (18px kalın veya 24px+) için %3:1 karşılayıp karşılamadığını kontrol edin
- Her düğme durumunu (varsayılan, üzerine gelme, aktif, odak) ayrı ayrı test edin
- Daha iyi kombinasyonlar bulmak için erişilebilir renk önerilerini kullanın
Tam Düğme Yığınını Test Etme
Dügmeler genellikle yalıtılmış değildir. Tasarım sisteminizdeki her varyantı kontrol edin: birincil, ikincil, anahat, hayalet ve devre dışı. CSS Gradyanı düğme arka planları oluşturmanıza yardımcı olabilir, ancak göndermeden önce son kontrast oranını WCAG Kontrast Kontrolcüsü ile doğrulayın.
Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.