Contrast Checker

เกี่ยวกับ Contrast Checker

WCAG Contrast Checker instantly calculates the contrast ratio between any two colors and tells you whether that combination meets the Web Content Accessibility Guidelines (WCAG 2.1) for legibility. Accessible color contrast is essential for users with low vision or color-blindness and is a core requirement for legal compliance in many jurisdictions. WCAG defines two conformance levels: AA (the minimum acceptable standard) requires a ratio of at least 4.5:1 for normal text and 3:1 for large text, while AAA (the enhanced level) demands 7:1 for normal text and 4.5:1 for large text. Enter your foreground (text) and background colors using the color pickers or HEX input fields, and the tool computes the ratio in real time. A live preview shows sample text so you can judge readability at a glance, not just by numbers alone.

วิธีใช้ Contrast Checker

1. Click the "Text Color" picker or type a HEX value to set your foreground color.
2. Click the "Background" picker or type a HEX value to set your background color.
3. Read the contrast ratio displayed prominently in the center — green means accessible, yellow means marginal, red means failing.
4. Check the WCAG AA and AAA result badges to see exactly which levels pass or fail.
5. Use the swap button (⇄) to quickly reverse the foreground and background colors.
6. Adjust one or both colors until all required WCAG badges show a pass checkmark.

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

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