Daily Toolkits

Pemeriksa Kontras Warna

Periksa kontras latar depan/latar belakang terhadap WCAG AA dan AAA. Lihat pembaruan rasio saat Anda memilih warna.

Color Contrast Checker

Live

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

  • Periksa kontras latar depan/latar belakang berdasarkan pedoman WCAG AA dan AAA.
  • Berjalan di browser Anda
  • Gratis untuk digunakan

Cara penggunaan

  1. Pilih teks (latar depan) dan warna latar belakang.
  2. Baca rasio kontras dan hasil AA/AAA.
  3. Sesuaikan hingga Anda melewati level target Anda.

How this tool works

  1. Pilih teks (latar depan) dan warna latar belakang.
  2. Baca rasio kontras dan hasil AA/AAA.
  3. Sesuaikan hingga Anda melewati level target Anda.

Recommended settings

  • Gunakan opsi default terlebih dahulu, lalu sesuaikan jika perlu

Supported formats

Text / on-page input

File size and limits

  • Pratinjau multi-lapis yang sangat rumit mungkin terasa lebih lambat di ponsel lama.

Privacy

Generator warna & CSS berjalan sepenuhnya di browser Anda. Pratinjau dan konversi tidak pernah mengunggah gaya Anda.

Common use cases

  • Gunakan Pemeriksa Kontras Warna kapan pun Anda membutuhkannya: Periksa kontras latar depan/latar belakang berdasarkan pedoman WCAG AA dan AAA.

Troubleshooting

Pratinjau terlihat berbeda setelah ditempel

Periksa CSS yang bersaing di halaman Anda (reset, warna yang diwarisi). Salin aturan yang dihasilkan ke dalam stylesheet terisolasi terlebih dahulu.

FAQ

Apakah ini mengunggah CSS saya?

Tidak. Generator dan konverter dijalankan di browser Anda dengan pratinjau langsung.

Apakah saya memerlukan akun?

Tidak. Buka alatnya, atur kontrolnya, dan salin CSSnya.

Alat terkait

HEX ↔ RGB ↔ HSL Converter

Convert colors between HEX, RGB, and HSL instantly with a live swatch.

Open tool

Text Shadow Generator

Craft readable text-shadow styles with live typography preview.

Open tool

CSS Gradient Generator

Build linear, radial, and conic gradients with live preview and copy-ready CSS.

Open tool