คู่มือ

ตรวจสีและ contrast

คู่มือใช้ HEX, RGB, HSL และอัตราส่วนคอนทราสต์เพื่อให้สีในหน้าจออ่านได้ชัดเจน

ทดสอบบนพื้นหลังจริง

หลังแปลงสี ให้ตรวจคอนทราสต์กับพื้นหลัง ขนาดตัวอักษร และสถานะจริงของหน้าจอ ค่า HEX หรือ RGB อย่างเดียวไม่พอพิสูจน์ว่าอ่านข้อความได้

กันข้อมูลอ่อนไหวออก

เครื่องมือในเบราว์เซอร์เร็ว แต่ข้อมูลลับระบบจริง ข้อมูลลูกค้า และชื่อ host ภายในควรถูกลบหรือปิดบัง

ตรวจผลก่อนคัดลอก

ถือว่าผลลัพธ์เป็นฉบับร่างจนกว่าจะยืนยันสภาพแวดล้อมรัน รูปแบบไวยากรณ์ หรือพฤติกรรมแพลตฟอร์ม

ตรวจซ้ำด้วยเครื่องมือที่เกี่ยวข้อง

อย่าจบ ตรวจสีและ contrast เป็นขั้นตอนเดี่ยว ก่อนคัดลอกให้ตรวจรูปแบบ เขตเวลา การเข้ารหัส และสถานะ URL สาธารณะด้วยเครื่องมือที่เกี่ยวข้อง

เหลือเฉพาะผลลัพธ์ที่แชร์ได้

ลบข้อมูลลับระบบจริง ข้อมูลลูกค้า host ภายใน และ token ใช้ครั้งเดียว เขียนสมมติฐานหลักสั้น ๆ เพื่อใช้ต่อในเอกสาร issue หรือ code review

กำหนดเกณฑ์ตรวจผลก่อน

ก่อนใช้ ตรวจสีและ contrast ให้กำหนดว่าผลลัพธ์แบบใดจึงคัดลอกได้อย่างปลอดภัย การดูรูปแบบข้อมูลเข้า สภาพแวดล้อมปลายทาง ขอบเขตความปลอดภัย และขอบเขตการแชร์ร่วมกันช่วยบอกว่าผลลัพธ์เหมาะกับงานจริงหรือไม่

ตรวจว่าตัวอย่าง input แทนปัญหาจริงได้หรือไม่
จด browser, scheduler, parser หรือสภาพแวดล้อม deploy ที่เกี่ยวข้อง
ถ้ามีคำเตือน ให้ตรวจซ้ำด้วยเครื่องมือที่เกี่ยวข้องก่อนคัดลอก

เชื่อมไปงานถัดไป

งานที่ดีไม่หยุดแค่การแปลงครั้งเดียว จัดรูปแบบแล้วค่อยดึงข้อมูล สร้างแล้วตรวจความถูกต้อง ตรวจ URL สาธารณะแล้วดู header, DNS, robots หรือ sitemap ต่อ

นำผลที่จัดรูปแบบแล้วไปเทียบ diff หรือ schema เมื่อจำเป็น
ดูผล URL และ network คู่กับ redirect, robots และ sitemap
ก่อนแชร์ให้ลบ secret, host ภายใน และข้อมูลลูกค้า

ก่อนคัดลอก

ขั้นตอนตรวจสั้น ๆ เพื่อใช้ซ้ำอย่างปลอดภัย

