// Landing page
Warna Tombol CTA: Kontras dan Posisi Mengalahkan Warna
Tidak ada 1 warna tombol yang menang di semua halaman. Baca aturan kontras WCAG, posisi tombol, dan cara menguji perubahan warna dengan benar.
Tidak ada 1 warna tombol yang menang pada semua halaman. Yang menentukan adalah kontras terhadap latar, posisi terhadap isi, dan kejelasan kata di dalam tombol.
Kontras lebih penting daripada warna
WCAG 2.2 meminta rasio kontras teks paling rendah 4,5 banding 1 untuk teks biasa, dan 3 banding 1 untuk teks besar. Tombol yang memakai warna merek dengan kontras rendah akan sulit dibaca sebagian pembaca.
| Pemeriksaan | Ambang | Alasan |
|---|---|---|
| Kontras teks tombol | 4,5 banding 1 | Teks tetap terbaca pada layar terang. |
| Kontras tombol terhadap latar | 3 banding 1 | Tombol terlihat sebagai tombol. |
| Ukuran area sentuh | 24 piksel atau lebih | Jari dapat menekan tanpa salah sasaran. |
Warna bekerja sebagai pembeda, bukan sebagai mantra
Geser diagram ke samping
Cara menguji perubahan warna
Geser diagram ke samping
Tanya jawab
Apakah tombol merah menang pada setiap halaman? Tidak. Hasil uji warna berbeda antar halaman, karena latar, isi, dan pembacanya berbeda. Yang berulang adalah kemenangan kontras tinggi.
Berapa jumlah tombol yang wajar? Satu tindakan utama pada 1 halaman. Tindakan kedua boleh ada dengan gaya yang lebih ringan, misalnya tautan teks.
Apa yang lebih dulu diperbaiki? Perbaiki kata pada tombol dan posisinya lebih dulu. Kedua hal itu mengubah hasil lebih besar daripada warna.
// referensi
Sumber resmi
Kami memeriksa setiap klaim pada halaman ini terhadap dokumen di bawah pada 11 September 2026. Buka sumbernya sebelum Anda mengubah sistem yang berjalan.
// baca berikutnya
