Kontras Warna dan Teks yang Mudah Dibaca
Gunakan rona warna Tailwind untuk memenuhi nisbah kontras WCAG AA dan AAA, serta audit palet anda bagi gabungan teks dan latar belakang yang boleh diakses.
Kontras Warna dan Teks yang Mudah Dibaca ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Mengapa Kontras Warna Penting
Kontras warna ialah perbezaan visual antara teks latar depan dengan latarnya. Kontras yang rendah menyukarkan teks dibaca — khususnya bagi pengguna yang mempunyai penglihatan terhad, buta warna atau membaca di bawah cahaya matahari yang terang. WCAG (Garis Panduan Kebolehcapaian Kandungan Web) mentakrifkan nisbah kontras minimum yang perlu dipenuhi oleh semua kandungan web untuk dianggap boleh dicapai oleh pengguna yang mengalami masalah penglihatan. Memenuhi nisbah ini ialah kewajipan beretika dan selalunya juga keperluan undang-undang.
Penjelasan Nisbah Kontras WCAG
WCAG mentakrifkan dua kriteria kejayaan untuk kontras. AA (Tahap 2) memerlukan nisbah minimum 4.5:1 untuk teks biasa dan 3:1 untuk teks besar (18pt ke atas atau 14pt ke atas dalam huruf tebal). AAA (Tahap 3) memerlukan 7:1 untuk teks biasa dan 4.5:1 untuk teks besar. Nisbah kontras dikira berdasarkan luminans relatif dua warna — putih pada hitam ialah 21:1 (maksimum), manakala kelabu cerah pada putih boleh kurang daripada 1.5:1 (gagal).
/*
WCAG Contrast Ratio Requirements
Level AA (minimum standard):
- Normal text (< 18pt regular, < 14pt bold): 4.5:1
- Large text (≥ 18pt regular, ≥ 14pt bold): 3:1
- UI components (borders, icons): 3:1
Level AAA (enhanced standard):
- Normal text: 7:1
- Large text: 4.5:1
Common examples:
- black (#000) on white (#fff): 21:1 ✓ AAA
- gray-900 on white: ~18:1 ✓ AAA
- gray-600 on white: ~5.9:1 ✓ AA
- gray-400 on white: ~3.5:1 ✗ Fails AA
- white on blue-500: ~3.8:1 ✗ Fails AA for small text
*/Palet Warna Tailwind dan Kontras
Palet warna Tailwind direka bentuk dengan sistem rona daripada 50 hingga 950. Rona lebih gelap (700-900) pada latar putih dan rona lebih cerah (50-200) pada latar gelap biasanya memenuhi keperluan kontras AA untuk teks isi. Walau bagaimanapun, rona julat pertengahan (400-600) pada putih ialah perangkap kebolehcapaian yang biasa — rona ini sering kelihatan boleh diterima secara visual tetapi gagal mencapai nisbah 4.5:1 yang diperlukan untuk teks bersaiz biasa.
<!--
Safe combinations for AA compliance on white:
text-gray-700 → 6.9:1 ✓
text-gray-800 → 10.5:1 ✓
text-gray-900 → 18.1:1 ✓
text-blue-700 → 5.5:1 ✓
text-blue-800 → 8.0:1 ✓
Risky on white (check before using):
text-blue-500 → 3.0:1 ✗ fails for normal text
text-gray-500 → 4.1:1 ✗ barely fails
text-gray-400 → 3.5:1 ✗ fails
Safe for large text (3:1 minimum):
text-blue-500 → 3.0:1 borderline for large text
-->
<p class="text-gray-700">Safe body text (6.9:1)</p>
<p class="text-gray-500">Check this! (4.1:1, barely fails)</p>Menyemak Nisbah Kontras
Jangan sesekali bergantung pada penilaian visual semata-mata untuk nisbah kontras. Gunakan alat khusus: WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) untuk semakan pantas, DevTools pelayar yang memaparkan nisbah kontras dalam bahagian kebolehcapaian pemeriksa, serta axe DevTools atau Lighthouse untuk audit automatik yang mengimbas seluruh halaman. Matlamatnya adalah mengaudit setiap gabungan teks/latar, bukan hanya gabungan yang jelas bermasalah.
/*
Tools for checking contrast:
1. Chrome DevTools:
- Select element
- Go to Computed > Color
- Click the color swatch → contrast ratio shown
2. WebAIM Contrast Checker:
- webaim.org/resources/contrastchecker/
- Enter foreground + background hex
- Shows AA and AAA pass/fail
3. Axe DevTools browser extension:
- Runs automated contrast checks on entire page
- Lists all violations with exact ratios
4. Storybook a11y addon:
- checks every component story automatically
*/Membina Sistem Warna Selamat Kontras
Reka palet warna Tailwind anda supaya pasangan token semantik sentiasa memenuhi nisbah kontras minimum. Padankan warna tindakan utama anda (contohnya, biru-600 sebagai latar) dengan teks putih dan sahkan nisbahnya. Tentukan warna teks sekunder anda (contohnya, kelabu-600) terhadap permukaan asas anda (putih) dan sahkan nisbahnya. Dokumentasikan pasangan yang diluluskan ini dalam panduan gaya supaya pembangun tidak perlu meneka sama ada sesuatu gabungan itu selamat.
/*
Contrast-safe token pairs (verified AA+)
==========================================
On white (#fff) surface:
text-text-primary = gray-900 → 18.1:1
text-text-secondary = gray-700 → 6.9:1
text-text-muted = gray-600 → 4.6:1 ✓ (just passes)
bg-action-primary = blue-600 (white text: 5.1:1 ✓)
bg-action-danger = red-600 (white text: 4.8:1 ✓)
On gray-900 (#111827) surface:
text = white or gray-100 → very high contrast
text-muted = gray-300 → 7.2:1 ✓
Check each pair at: webaim.org/resources/contrastchecker/
*/Saiz Teks dan Kontras
Ambang kontras lebih rendah WCAG untuk teks besar (3:1 berbanding 4.5:1) mencerminkan hakikat bahawa teks yang lebih besar lebih mudah dibaca pada kontras yang lebih rendah. Gabungan warna yang gagal untuk teks isi 14px mungkin lulus untuk tajuk 18px atau label butang tebal 16px. Gunakan text-lg (18px), text-xl atau saiz yang lebih besar daripada Tailwind untuk keadaan apabila warna yang sedikit kurang kontras diperlukan atas sebab reka bentuk — tetapi sentiasa sahkan bahawa ia masih memenuhi nisbah 3:1.
<!-- blue-500 on white: 3.0:1 — borderline for large text -->
<!-- FAILS: small body text at blue-500 on white -->
<p class="text-blue-500 text-sm">This is hard to read (3.0:1 fails AA)</p>
<!-- PASSES: large heading at blue-500 on white -->
<h1 class="text-blue-500 text-3xl font-bold">
Heading (3.0:1 passes for large text)
</h1>
<!-- BETTER: blue-700 meets AA for all text sizes -->
<p class="text-blue-700 text-sm">Safe body text (5.5:1)</p>Kontras Bukan Teks
WCAG juga memerlukan nisbah kontras 3:1 untuk komponen UI bukan teks — ikon, sempadan medan input, garisan carta dan penunjuk fokus. Sempadan kelabu-300 pada medan input putih gagal memenuhi keperluan ini. Gunakan sekurang-kurangnya kelabu-400 untuk sempadan pada latar putih. Warna ikon yang semata-mata hiasan dikecualikan, tetapi ikon yang menyampaikan makna (seperti ikon amaran) mesti memenuhi ambang 3:1.
<!-- Input border contrast check -->
<!-- FAILS: border-gray-300 on white = ~2.5:1 (fails 3:1 for UI) -->
<input class="border border-gray-300 rounded px-3 py-2" />
<!-- PASSES: border-gray-400 on white = ~3.5:1 -->
<input class="border border-gray-400 rounded px-3 py-2" />
<!-- PASSES: icon in context -->
<button class="flex items-center gap-2">
<!-- Meaningful icon: must meet 3:1 contrast -->
<SearchIcon class="h-5 w-5 text-gray-700" />
Search
</button>Warna Pautan yang Boleh Dicapaikan
Pautan memerlukan keunikan berganda: pautan mesti mempunyai kontras yang mencukupi terhadap latar (4.5:1) DAN boleh dibezakan secara visual daripada teks sekeliling yang bukan pautan. Warna biru dan gaya garis bawah lalai pelayar menyediakan kedua-duanya. Jika anda membuang garis bawah (perkara biasa dalam navigasi), pautan masih mesti dapat dibezakan melalui warna sahaja — yang memerlukan perbezaan kontras yang lebih tinggi antara warna pautan dengan warna teks isi. Sentiasa kekalkan underline pada pautan teks isi sebaris.
<!-- Good: underline + adequate contrast -->
<p class="text-gray-800">
Learn more about
<a href='/docs' class="text-blue-700 underline hover:text-blue-900">
Tailwind CSS
</a>
in the official docs.
</p>
<!-- Acceptable in nav: no underline, but distinctly colored -->
<nav>
<a href='/about' class="text-blue-700 hover:text-blue-900 font-medium">
About
</a>
</nav>
<!-- Risky: remove underline from inline body text links -->
<!-- Visitors who are colorblind may not see link -->Warna sebagai Satu-satunya Pembeza
WCAG menghendaki supaya maklumat tidak pernah disampaikan melalui warna sahaja. Mesej ralat merah yang dikenal pasti hanya melalui warna merah gagal membantu pengguna yang buta warna. Gabungkan warna dengan label teks, ikon atau corak. Penunjuk status lampu isyarat hijau/merah memerlukan ikon atau label teks. Tailwind memudahkan anda menambah petunjuk tambahan — gunakan ikon, label ARIA, sempadan atau teks bersama warna untuk menyampaikan makna.
<!-- BAD: color is the only difference -->
<div class="bg-red-100">Something went wrong.</div>
<div class="bg-green-100">Success!</div>
<!-- GOOD: color + icon + label -->
<div class="bg-red-50 border border-red-200 flex items-center gap-2 p-3 rounded-lg">
<ExclamationTriangleIcon class="h-5 w-5 text-red-600 flex-shrink-0" />
<span class="text-red-800 text-sm font-medium">Error: Something went wrong.</span>
</div>
<div class="bg-green-50 border border-green-200 flex items-center gap-2 p-3 rounded-lg">
<CheckCircleIcon class="h-5 w-5 text-green-600 flex-shrink-0" />
<span class="text-green-800 text-sm font-medium">Success! Changes saved.</span>
</div>Mod Gelap dan Kontras
Mod gelap memperkenalkan set cabaran kontras yang baharu. Latar gelap memerlukan teks yang lebih cerah, dan rona yang sama yang berfungsi pada putih tidak semestinya berfungsi pada permukaan gelap. Bina set warna teks selari yang telah disahkan kontrasnya untuk mod gelap. Dalam Tailwind, sahkan bahawa kelas dark:text-* anda memenuhi ambang WCAG yang sama seperti teks mod cerah — jangan anggap bahawa rona lebih cerah pada latar gelap secara automatik boleh dicapai.
<!-- Verify dark mode contrast too -->
<div class="bg-white dark:bg-gray-900">
<!-- Light mode: gray-800 on white = 12.6:1 ✓ -->
<!-- Dark mode: gray-200 on gray-900 = 11.4:1 ✓ -->
<h2 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">
Heading
</h2>
<!-- Light mode: gray-600 on white = 4.6:1 ✓ -->
<!-- Dark mode: gray-400 on gray-900 = 5.9:1 ✓ -->
<p class="text-gray-600 dark:text-gray-400 text-sm">
Secondary text
</p>
</div>Pengauditan Kontras Automatik
Integrasikan semakan kontras ke dalam aliran kerja pembangunan anda dengan alat automatik. axe-core sebagai plugin Jest atau Vitest boleh menggagalkan set ujian anda apabila terdapat pelanggaran kontras. Addon a11y Storybook menjalankan axe pada setiap cerita komponen. Playwright dengan axe-playwright boleh menjalankan audit kontras pada halaman penuh dalam CI. Mengesan kegagalan kontras secara automatik sebelum semakan menghalang regresi daripada sampai ke pengeluaran.
// playwright accessibility audit in CI
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
test('homepage has no contrast violations', async ({ page }) => {
await page.goto('http://localhost:3000');
const accessibilityScanResults = await new AxeBuilder({ page })
.withRules(['color-contrast']) // focus on contrast only
.analyze();
expect(accessibilityScanResults.violations).toEqual([]);
});
// Run in CI:
// npx playwright test accessibility.spec.tsSemakan Pantas
Uji pemahaman anda tentang konsep Tailwind CSS Mastery daripada pelajaran ini.
Imbas Kembali Pelajaran
Dalam pelajaran ini, anda telah mempelajari bahawa WCAG AA memerlukan kontras 4.5:1 untuk teks biasa serta 3:1 untuk teks besar dan komponen UI, rona julat pertengahan Tailwind (400-500) sering gagal mencapai AA pada latar putih, dan warna sahaja tidak boleh menyampaikan makna — sentiasa gabungkan warna dengan ikon atau label. Seterusnya, kita akan meneroka penunjuk fokus dan kebolehcapaian navigasi papan kekunci.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Kontras Warna dan Teks yang Mudah Dibaca” percuma?
Ya — teks penuh “Kontras Warna dan Teks yang Mudah Dibaca” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Kontras Warna dan Teks yang Mudah Dibaca”?
Gunakan rona warna Tailwind untuk memenuhi nisbah kontras WCAG AA dan AAA, serta audit palet anda bagi gabungan teks dan latar belakang yang boleh diakses. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Kontras Warna dan Teks yang Mudah Dibaca” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Kontras Warna dan Teks yang Mudah Dibaca
- Penunjuk Fokus dan Navigasi Papan Kekunci
- Atribut ARIA dan Pembaca Skrin
- Komponen Borang yang Boleh Diakses