แปลงสี HEX, RGB, HSL และตรวจ contrast WCAG ระหว่างสีหน้าและสีพื้น
อินพุต / ผลลัพธ์
อินพุต ผลลัพธ์ และการคัดลอกอยู่ในพื้นที่หลักนี้ ตัวอย่างและรายการตรวจอยู่ด้านล่าง
เซสชันในเครื่อง
สถานะอินพุตเก็บไว้เฉพาะในเบราว์เซอร์นี้ เพื่อกู้คืนงานล่าสุดได้โดยไม่ต้องมีบัญชี
เปิดตัวอย่าง รายการตรวจ และเครื่องมือที่เกี่ยวข้องหลังจบขั้นตอนอินพุต/ผลลัพธ์หลัก
ตรวจ accessibility ของสี
แปลงสี foreground/background คัดลอกรายงาน contrast WCAG แล้วตรวจ CSS token และ asset ก่อน release
แปลงคู่ HEX/RGB/HSL ตรวจ AA/AAA แล้วคัดลอกรายงาน accessibility
ตรวจชื่อ CSS token, selector และค่าสีซ้ำก่อน commit
ตรวจว่า initials หรือ icon เล็กยังอ่านชัดบนพื้นหลังที่เลือกหรือไม่
Review snippet CSS
จัดรูป snippet CSS คัดลอกรายงาน review CSS แล้วตรวจ minification และ contrast
จัดรูป snippet แล้วคัดลอกรายงานที่มี selector, token, cascade, specificity และ checklist
ถ้าจะแชร์ CSS แบบย่อ ให้ตรวจ compression, comment removal และรายงาน minify
ตรวจ color token ด้วย WCAG contrast เมื่อ snippet เปลี่ยนสี foreground/background
ตรวจ data URL ของรูปภาพ
ดูตัวอย่างรูป Base64 ยืนยัน MIME type แล้วตรวจ contrast ก่อนแชร์
ก่อนคัดลอก
กรณีผิดพลาดที่พบบ่อย
เครื่องมือที่เกี่ยวข้อง
คู่มือ
เปิดตัวอย่าง รายการตรวจ และเครื่องมือที่เกี่ยวข้องหลังจบขั้นตอนอินพุต/ผลลัพธ์หลัก
#2563eb on #ffffffrgb(24,24,27) on #fafafahsl(220 90% 56%) on hsl(0 0% 100%)ตัวอย่างสี
อัตราส่วน contrast
5.17
AA
สีหน้า
#2563eb
สีพื้น
#ffffff
เป้าหมาย WCAG
AA 4.5:1 / AAA 7:1
ใช้ 3:1 เฉพาะข้อความใหญ่หรือหนา
ตรวจเกณฑ์ AA/AAA ข้อจำกัดความโปร่งใส และส่วนต่างความสว่างก่อนคัดลอกค่าออกแบบ
ข้อความปกติ AA
ผ่าน
4.5:1
ข้อความขนาดใหญ่ AA
ผ่าน
3:1
ข้อความปกติ AAA
ไม่ผ่าน
7:1
ส่วนต่าง AA
+0.67
ค่าบวกผ่าน AA สำหรับข้อความปกติ
ส่วนต่างความสว่าง
0.847
ส่วนต่างมากขึ้นมักอ่านง่ายขึ้น
รายงาน accessibility ของสี
คัดลอกรายงาน contrast WCAG พร้อมค่าสี เกณฑ์ คำเตือน และ checklist accessibility
สถานะ contrast
AA
อัตราส่วน contrast
5.17
ข้อความปกติ AA
ผ่าน
4.5:1
ข้อความขนาดใหญ่ AA
ผ่าน
3:1
ข้อความปกติ AAA
ไม่ผ่าน
7:1
ส่วนต่าง AA
+0.67
ส่วนต่างความสว่าง
0.847
ค่า alpha
ไม่ใช่
บันทึกตรวจสอบ
Checklist accessibility
# รายงาน accessibility ของสี - ตรวจเมื่อ: เวลา copy ใน browser - สีหน้า อินพุต: #2563eb - สีหน้า HEX: #2563eb - สีหน้า RGB: rgb(37, 99, 235) - สีหน้า HSL: hsl(221, 83.2%, 53.3%) - สีพื้น อินพุต: #ffffff - สีพื้น HEX: #ffffff - สีพื้น RGB: rgb(255, 255, 255) - สีพื้น HSL: hsl(0, 0.0%, 100.0%) - อัตราส่วน contrast: 5.17 - สถานะ contrast: AA - ข้อความปกติ AA: ผ่าน (4.5:1) - ข้อความขนาดใหญ่ AA: ผ่าน (3:1) - ข้อความปกติ AAA: ไม่ผ่าน (7:1) - ส่วนต่าง AA: +0.67 - ส่วนต่างความสว่าง: 0.847 - การจัดการ alpha: ไม่พบค่า alpha ในช่องสีหน้า/สีพื้น ## บันทึกตรวจสอบ - ผ่าน AA แต่ AAA ต้องใช้ contrast 7:1 ## Checklist accessibility - ทดสอบคู่สีกับพื้นหลังที่ render จริง ไม่ใช่แค่ preview สีทึบ - ตรวจ hover, focus, disabled, visited และ selected ก่อนเผยแพร่ - ยืนยันขนาดและน้ำหนักฟอนต์จริงก่อนอ้างอิงเกณฑ์ข้อความใหญ่ - เก็บ token สีหน้าและสีพื้นไว้คู่กันเพื่อ reuse อย่างตั้งใจ - อย่าใช้สีอย่างเดียวเพื่อสื่อ error, warning หรือ action ที่จำเป็น
สีหน้า
#2563eb
สีพื้น
#ffffff
ผลลัพธ์พร้อมคัดลอก
สีหน้า HEX: #2563eb
สีหน้า RGB: rgb(37, 99, 235)
สีหน้า HSL: hsl(221, 83.2%, 53.3%)
สีพื้น HEX: #ffffff
สีพื้น RGB: rgb(255, 255, 255)
สีพื้น HSL: hsl(0, 0.0%, 100.0%)
อัตราส่วน contrast: 5.17 (ข้อความปกติ AA)