مركز المعرفة والمفاهيم
حساب نسبة تباين الألوان ومعايير إمكانية الوصول WCAG 2.1
حساب نسبة تباين الألوان ومعايير إمكانية الوصول WCAG 2.1
تعمل هذه الأداة محلياً بالكامل داخل المتصفح (Client-Side). لا يتم إرسال أكوادك أو بياناتك الحساسة إلى أي خادم خارجي.
البنية الأساسية والصيغة الرياضية
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker color. The resulting ratio ranges from 1:1 (no contrast, white on white) to 21:1 (maximum contrast, black on white).
أفضل الممارسات والإرشادات الأساسية
- Aim for AA Compliance (4.5:1): The Web Content Accessibility Guidelines (WCAG) Level AA requires a minimum ratio of 4.5:1 for standard body text, and 3:1 for large text (usually 18pt or 14pt bold).
- Don't Rely Solely on Color for Meaning: Colorblind users cannot distinguish certain hues (like red error states versus green success states). Always pair color changes with iconography, underlines, or structural changes.
- Account for Dark Mode Reversals: A high contrast palette in Light Mode often fails catastrophically when mathematically inverted for Dark Mode. You must manually check the contrast ratios for both distinct themes.
الأسئلة الشائعة (FAQ)
What is WCAG Level AAA?
Level AAA is the strictest accessibility standard, requiring a contrast ratio of 7:1 for normal text. It is typically only mandated for highly specialized government or medical software.
Does contrast apply to non text UI elements?
Yes. WCAG 2.1 introduced a 3:1 minimum contrast ratio requirement for 'UI Components and Graphical Objects', meaning your input borders and button backgrounds must also contrast against the page.
Why do my pure gray colors fail contrast?
Pure mid grays (like #808080) sitting on a pure white background usually hover around a 3.9:1 ratio, which strictly fails the 4.5:1 requirement for body text. You must darken them.