ตัวตรวจสอบความคมชัดของสี

ตรวจสอบความคมชัดของพื้นหน้า/พื้นหลังกับ WCAG AA และ AAA ดูการอัปเดตอัตราส่วนเมื่อคุณเลือกสี

Color Contrast Checker

Live

Foreground (text)

Background

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 */

Text / on-page input

ตัวสร้างสีและ CSS ทำงานทั้งหมดในเบราว์เซอร์ของคุณ การดูตัวอย่างและการแปลงไม่เคยอัปโหลดสไตล์ของคุณ

ใช้ตัวตรวจสอบคอนทราสต์สีทุกครั้งที่คุณต้องการ: ตรวจสอบคอนทราสต์ส่วนหน้า/พื้นหลังตามแนวทาง WCAG AA และ AAA

ตรวจสอบ CSS ที่แข่งขันกันบนเพจของคุณ (รีเซ็ต, สีที่สืบทอดมา) คัดลอกกฎที่สร้างขึ้นลงในสไตล์ชีตแบบแยกก่อน

ไม่ ตัวสร้างและตัวแปลงทำงานในเบราว์เซอร์ของคุณพร้อมการแสดงตัวอย่างแบบสด

ไม่ เปิดเครื่องมือ ปรับแต่งการควบคุม และคัดลอก CSS

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

Craft readable text-shadow styles with live typography preview.

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