appstoryoAppStoryolapnito.cz s.r.o.blog/check-text-contrast-picked-color-ui/idCara Memeriksa Kontras Teks dari Warna yang Dipilih Sebelum Digunakan di UILubor Šimůnek29082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0

Pelajari cara memeriksa rasio kontras WCAG dan menyesuaikan warna di HSL agar UI Anda selalu aksesibel dan mudah dibaca.

DesainarticleAppStoryoMengapa Kontras Penting

Sekitar 300 juta orang di seluruh dunia memiliki beberapa bentuk kelainan penglihatan warna. Merancang dengan kontras yang baik bukan hanya soal estetika — di banyak wilayah, ini adalah persyaratan hukum. Standar acuannya adalah WCAG 2.1, yang menetapkan dua level utama:

Level AA: rasio kontras 4,5:1 untuk teks normal dan 3:1 untuk teks besar (18px atau 14px tebal).

Level AAA: 7:1 untuk teks normal.

Kesalahan Umum

Yang paling sering terjadi: abu-abu terang di atas putih (bisa serendah 1,5:1), tombol berwarna dengan teks putih yang terlihat terbaca namun gagal AA, dan warna yang lolos di mode terang tapi gagal di mode gelap.

Alur Kerja Praktis

Ambil warna latar belakang. Buka Color Picker Camera: HEX RGB, arahkan kamera ke permukaan dan ketuk untuk langsung mendapat nilai HEX. Aplikasi juga menampilkan HSL.

Ambil warna teks dengan cara yang sama.

Periksa pasangan di alat pemeriksa kontras — seperti WebAIM Contrast Checker, panel Accessibility di DevTools, atau plugin Contrast di Figma.

Sesuaikan kecerahan di HSL hingga lolos ambang batas. Pertahankan H dan S, turunkan L untuk menggelapkan warna tanpa mengubah identitas visualnya.

Mengapa HSL Ideal untuk Penyesuaian Kontras

RGB dan HEX tidak memberikan kontrol intuitif atas kecerahan. HSL memisahkan rona, saturasi, dan kecerahan. Color Picker Camera: HEX RGB menampilkan HEX, RGB, HSL, dan CMYK secara bersamaan — tanpa konversi manual.

Contoh Nyata

Tombol biru sedang (#4A90E2) dengan teks putih memiliki kontras sekitar 3,1:1 — tidak lolos AA. Beralih ke biru navy gelap (#1A3A6B) dan kontrasnya naik ke 9,4:1, bahkan melampaui AAA.

Catatan tentang WCAG 3.0 dan APCA

Generasi pedoman berikutnya memperkenalkan APCA, model kontras perseptual yang lebih halus. WCAG 2.1 AA tetap menjadi standar yang berlaku saat ini, namun pengujian terhadap APCA layak dipertimbangkan untuk proyek jangka panjang.

Unduh Color Picker Camera: HEX RGB gratis untuk iOS atau Android — tanpa iklan, tanpa pelacakan, dan berfungsi sepenuhnya offline.