ToolPronto

Periksa kontras dan palet warna

Ukur kontras, cari alternatif yang lolos, dan salin warna CSS.

Nilai warna dihitung secara lokal.

Favorit hanya disimpan di browser ini.

Periksa warna

Pemeriksa kontras teks

Uji pasangan warna teks dan latar dengan ambang WCAG 2.x.

Warna teksWarna latar

Keterbacaan warna perlu dilihat dalam konteks nyata.Keterbacaan warna perlu dilihat dalam konteks nyata.

Rasio kontras: 16.68:1
Teks normal AA: ✓ Lulus
Teks besar AA: ✓ Lulus

Format warna

#17201Brgb(23 32 27)hsl(147 16% 11%)

Periksa warna

Palet lima warna

Buat, kunci, audit, simulasikan, dan ekspor palet lima warna yang dapat digunakan kembali.

Pratinjau palet

Pratinjau konsisten ini hanya perkiraan, bukan diagnosis atau uji kepatuhan. Warna yang diekspor tidak berubah.

Audit kontras palet asli

Setiap baris memakai warna pertama sebagai teks dan warna kedua sebagai latar.

Warna 1 di atas warna 2#096447 / #E2F3EC
6.24:1Teks normal AA: LulusTeks normal AAA: Tidak lulusTeks besar AA: LulusTeks besar AAA: Lulus
Warna 1 di atas warna 3#096447 / #17201B
2.32:1Teks normal AA: Tidak lulusTeks normal AAA: Tidak lulusTeks besar AA: Tidak lulusTeks besar AAA: Tidak lulus
Warna 1 di atas warna 4#096447 / #F4F6F3
6.61:1Teks normal AA: LulusTeks normal AAA: Tidak lulusTeks besar AA: LulusTeks besar AAA: Lulus
Warna 1 di atas warna 5#096447 / #6D46D9
1.21:1Teks normal AA: Tidak lulusTeks normal AAA: Tidak lulusTeks besar AA: Tidak lulusTeks besar AAA: Tidak lulus
Warna 2 di atas warna 1#E2F3EC / #096447
6.24:1Teks normal AA: LulusTeks normal AAA: Tidak lulusTeks besar AA: LulusTeks besar AAA: Lulus
Warna 2 di atas warna 3#E2F3EC / #17201B
14.51:1Teks normal AA: LulusTeks normal AAA: LulusTeks besar AA: LulusTeks besar AAA: Lulus
Warna 2 di atas warna 4#E2F3EC / #F4F6F3
1.06:1Teks normal AA: Tidak lulusTeks normal AAA: Tidak lulusTeks besar AA: Tidak lulusTeks besar AAA: Tidak lulus
Warna 2 di atas warna 5#E2F3EC / #6D46D9
5.18:1Teks normal AA: LulusTeks normal AAA: Tidak lulusTeks besar AA: LulusTeks besar AAA: Lulus
Warna 3 di atas warna 1#17201B / #096447
2.32:1Teks normal AA: Tidak lulusTeks normal AAA: Tidak lulusTeks besar AA: Tidak lulusTeks besar AAA: Tidak lulus
Warna 3 di atas warna 2#17201B / #E2F3EC
14.51:1Teks normal AA: LulusTeks normal AAA: LulusTeks besar AA: LulusTeks besar AAA: Lulus
Warna 3 di atas warna 4#17201B / #F4F6F3
15.35:1Teks normal AA: LulusTeks normal AAA: LulusTeks besar AA: LulusTeks besar AAA: Lulus
Warna 3 di atas warna 5#17201B / #6D46D9
2.80:1Teks normal AA: Tidak lulusTeks normal AAA: Tidak lulusTeks besar AA: Tidak lulusTeks besar AAA: Tidak lulus
Warna 4 di atas warna 1#F4F6F3 / #096447
6.61:1Teks normal AA: LulusTeks normal AAA: Tidak lulusTeks besar AA: LulusTeks besar AAA: Lulus
Warna 4 di atas warna 2#F4F6F3 / #E2F3EC
1.06:1Teks normal AA: Tidak lulusTeks normal AAA: Tidak lulusTeks besar AA: Tidak lulusTeks besar AAA: Tidak lulus
Warna 4 di atas warna 3#F4F6F3 / #17201B
15.35:1Teks normal AA: LulusTeks normal AAA: LulusTeks besar AA: LulusTeks besar AAA: Lulus
Warna 4 di atas warna 5#F4F6F3 / #6D46D9
5.48:1Teks normal AA: LulusTeks normal AAA: Tidak lulusTeks besar AA: LulusTeks besar AAA: Lulus
Warna 5 di atas warna 1#6D46D9 / #096447
1.21:1Teks normal AA: Tidak lulusTeks normal AAA: Tidak lulusTeks besar AA: Tidak lulusTeks besar AAA: Tidak lulus
Warna 5 di atas warna 2#6D46D9 / #E2F3EC
5.18:1Teks normal AA: LulusTeks normal AAA: Tidak lulusTeks besar AA: LulusTeks besar AAA: Lulus
Warna 5 di atas warna 3#6D46D9 / #17201B
2.80:1Teks normal AA: Tidak lulusTeks normal AAA: Tidak lulusTeks besar AA: Tidak lulusTeks besar AAA: Tidak lulus
Warna 5 di atas warna 4#6D46D9 / #F4F6F3
5.48:1Teks normal AA: LulusTeks normal AAA: Tidak lulusTeks besar AA: LulusTeks besar AAA: Lulus

Fungsi Pemeriksa kontras warna

Menghitung rasio kontras WCAG dan membantu menemukan warna palet yang sulit dibedakan. Ukur kontras, cari alternatif yang lolos, dan salin warna CSS.

Penggunaan umum

Menguji teks pada latar.
Mencari warna alternatif.
Menilai palet warna.

Cara menggunakan

Pilih warna teks dan latar.
Periksa rasio dan hasil WCAG.
Sesuaikan warna atau salin nilai yang lolos.