Stax
Tools

Color Contrast Checker

Check WCAG AA and AAA colour contrast ratios.

Contrast Ratio
21.00:1
LevelContextRequiredResult
WCAG AANormal text (< 18px, < 14px bold)4.5:1Pass ✓
WCAG AALarge text (≥ 18px or ≥ 14px bold)3:1Pass ✓
WCAG AAANormal text7:1Pass ✓
WCAG AAALarge text4.5:1Pass ✓

The quick brown fox jumps over the lazy dog.

Normal text (18px)

The quick brown fox jumps over the lazy dog.

Large text (24px)

The quick brown fox jumps over the lazy dog.

Bold large (18.67px bold)

PRESETS

ทำความเข้าใจข้อกำหนด contrast ของ WCAG

ทำไม contrast ถึงสำคัญเกินกว่าเรื่อง accessibility

ความล้มเหลวด้าน contrast ที่พบบ่อยและวิธีแก้ไข

แนวทาง contrast ของ WCAG 2.1 มีสองระดับ — AA (ขั้นต่ำ) และ AAA (เพิ่มประสิทธิภาพ) — โดยมีข้อกำหนดที่แตกต่างกันสำหรับข้อความปกติและข้อความขนาดใหญ่:

Contrast ที่เพียงพอไม่ได้ช่วยเฉพาะผู้ใช้ที่มีความบกพร่องทางสายตา — มันช่วยเพิ่มความสามารถในการอ่านสำหรับทุกคน โดยเฉพาะบนหน้าจอมือถือในแสงแดดจ้า สำหรับผู้สูงอายุ หรือผู้ที่เหนื่อยล้า การออกแบบสีเทาบนพื้นขาว &ldquo;สไตล์ทันสมัย&rdquo; ที่มี contrast ต่ำมักได้คะแนนต่ำในการทดสอบผู้ใช้ด้านความเข้าใจและความเร็วในการอ่าน

UI designer ตรวจสอบสีข้อความบนปุ่มและสีพื้นหลังระหว่างการ review การออกแบบเพื่อจับความล้มเหลว AA ก่อนที่จะถึงขั้นตอนการพัฒนา Front-end developer รันการตรวจสอบบน brand palette เพื่อหาคู่สีที่ปลอดภัยสำหรับ body text, heading และ interactive element เอเจนซีที่จัดทำ accessibility audit สำหรับลูกค้าทดสอบสีข้อความทุกสีที่ใช้บนเว็บไซต์เพื่อสร้างรายงาน WCAG compliance ทีม product ใช้เครื่องมือนี้เมื่อ rebrand เพื่อยืนยันว่า brand color ใหม่ตรงตาม accessibility threshold โดยไม่ต้องใช้ design tool แยกต่างหาก

  • WCAG AA ข้อความปกติ: 4.5:1 — จำเป็นสำหรับข้อความต่ำกว่า 18pt (24px) หรือ 14pt bold (18.67px bold)
  • WCAG AA ข้อความขนาดใหญ่: 3:1 — ใช้กับข้อความ 18pt+ (24px+) หรือ 14pt+ bold
  • WCAG AAA ข้อความปกติ: 7:1 — แนะนำสำหรับ accessibility สูงสุด
  • WCAG AAA ข้อความขนาดใหญ่: 4.5:1
  • ข้อความสีเทาอ่อนบนพื้นขาว — ใช้อย่างน้อย #767676 บน #ffffff (4.54:1)
  • Placeholder text — ควรตรงตาม 4.5:1 แม้จะเป็นแบบชั่วคราว
  • Disabled state — ยกเว้นจากข้อกำหนด contrast ตาม WCAG
  • ข้อความตกแต่ง (โลโก้ ข้อความที่เป็น visual ล้วนๆ) — ยกเว้นจากข้อกำหนด

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

What is WCAG colour contrast?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colours to ensure readability for users with visual impairments including low vision and colour blindness. A ratio of 1:1 means no contrast; 21:1 is the maximum (black on white).
What contrast ratio do I need to pass WCAG AA?
WCAG AA requires: 4.5:1 for normal text (below 18pt / 24px), and 3:1 for large text (18pt+ / 24px+ or 14pt+ / 18.67px+ if bold). AA is the standard legal requirement for many accessibility regulations including WCAG 2.1 and the EU Web Accessibility Directive.
What is WCAG AAA contrast?
WCAG AAA is the enhanced accessibility level requiring 7:1 for normal text and 4.5:1 for large text. AAA is optional for most websites but recommended for text-heavy content, news sites, and government portals. It is especially important for users with severe visual impairments.
How is the contrast ratio calculated?
Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 is the relative luminance of the darker colour. Relative luminance converts each RGB channel using a gamma-correction formula from the WCAG specification.
Does colour contrast affect SEO?
Google uses accessibility as part of its quality signals for Core Web Vitals and page experience ranking. While contrast ratio is not a direct ranking factor, Lighthouse accessibility audits flag contrast failures, and accessible, readable sites generally have lower bounce rates and better engagement metrics.

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