Mengecek apakah warna brand di atas card putih memenuhi standar accessibility. Memilih warna teks tombol yang lolos AA di atas background berwarna brand. Mengaudit design system token demi token — sebelum submit. Menjustifikasi permintaan ganti warna ke stakeholder dengan pernyataan pass/fail yang konkret. Menguji apa yang sebenarnya dilihat user dengan preferensi reduced contrast.

Teks normal (di bawah 18pt / 14pt bold): 4.5:1 untuk AA, 7:1 untuk AAA. Teks besar (≥18pt atau ≥14pt bold): 3:1 untuk AA, 4.5:1 untuk AAA. Komponen UI & grafis (ikon, focus ring, border form, elemen grafis pembawa informasi): 3:1 untuk AA (WCAG 2.1 §1.4.11). Tidak ada tier AAA.

"Teks besar" lebih besar dari yang kamu kira. 18pt kira-kira 24px. 14pt bold kira-kira 19px bold. Body copy di 16px bukan teks besar — perlu threshold 4.5:1. Teks terang di atas foto padat akan gagal. Contrast ratio ada di antara piksel spesifik — taruh gradient gelap atau panel solid di belakang teks untuk memberinya background terkontrol. Anti-aliasing melembutkan kontras. 4.5:1 itu lantai, bukan target. Bacaan yang nyaman sering minta 7:1 atau lebih, terutama untuk body copy. State hover dan focus dihitung. Jika tombolmu lolos AA saat rest tapi gagal saat hover, itu bug accessibility nyata. WCAG 2.1 vs APCA. APCA (Accessible Perceptual Contrast Algorithm) baru yang diusulkan untuk WCAG 3 memberi angka berbeda dan bisa dibilang lebih baik — tapi WCAG 2.1 adalah standar legal yang masih dirujuk sebagian besar yurisdiksi. Padding dengan transparansi. Foreground dengan 50% alpha di atas background yang diketahui punya contrast efektif berbeda — hitung terhadap warna render yang sebenarnya, bukan aslinya.

Pemeriksa Kontras WCAG

Cek rasio kontras antara dua warna. Penilaian lulus/gagal di WCAG AA dan AAA untuk setiap ukuran teks.

Foreground

Background

Hasil

Aa — Large text 24px / 18px bold

Aa — Normal text 16px

Aa — Small text 12px

Dibuat oleh JXXR1 · ♥ Jadi sponsor · ☕ Belikan saya kopi

Untuk apa ini?

WCAG (Web Content Accessibility Guidelines) mendefinisikan contrast ratio minimum antara teks dan background-nya, agar orang dengan low vision, color blindness, atau dalam kondisi silau tetap bisa membaca. Tool ini menghitung rasio itu (1:1 = sama, 21:1 = hitam pekat di atas putih pekat) dan memberi tahu kamu apakah pasangan warna lolos WCAG 2.1 Level AA atau AAA, secara terpisah untuk teks normal, teks besar, dan komponen UI. Matematikanya mengikuti formula luminance W3C secara persis.

Kapan digunakan

Mengecek apakah warna brand di atas card putih memenuhi standar accessibility.
Memilih warna teks tombol yang lolos AA di atas background berwarna brand.
Mengaudit design system token demi token — sebelum submit.
Menjustifikasi permintaan ganti warna ke stakeholder dengan pernyataan pass/fail yang konkret.
Menguji apa yang sebenarnya dilihat user dengan preferensi reduced contrast.

Threshold

Teks normal (di bawah 18pt / 14pt bold): 4.5:1 untuk AA, 7:1 untuk AAA.
Teks besar (≥18pt atau ≥14pt bold): 3:1 untuk AA, 4.5:1 untuk AAA.
Komponen UI & grafis (ikon, focus ring, border form, elemen grafis pembawa informasi): 3:1 untuk AA (WCAG 2.1 §1.4.11). Tidak ada tier AAA.

Kesalahan umum

"Teks besar" lebih besar dari yang kamu kira. 18pt kira-kira 24px. 14pt bold kira-kira 19px bold. Body copy di 16px bukan teks besar — perlu threshold 4.5:1.
Teks terang di atas foto padat akan gagal. Contrast ratio ada di antara piksel spesifik — taruh gradient gelap atau panel solid di belakang teks untuk memberinya background terkontrol.
Anti-aliasing melembutkan kontras. 4.5:1 itu lantai, bukan target. Bacaan yang nyaman sering minta 7:1 atau lebih, terutama untuk body copy.
State hover dan focus dihitung. Jika tombolmu lolos AA saat rest tapi gagal saat hover, itu bug accessibility nyata.
WCAG 2.1 vs APCA. APCA (Accessible Perceptual Contrast Algorithm) baru yang diusulkan untuk WCAG 3 memberi angka berbeda dan bisa dibilang lebih baik — tapi WCAG 2.1 adalah standar legal yang masih dirujuk sebagian besar yurisdiksi.
Padding dengan transparansi. Foreground dengan 50% alpha di atas background yang diketahui punya contrast efektif berbeda — hitung terhadap warna render yang sebenarnya, bukan aslinya.