Penyemak Kontras Warna

Semak kontras latar depan/latar belakang terhadap WCAG AA dan AAA. Lihat kemas kini nisbah semasa anda memilih warna.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Semak kontras latar depan/latar belakang terhadap garis panduan WCAG AA dan AAA.
Berjalan dalam penyemak imbas anda
Percuma untuk digunakan

Cara menggunakan

Pilih teks (latar depan) dan warna latar belakang.
Baca nisbah kontras dan keputusan AA/AAA.
Laraskan sehingga anda melepasi tahap sasaran anda.

How this tool works

Pilih teks (latar depan) dan warna latar belakang.
Baca nisbah kontras dan keputusan AA/AAA.
Laraskan sehingga anda melepasi tahap sasaran anda.

Recommended settings

Gunakan pilihan lalai dahulu, kemudian laraskan jika perlu

Supported formats

Text / on-page input

File size and limits

Pratonton berbilang lapisan yang sangat kompleks mungkin terasa lebih perlahan pada telefon lama.

Privacy

Penjana warna & CSS dijalankan sepenuhnya dalam penyemak imbas anda. Pratonton dan penukaran tidak sekali-kali memuat naik gaya anda.

Common use cases

Gunakan Pemeriksa Kontras Warna bila-bila masa anda perlukan: Semak kontras latar depan/latar belakang terhadap garis panduan WCAG AA dan AAA.

Troubleshooting

Pratonton kelihatan berbeza selepas tampal

Semak CSS yang bersaing pada halaman anda (set semula, warna yang diwarisi). Salin peraturan yang dijana ke dalam helaian gaya terpencil dahulu.

Soalan Lazim

Adakah ini memuat naik CSS saya?

Tidak. Penjana dan penukar berjalan dalam penyemak imbas anda dengan pratonton langsung.

Adakah saya memerlukan akaun?

Tidak. Buka alat, tweak kawalan dan salin CSS.