1. Color ตัวแปลงแปลงสี HEX, RGB, HSL และตรวจ contrast WCAG ระหว่างสีหน้าและสีพื้นสีขั้นตอนถัดไป: แปลงสี HEX, RGB, HSL และตรวจ contrast WCAG ระหว่างสีหน้าและสีพื้นเทียบข้อมูลต้นฉบับกับรูปแบบผลลัพธ์อีกครั้ง 2. ตัวแปลงหน่วย CSSแปลง px, rem, em และเปอร์เซ็นต์สำหรับคำนวณเลย์เอาต์และ typography CSSโค้ดขั้นตอนถัดไป: แปลง px, rem, em และเปอร์เซ็นต์สำหรับคำนวณเลย์เอาต์และ typography CSSเทียบข้อมูลต้นฉบับกับรูปแบบผลลัพธ์อีกครั้ง 3. ตัวสร้าง CSS clampสร้างค่า CSS clamp() จากช่วง min/max สำหรับ font-size และระยะห่างแบบ responsiveโค้ดขั้นตอนถัดไป: สร้างค่า CSS clamp() จากช่วง min/max สำหรับ font-size และระยะห่างแบบ responsiveเทียบข้อมูลต้นฉบับกับรูปแบบผลลัพธ์อีกครั้ง

Color ตัวแปลง

แปลงสี HEX, RGB, HSL และตรวจ contrast WCAG ระหว่างสีหน้าและสีพื้น

สี

กรณีใช้งาน

แปลงสี HEX, RGB, HSL และตรวจ contrast WCAG ระหว่างสีหน้าและสีพื้น
จัดการอินพุตด้วยโหมด ในเบราว์เซอร์ และตรวจผลก่อนคัดลอก
ใช้ Color ตัวแปลง คู่กับเครื่องมือที่เกี่ยวข้องเพื่อลดขั้นตอน

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

ตัวสร้าง CSS clampสร้างค่า CSS clamp() จากช่วง min/max สำหรับ font-size และระยะห่างแบบ responsiveขั้นตอนถัดไป: สร้างค่า CSS clamp() จากช่วง min/max สำหรับ font-size และระยะห่างแบบ responsive ตัวแปลงหน่วย CSSแปลง px, rem, em และเปอร์เซ็นต์สำหรับคำนวณเลย์เอาต์และ typography CSSขั้นตอนถัดไป: แปลง px, rem, em และเปอร์เซ็นต์สำหรับคำนวณเลย์เอาต์และ typography CSS

กรณีผิดพลาดที่พบบ่อย

แปลงสี HEX, RGB, HSL และตรวจ contrast WCAG ระหว่างสีหน้าและสีพื้น
ถ้าโหมด ในเบราว์เซอร์ ไม่ตรงกับรูปแบบข้อมูลจริง อย่าเชื่อผลลัพธ์ทันที
ลบข้อมูลลับระบบจริง ข้อมูลลูกค้า และ URL ภายในก่อนแชร์ค่าที่คัดลอก

ก่อนคัดลอก

เทียบข้อมูลต้นฉบับกับรูปแบบผลลัพธ์อีกครั้ง
ตรวจความต่างของ runtime การเข้ารหัส เขตเวลา และนโยบายความปลอดภัย
ใช้เครื่องมือที่เกี่ยวข้องเพื่อตรวจว่า Color ตัวแปลง เหมาะกับขั้นตอนถัดไปหรือไม่

ตัวอย่าง

อินพุตทั่วไป

แปลงรูปแบบสีและตรวจความต่างระหว่างสีหน้า/สีพื้น สถานะ AA/AAA และข้อควรระวังความโปร่งใส

#2563eb on #ffffff

เอาต์พุตทั่วไป

ตัวอย่างเร็วเพื่อตรวจรูปแบบผลลัพธ์ก่อนคัดลอก

ค่า HEX/RGB/HSL / ความต่าง 5.17 / AA ผ่าน / ตรวจ AAA

ตัวอย่างเพิ่มเติม

ตัวอย่างเร็วเพื่อตรวจรูปแบบผลลัพธ์ก่อนคัดลอก

#2563eb on #ffffff

FAQ

อินพุตของ Color ตัวแปลง ประมวลผลที่ไหน

เมื่อทำได้จะประมวลผลในเบราว์เซอร์ แต่ไม่ควรใส่ข้อมูลลับระบบจริงหรือข้อมูลลูกค้า

ใช้ผลลัพธ์ในระบบจริงได้ทันทีไหม

