WCAG Color Contrast Checker การตรวจสอบสี

Evaluate the contrast ratio of text and background colors based on WCAG 2.1 guidelines. Instantly generate accessible color adjustments.

HEX/RGB/HSL
HEX/RGB/HSL
ทุกอย่างทํางานในท้องถิ่นในเบราว์เซอร์ของคุณ

หมายเลขรุ่น:

หัวใหญ่ (18pt ยาก / 24pt ระยะ)

นี่คือการดูที่หน้าแรกของรูปแบบข้อความหัวข้อขนาดใหญ่


ภาษาปกติ (ภายใต้ 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing เหล็ก

ความแตกต่าง

18.6:1

WCAG 2.1 สภาพปฏิบัติตาม

WCAG AA ข้อกําหนด
หมายเลขรุ่น: 4.5 : 1 PASS
ภาษาใหญ่ (3.0:1) PASS

WCAG AAA ข้อกําหนด
หมายเลขรุ่น: 7.0: 1 PASS
หมายเลขรุ่น: 4.5 PASS

WCAG 2.1 คู่มือ

ตรวจสอบมาตรฐานการต้านทานได้อย่างง่ายดายเพื่อสร้างอินเตอร์เฟซที่เข้าถึงได้ซึ่งปฏิบัติตามบท 508, ADA และ WCAG AA หรือ AAA คู่มือ

มอเตอร์ข้อเสนอ

ปรับสีโดยอัตโนมัติอย่างต่อเนื่องตามแนวตั้ง HSL เพื่อหาตัวเลือกที่ใกล้ที่สุดซึ่งตอบสนองความแตกต่างของข้อกําหนด

คลูชั่นด้านลูกค้า

การคํานวณจะดําเนินการในท้องถิ่นภายในแบริ่งเบราว์เซอร์ของคุณ ไม่มีการส่งสีไฟล์หรือโค้ดโทรเมตริกไปยังเซิร์ฟเวอร์ของเรา

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

ตัวตรวจสอบสี

ค่าใช้จ่ายในการคํานวณอัตราการต้านทาน WCAG สําหรับสีด้านหน้าและพื้นหลังและแสดงผลที่พบในขนาดข้อความ

การเข้าสู่ระบบ
สองสี CSS ที่ถูกต้องและข้อความการดูก่อนที่เลือก.
การออก
ความสัมพันธ์ของความแตกต่างกับ WCAG AA และ AAA Pass หรือ Fail Indicators.
ข้อ จํากัด จริง
การคํานวณครอบคลุมการสอดคล้องของแสงเท่านั้น มันไม่รับรองอินเตอร์เฟซหรือบัญชีสําหรับการแสดงข้อความเคลื่อนไหวความสนใจหรือการสั่นสะเทือนที่ไม่ใช่สี
ความลับและการจัดการข้อมูล
สองสี CSS ที่ถูกต้องและข้อความการดูก่อนที่เลือกจะถูกประมวลผลในแท็บเบราว์เซอร์นี้ แปลงไม่รับหรือเก็บไว้ การปิดหรืออัพโหลดหน้าจะทําความสะอาดสถานะทํางานได้หากเครื่องมือไม่ได้เสนอการดาวน์โหลดท้องถิ่น

วิธีการใช้เครื่องมือนี้

  1. ให้สองสี CSS ที่ถูกต้องและข้อความการดูก่อนที่เลือกในควบคุมเครื่องมือ
  2. เลือกการตั้งค่าที่ส่งผลกระทบต่อความสัมพันธ์ของข้อตกลงกับ WCAG AA และ AAA Pass หรือแสดงผลล้มเหลวแล้วทํางานเครื่องมือ
  3. ตรวจสอบความสัมพันธ์การต้านทานกับ WCAG AA และ AAA Pass หรือไม่ผ่านตัวชี้วัดก่อนที่จะคัดลอกหรือดาวน์โหลด

โหมดความล้มเหลวทั่วไป

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

ตัวอย่างที่เป็นประโยชน์

คัดลอกข้อความ #1f2937 บน #ffffff เพื่อดูความสัมพันธ์ของมันสําหรับข้อความปกติและขนาดใหญ่