Yeşil Düğmede Beyaz Yazı: Kontrastı Görünüşe Göre Seçmeyin

İki rengi doğru alanlara girin

Düğme zemini için #22c55e, metin için #ffffff kullanarak başlayın. Bunlar örnek renklerdir; kendi projenizde tarayıcının hesaplanan stillerinden gerçek değerleri alın. Aracın ön plan alanına metni, arka plan alanına düğme zeminini yazın. Sayfanın genel arka planını girmek, düğmenin kendi yüzeyini test etmiş olmaz. Gölgeleri geçici olarak yok sayıp iki düz renkle ilk ölçümü yapın.

Beyaz ile koyu metni karşılaştırın

Zemini aynı bırakıp metni #111827 yapın ve sonucu yeniden inceleyin. Böylece marka rengini korurken yazı renginin etkisini görürsünüz. W3C’nin AA metin eşikleri normal yazı için 4,5:1, büyük yazı için 3:1’dir. Bir oranı yalnızca iki ondalıklı görünümüne bakarak sınırda kabul etmeyin; aracın geçti/kaldı sonucunu da okuyun. Büyük yazı seçeneğini sıradan küçük bir düğme etiketine uygulamayın.

• W3C · WCAG 2.2 · Contrast (Minimum)

Düğmenin diğer hâllerini unutmayın

Üzerine gelince zemin koyulaşıyorsa bu ikinci renk çiftini de ölçün. Klavyeyle düğmeye gelince etiketin hâlâ okunabildiğini kontrol edin. Karanlık temada farklı renkler kullanılıyorsa aynı denemeyi orada da yapın. Tasarım dosyasındaki örnek ile tarayıcıdaki gerçek görünümün aynı olduğunu varsaymayın; uygulamadaki renkler bir CSS kuralıyla değişmiş olabilir.

Ölçümü gerçek sayfada tamamlayın

Araç iki düz HEX rengi karşılaştırır; tüm sayfayı tarayıp erişilebilirlik onayı vermez. Fotoğraf, gradyan veya saydam katman üzerindeki yazıda yalnızca tek bir arka plan kodu girmek yeterli olmayabilir. Seçtiğiniz çifti gerçek düğmede deneyin, etiketi mobil ekranda okuyun ve klavyeyle ulaşın. Son renkleri ve kontrol edilen düğme hâllerini tasarım notuna yazın; sonraki tema değişikliğinde aynı kontrolleri tekrarlamak kolaylaşır.