เลือกสีและตรวจคอนทราสต์

วิธีใช้เลือกสีและตรวจคอนทราสต์

คำนวณอะไรและใช้เมื่อไร

เลือกและแปลงสีระหว่าง HEX, RGB, HSL, HSV และ CMYK แนะนำเฉดอ่อน เฉดเข้ม และสีที่เข้ากัน และตรวจคอนทราสต์ของข้อความตามแนวทางการเข้าถึง WCAG

วิธีใช้ทีละขั้นตอน

1. เลือกสีด้วยตัวเลือกสีหรือพิมพ์เป็น HEX, RGB, HSL หรือชื่อสี
2. เลือกสีพื้นหลังเพื่อตรวจคอนทราสต์
3. คัดลอกรูปแบบใดก็ได้ในคลิกเดียว
4. ใช้เฉดอ่อน เฉดเข้ม และสีที่เข้ากันเป็นชุดสี

ความหมายของแต่ละช่อง

• สี – เริ่มต้นที่ #2443C8 สีน้ำเงินของ SmartCalcy
• พื้นหลัง – เริ่มต้นที่สีขาว

วิธีอ่านผลลัพธ์

• อัตราส่วนคอนทราสต์ – ตั้งแต่ 1:1 ถึง 21:1 พร้อมผล AA และ AAA สำหรับข้อความปกติและข้อความขนาดใหญ่
• รูปแบบ – HEX, RGB, HSL, HSV และ CMYK
• เฉดอ่อนและเฉดเข้ม – เวอร์ชันที่อ่อนกว่าและเข้มกว่า
• สีที่เข้ากัน – สีคู่ตรงข้าม สีข้างเคียง และสีสามเส้า

สูตร

อัตราส่วนคอนทราสต์ = (L1 + 0.05) ÷ (L2 + 0.05) โดย L1 และ L2 คือความสว่างสัมพัทธ์ของสีที่อ่อนกว่าและเข้มกว่า WCAG AA ต้องการ 4.5:1 สำหรับข้อความปกติและ 3:1 สำหรับข้อความขนาดใหญ่ AAA ต้องการ 7:1 และ 4.5:1

ตัวอย่างการคำนวณ

ด้วยสีเริ่มต้น #2443C8 บนพื้นขาวมีอัตราส่วนคอนทราสต์ 7.74:1 ซึ่งผ่าน AAA สำหรับข้อความทุกขนาด

สมมติฐานและข้อจำกัด

• ค่า CMYK เป็นการแปลงแบบง่าย ไม่ใช่โปรไฟล์การพิมพ์ที่มีการจัดการสี
• ผลคอนทราสต์เป็นไปตามสูตร WCAG 2

ข้อผิดพลาดที่พบบ่อย

• ตรวจคอนทราสต์เฉพาะข้อความขนาดใหญ่แล้วนำสีไปใช้กับข้อความขนาดเล็ก
• ใช้สีอย่างเดียวในการสื่อความหมาย

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

เครื่องมือที่เกี่ยวข้อง