Pemeriksa Kontras Warna

Periksa kepatuhan WCAG 2.1 untuk aksesibilitas

{{ __t('small_text') }}: The quick brown fox jumps over the lazy dog.

{{ __t('large_text') }}: The quick brown fox.

{{ ratio }}:1

{{ __t('contrast_ratio') }}

{{ passAAsmall ? '✓' : '✗' }}
AA Small (4.5:1)
{{ passAAlarge ? '✓' : '✗' }}
AA Large (3:1)
{{ passAAAsmall ? '✓' : '✗' }}
AAA Small (7:1)
{{ passAAAlarge ? '✓' : '✗' }}
AAA Large (4.5:1)

Mengapa memeriksa kontras warna?

Sekitar 8% pria dan 0,5% wanita memiliki bentuk gangguan penglihatan warna. Kontras rendah membuat teks sulit dibaca — terutama pada ukuran kecil, layar buruk, dan pengguna dengan gangguan penglihatan. WCAG menetapkan nilai minimum yang diwajibkan hukum di banyak negara (UE EN 301 549, AS ADA).

Ambang WCAG 2.1

Level AA membutuhkan 4,5:1 untuk teks normal (di bawah 24 px atau 18,66 px tebal) dan 3:1 untuk teks besar. Level AAA membutuhkan 7:1 untuk teks normal dan 4,5:1 untuk teks besar. Komponen UI dan grafis minimal 3:1. Nilai-nilai ini didasarkan pada luminositas relatif rumus WCAG.