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

เครื่องมือทั้งหมด
ตรวจสอบความคมชัดของสี
ตรวจสอบอัตราส่วนความคมชัด WCAG ระหว่างสีข้อความและพื้นหลัง — ดูเกรด AA/AAA สำหรับข้อความปกติ ข้อความขนาดใหญ่ และองค์ประกอบ UI พร้อมตัวอย่างสดและคำแนะนำสีที่เข้าถึงได้
สีข้อความ
เฉดสี
สีพื้นหลัง
เฉดสี
อัตราส่วนความคมชัด
--:1
ข้อความปกติ
ข้อความเนื้อหาต่ำกว่า 18px (หรือต่ำกว่า 14px ตัวหนา)
AA AAA
ข้อความขนาดใหญ่
18px+ ธรรมดา หรือ 14px+ ตัวหนา
AA AAA
องค์ประกอบ UI
ไอคอน เส้นขอบ การควบคุมฟอร์ม และกราฟิก
AA AAA
ตัวอย่างสด

The quick brown fox

ข้อความขนาดใหญ่อ่านได้สบายเมื่อความคมชัดเพียงพอ

นี่คือย่อหน้าตัวอย่างของข้อความเนื้อหาปกติ ความคมชัดของสีที่ดีทำให้เนื้อหาอ่านได้สำหรับทุกคน รวมถึงผู้ที่มีสายตาอ่อนแอหรือตาบอดสี ลิงก์ตัวอย่าง.

ตัวพิมพ์เล็กและคำบรรยายอ่านยากที่สุด — ต้องการความคมชัดมากที่สุด
ปุ่มตัวอย่าง ปุ่มตัวอย่าง
คำแนะนำ

ทุกอย่างคำนวณสดในเบราว์เซอร์โดยใช้สูตร WCAG 2.x relative-luminance — ไม่มีการอัปโหลด ไม่ต้องสมัคร ฟรีทั้งหมด

แชร์สิ่งนี้
เครื่องมือที่เกี่ยวข้อง
จำลองตาบอดสี

ดูรูปภาพหรือพาเลตในมุมมองของผู้ที่มี protanopia, deuteranopia, tritanopia หรือ achromatopsia — ทำงานทั้งหมดในเบราว์เซอร์ ไม่มีการอัปโหลด
ตัวแปลงรหัสสี

แปลงสีระหว่าง HEX, RGB, RGBA, HSL, HSLA และ HSV — เลือกสี ปรับค่าความโปร่งใส และคัดลอกรูปแบบใดก็ได้ทันที
ส่งออกพาเลต

วางหรือนำเข้าชุดสีและส่งออกทันทีเป็น CSS variables, SCSS, Tailwind config, JSON หรือ SVG swatches — ขั้นตอนสุดท้ายสำหรับทุกพาเลต
การค้นหายอดนิยม
ตรวจสอบคอนทราสต์สี อัตราคอนทราสต์ wcag ตรวจสอบคอนทราสต์การเข้าถึง ตรวจสอบคอนทราสต์ข้อความ ทดสอบคอนทราสต์ aa aaa ตรวจสอบคอนทราสต์สีออนไลน์

เพิ่มเครื่องมือฟรีนี้ลงในเว็บไซต์ของคุณเอง — คัดลอกและวางโค้ดด้านล่าง