ก่อนคัดลอกควรตรวจสภาพแวดล้อมรัน การเข้ารหัส เขตเวลา และนโยบายความปลอดภัยของระบบปลายทาง

ตัวแปลงหน่วย CSS

แปลง px, rem, em และเปอร์เซ็นต์สำหรับคำนวณเลย์เอาต์และ typography CSS

โค้ด

กรณีใช้งาน

แปลง px, rem, em และเปอร์เซ็นต์สำหรับคำนวณเลย์เอาต์และ typography CSS
จัดการอินพุตด้วยโหมด ในเบราว์เซอร์ และตรวจผลก่อนคัดลอก
ใช้ ตัวแปลงหน่วย CSS คู่กับเครื่องมือที่เกี่ยวข้องเพื่อลดขั้นตอน

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

ตัวสร้าง CSS clampสร้างค่า CSS clamp() จากช่วง min/max สำหรับ font-size และระยะห่างแบบ responsiveขั้นตอนถัดไป: สร้างค่า CSS clamp() จากช่วง min/max สำหรับ font-size และระยะห่างแบบ responsive Color ตัวแปลงแปลงสี HEX, RGB, HSL และตรวจ contrast WCAG ระหว่างสีหน้าและสีพื้นขั้นตอนถัดไป: แปลงสี HEX, RGB, HSL และตรวจ contrast WCAG ระหว่างสีหน้าและสีพื้น

กรณีผิดพลาดที่พบบ่อย

แปลง px, rem, em และเปอร์เซ็นต์สำหรับคำนวณเลย์เอาต์และ typography CSS
ถ้าโหมด ในเบราว์เซอร์ ไม่ตรงกับรูปแบบข้อมูลจริง อย่าเชื่อผลลัพธ์ทันที
ลบข้อมูลลับระบบจริง ข้อมูลลูกค้า และ URL ภายในก่อนแชร์ค่าที่คัดลอก

ก่อนคัดลอก

เทียบข้อมูลต้นฉบับกับรูปแบบผลลัพธ์อีกครั้ง
ตรวจความต่างของ runtime การเข้ารหัส เขตเวลา และนโยบายความปลอดภัย
ใช้เครื่องมือที่เกี่ยวข้องเพื่อตรวจว่า ตัวแปลงหน่วย CSS เหมาะกับขั้นตอนถัดไปหรือไม่

ตัวอย่าง

อินพุตทั่วไป

ใช้ตัวอย่างนี้เพื่อตรวจขั้นตอนอินพุตของ ตัวแปลงหน่วย CSS

16px at 16px root

เอาต์พุตทั่วไป

ตัวอย่างเร็วเพื่อตรวจรูปแบบผลลัพธ์ก่อนคัดลอก

1rem / 1em / 100%

FAQ

อินพุตของ ตัวแปลงหน่วย CSS ประมวลผลที่ไหน

ใช้ผลลัพธ์ในระบบจริงได้ทันทีไหม

ตัวสร้าง CSS clamp

สร้างค่า CSS clamp() จากช่วง min/max สำหรับ font-size และระยะห่างแบบ responsive

โค้ด

กรณีใช้งาน

สร้างค่า CSS clamp() จากช่วง min/max สำหรับ font-size และระยะห่างแบบ responsive
จัดการอินพุตด้วยโหมด ในเบราว์เซอร์ และตรวจผลก่อนคัดลอก
ใช้ ตัวสร้าง CSS clamp คู่กับเครื่องมือที่เกี่ยวข้องเพื่อลดขั้นตอน

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

ตัวแปลงหน่วย CSSแปลง px, rem, em และเปอร์เซ็นต์สำหรับคำนวณเลย์เอาต์และ typography CSSขั้นตอนถัดไป: แปลง px, rem, em และเปอร์เซ็นต์สำหรับคำนวณเลย์เอาต์และ typography CSS Color ตัวแปลงแปลงสี HEX, RGB, HSL และตรวจ contrast WCAG ระหว่างสีหน้าและสีพื้นขั้นตอนถัดไป: แปลงสี HEX, RGB, HSL และตรวจ contrast WCAG ระหว่างสีหน้าและสีพื้น

