แปลงโค้ดสี — HEX·RGB·HSL·CMYK, ตรวจสอบความคมชัดของสี

ใช้แปลงสีจากดีไซน์ต้นแบบเป็นโค้ด CSS หรือตรวจสอบว่าข้อความบนปุ่มอ่านง่ายตามเกณฑ์การเข้าถึงหรือไม่

ไฟล์จะไม่ถูกส่งไปเซิร์ฟเวอร์ — ประมวลผลภายในเบราว์เซอร์ของอุปกรณ์นี้เท่านั้น

โค้ดสี เลือกสี

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

เป็นค่าความคมชัดกับพื้นหลังเมื่อใช้สีนี้เป็นสีตัวอักษร ข้อความทั่วไป AA 4.5:1, AAA 7:1 / ตัวอักษรขนาดใหญ่ (24px หรือตัวหนา 18.7px ขึ้นไป) AA 3:1, AAA 4.5:1

สีพื้นหลังที่จะเปรียบเทียบ

กขค Aa 123

พื้นหลังสีขาว6.29:1

✓ AA ข้อความทั่วไป ✗ AAA ข้อความทั่วไป ✓ AA ตัวอักษรขนาดใหญ่ ✓ AAA ตัวอักษรขนาดใหญ่

กขค Aa 123

พื้นหลังสีดำ3.34:1

✗ AA ข้อความทั่วไป ✗ AAA ข้อความทั่วไป ✓ AA ตัวอักษรขนาดใหญ่ ✗ AAA ตัวอักษรขนาดใหญ่

กขค Aa 123

สีที่เลือกเอง #FFFFFF6.29:1

ระดับความสว่าง·ความมืด

กดที่ช่องเพื่อคัดลอกโค้ด HEX

โฆษณา

วิธีใช้ แปลงสี

1ป้อนโค้ดสีหรือเลือกจากตัวเลือกสี (ใช้ได้ทั้ง #4f46e5, rgb(), hsl())
2แสดงโค้ดทุกรูปแบบ กดเพื่อคัดลอก
3ตรวจสอบค่าความคมชัดกับสีขาว·สีดำ·สีที่เลือกเอง การผ่านเกณฑ์ WCAG และระดับความสว่าง·ความมืด

คำถามที่พบบ่อย

ค่าความคมชัด (Contrast) ต้องสูงกว่าเท่าไรจึงจะผ่าน

WCAG AA กำหนดข้อความทั่วไปที่ 4.5:1 ตัวอักษรขนาดใหญ่ที่ 3:1 ขึ้นไป ส่วน AAA กำหนดที่ 7:1 และ 4.5:1 ขึ้นไปตามลำดับ

ค่า CMYK ไม่ตรงกับโรงพิมพ์

ค่า CMYK ที่นี่เป็นเพียงการแปลงทางคณิตศาสตร์แบบง่าย การพิมพ์จริงขึ้นอยู่กับโปรไฟล์กระดาษ·หมึก กรุณายึดตามมาตรฐานของโรงพิมพ์

โฆษณา