Baiki Kontras Warna

12 minitPemulaKebolehcapaian

Kad acara ini cantik — tetapi susah dibaca. Teks kelabu pucat, pautan biru muda, teks putih atas kuning dan hijau pudina atas hijau pudina semuanya terlalu samar bagi ramai orang: sesiapa yang kurang penglihatan, mata yang semakin berusia, atau telefon di bawah cahaya matahari terik.

WCAG AA memerlukan nisbah kontras sekurang-kurangnya 4.5:1 untuk teks biasa. Nisbah ini membandingkan kecerahan (luminans relatif) teks dan latar belakangnya: 1:1 tidak kelihatan, 21:1 ialah hitam atas putih.

Keperluan

.details, .more, .btn dan .badge masing-masing mencapai ≥ 4.5:1.
Kekalkan reka bentuk yang mudah dikenali: anda boleh tukar warna teks, warna latar belakang atau kedua-duanya. Jangan sembunyikan apa-apa.
Penyemak mengira nisbah sebenar daripada warna yang dikira (termasuk ketelusan), jadi apa-apa format warna CSS yang sah boleh digunakan. Imej latar tidak digunakan di sini.

Tukar warna dalam style.css supaya teks butiran, pautan, butang dan lencana semuanya mencapai nisbah kontras sekurang-kurangnya 4.5:1 berbanding latar belakangnya (WCAG AA).

Semakan

Teks butiran ≥ 4.5:1
Pautan ≥ 4.5:1
Teks butang ≥ 4.5:1
Lencana ≥ 4.5:1

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.