โลโก้ XTools
XTools

ตัวตรวจคอนทราสต์

ตรวจคอนทราสต์ของข้อความกับพื้นหลังตาม WCAG AA และ AAA
  • ไฟล์ไม่ออกจากอุปกรณ์ของคุณ
  • ทำงานในเบราว์เซอร์
  • ฟรี ไม่ต้องสมัคร ไม่มีลายน้ำ

Contrast ratio

4.54:1

Passes AA for all text

  • AANormal text

    4.5:1

    Pass

  • AALarge text

    3:1 · 24px+, or 18.66px+ bold

    Pass

  • AAANormal text

    7:1

    Fail

  • AAALarge text

    4.5:1 · 24px+, or 18.66px+ bold

    Pass

  • AAUI components & graphics

    3:1 · Icons, borders of inputs, focus rings

    Pass

APCA lightness contrast

Lc 71.6

OK for content text, not long body copy

From the WCAG 3 draft. Polarity aware: negative Lc means light text on a dark background.

Preview

Large heading

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Body text is where low contrast hurts most: long paragraphs at small sizes tire the eyes quickly, especially on phones in sunlight.

The quick brown fox jumps over the lazy dog

Small print, captions and footnotes

ButtonButton

Nearest passing colors

AA · 4.5:1

Adjust textAlready passes
Adjust backgroundAlready passes

AAA · 7:1

Adjust text

#595959 · 7.00:1

Adjust backgroundNot reachable by changing lightness alone
Changes only lightness (in OKLCH), so the hue and feel of your color stay the same.
4.54:1 Passes AA for all text · #767676

วิธีใช้ ตัวตรวจคอนทราสต์

ตรวจคู่สีข้อความและพื้นหลังตาม WCAG 2 (AA และ AAA สำหรับข้อความปกติ ข้อความขนาดใหญ่ และส่วนประกอบ UI) และดูคอนทราสต์ความสว่าง APCA จากร่าง WCAG 3 เมื่อคู่สีไม่ผ่าน จะแนะนำสีที่ผ่านซึ่งใกล้ที่สุด

  1. 1

    ใส่สีข้อความและสีพื้นหลังเป็น HEX, rgb(), hsl(), oklch() หรือชื่อสี หรือคลิกตัวอย่างเพื่อเปิดตัวเลือกสี

  2. 2

    อ่านอัตราส่วนคอนทราสต์ และผลผ่านหรือไม่ผ่านของแต่ละการตรวจ AA และ AAA

  3. 3

    ดูตัวอย่าง พิมพ์ข้อความตัวอย่างของคุณเอง และใช้สลับสีเพื่อทดสอบกลับด้าน

  4. 4

    ใต้สีที่ผ่านซึ่งใกล้ที่สุด คลิกใช้ บนคำแนะนำปรับข้อความหรือปรับพื้นหลัง สำหรับ AA (4.5:1) หรือ AAA (7:1)

  5. 5

    เมื่อคุณเปลี่ยนสี URL ของหน้าจะเก็บทั้งสองสี ดังนั้นคัดลอกเพื่อแชร์ผลได้

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

ฉันต้องการอัตราส่วนคอนทราสต์เท่าใด?

WCAG AA ขอ 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ (24px ขึ้นไป หรือ 18.66px ตัวหนา) และส่วนประกอบ UI เช่น ไอคอนและขอบช่องกรอก AAA ขอ 7:1 และ 4.5:1

ทำไม 4.497:1 ถึงแสดงเป็น 4.49 ไม่ใช่ 4.50?

อัตราส่วนไม่ถูกปัดขึ้นข้ามเกณฑ์ ดังนั้นคู่ที่พลาด 4.5:1 ไปนิดเดียวจะไม่ดูเหมือนผ่าน

ทดสอบข้อความกึ่งโปร่งใสได้หรือไม่?

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

ตัวเลข APCA คืออะไร?

APCA มาจากร่าง WCAG 3 และให้คอนทราสต์ความสว่าง (Lc) ที่ขึ้นกับว่าสีใดเป็นข้อความ ค่าลบหมายถึงข้อความสว่างบนพื้นมืด ยังเป็นร่างอยู่ ดังนั้นอัตราส่วน WCAG 2 ยังเป็นเป้าหมายการปฏิบัติตามที่ใช้กัน

สีที่แนะนำถูกเลือกอย่างไร?

เปลี่ยนเฉพาะความสว่าง (ใน OKLCH) ดังนั้นฮิวและความรู้สึกของสียังเหมือนเดิม หากทั้งสองทิศทางไปไม่ถึงเป้าหมาย จะบอกว่าไปไม่ถึงด้วยการเปลี่ยนความสว่างอย่างเดียว ลองปรับสีอีกสี