./prontouso.com

UTILITAS DESAIN

Pemeriksa Kontras Warna

Periksa apakah kombinasi warna teks dan latar belakang memenuhi panduan aksesibilitas WCAG 2.1 (AA dan AAA) untuk teks normal, teks besar, dan elemen UI.

Status alatBerjalan di browser Anda
Pratinjau

Opsi

Normal text looks like this.

Large text

\"Large text\" means 18pt (24px) or larger, or 14pt (18.7px) and bold.

Hasil

Meets AA for text
Contrast ratio
17.08:1
KategoriAAAAA
Large textPassPass
Small textPassPass
Graphics and UIPassN/A

Cara kerja

  1. Masukkan data Anda

    Isi nilai yang diperlukan, tempel teks Anda, atau unggah file yang ingin diproses.

  2. Lihat hasil seketika

    Sebagian besar alat diperbarui secara langsung saat Anda mengetik; beberapa menggunakan satu tombol tindakan.

  3. Gunakan hasil Anda

    Salin, unduh, atau bagikan hasil yang dihasilkan — Anda selalu memiliki kendali penuh atas data Anda.

Privasi dan pemrosesan data — Berjalan secara lokal di browser Anda. Alat ini tidak mengunggah data Anda.

Apa itu Pemeriksa Kontras Warna?

Check the WCAG contrast ratio between a text color and a background color, and see whether it passes AA and AAA at both normal and large text sizes.

PAHAMI CARA KERJA ALAT

How to check color contrast

What the ratio means

The contrast ratio ranges from 1:1 (identical colors) to 21:1 (black on white), calculated from each color's relative luminance using the formula defined in the WCAG 2.x specification.

AA and AAA thresholds

  • AA, normal text: at least 4.5:1.
  • AA, large text: at least 3:1.
  • AAA, normal text: at least 7:1.
  • AAA, large text: at least 4.5:1.
  • Large text means 18pt (24px) regular weight, or 14pt (about 18.7px) bold, per the WCAG definition.

Reading the preview

The sample box shows both text sizes rendered with your two colors, which is a faster way to judge readability than the ratio number alone.

How to use it

  • Pick or type a foreground (text) color and a background color.
  • Read the contrast ratio and the four pass/fail results.
  • Use the swap button to check the pair in the other direction.

Contrast notes

The ratio uses WCAG 2.x relative luminance math for sRGB colors. Transparency should be tested against the final composited background color.

Pertanyaan yang Sering Diajukan (FAQ)

Which level should I aim for?

AA is the widely required baseline for web accessibility, including under most legal accessibility requirements. AAA is stricter and recommended where you can achieve it, especially for body text.

Does this check anything besides contrast?

No. Color contrast is one part of text accessibility; font size, weight, and spacing also affect readability but are not evaluated here.

Why are there separate thresholds for large text?

WCAG allows a lower ratio for large text because bigger, bolder strokes stay legible at lower contrast than small body text does.

Does alpha or transparency affect the ratio?

The WCAG contrast calculation is based on the final visible colors. If your UI uses transparency, first sample or calculate the composited color over its real background, then test that pair.

Alat Terkait