กรณีผิดพลาดที่พบบ่อย

สร้างค่า CSS clamp() จากช่วง min/max สำหรับ font-size และระยะห่างแบบ responsive
ถ้าโหมด ในเบราว์เซอร์ ไม่ตรงกับรูปแบบข้อมูลจริง อย่าเชื่อผลลัพธ์ทันที
ลบข้อมูลลับระบบจริง ข้อมูลลูกค้า และ URL ภายในก่อนแชร์ค่าที่คัดลอก

ก่อนคัดลอก

เทียบข้อมูลต้นฉบับกับรูปแบบผลลัพธ์อีกครั้ง
ตรวจความต่างของ runtime การเข้ารหัส เขตเวลา และนโยบายความปลอดภัย
ใช้เครื่องมือที่เกี่ยวข้องเพื่อตรวจว่า ตัวสร้าง CSS clamp เหมาะกับขั้นตอนถัดไปหรือไม่

ตัวอย่าง

อินพุตทั่วไป

ใช้ตัวอย่างนี้เพื่อตรวจขั้นตอนอินพุตของ ตัวสร้าง CSS clamp

16px at 360px, 32px at 1200px

เอาต์พุตทั่วไป

ตัวอย่างเร็วเพื่อตรวจรูปแบบผลลัพธ์ก่อนคัดลอก

clamp(1rem, 0.5714rem + 1.9048vw, 2rem)

FAQ

อินพุตของ ตัวสร้าง CSS clamp ประมวลผลที่ไหน

ใช้ผลลัพธ์ในระบบจริงได้ทันทีไหม

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

เปิดยูทิลิตี้ที่เกี่ยวข้องกับคู่มือนี้

Color ตัวแปลงแปลงสี HEX, RGB, HSL และตรวจ contrast WCAG ระหว่างสีหน้าและสีพื้นแปลงสี HEX, RGB, HSL และตรวจ contrast WCAG ระหว่างสีหน้าและสีพื้น · จัดการอินพุตด้วยโหมด ในเบราว์เซอร์ และตรวจผลก่อนคัดลอกแปลงรูปแบบสีและตรวจความต่างระหว่างสีหน้า/สีพื้น สถานะ AA/AAA และข้อควรระวังความโปร่งใสเมื่อทำได้จะประมวลผลในเบราว์เซอร์ แต่ไม่ควรใส่ข้อมูลลับระบบจริงหรือข้อมูลลูกค้า ตัวแปลงหน่วย CSSแปลง px, rem, em และเปอร์เซ็นต์สำหรับคำนวณเลย์เอาต์และ typography CSSแปลง px, rem, em และเปอร์เซ็นต์สำหรับคำนวณเลย์เอาต์และ typography CSS · จัดการอินพุตด้วยโหมด ในเบราว์เซอร์ และตรวจผลก่อนคัดลอกใช้ตัวอย่างนี้เพื่อตรวจขั้นตอนอินพุตของ ตัวแปลงหน่วย CSSเมื่อทำได้จะประมวลผลในเบราว์เซอร์ แต่ไม่ควรใส่ข้อมูลลับระบบจริงหรือข้อมูลลูกค้า ตัวสร้าง CSS clampสร้างค่า CSS clamp() จากช่วง min/max สำหรับ font-size และระยะห่างแบบ responsiveสร้างค่า CSS clamp() จากช่วง min/max สำหรับ font-size และระยะห่างแบบ responsive · จัดการอินพุตด้วยโหมด ในเบราว์เซอร์ และตรวจผลก่อนคัดลอกใช้ตัวอย่างนี้เพื่อตรวจขั้นตอนอินพุตของ ตัวสร้าง CSS clampเมื่อทำได้จะประมวลผลในเบราว์เซอร์ แต่ไม่ควรใส่ข้อมูลลับระบบจริงหรือข้อมูลลูกค้า