فاحص تباين الألوان
اختبر مجموعات ألوان النص والخلفية للتحقق من الامتثال لمعايير إمكانية الوصول WCAG 2.1
94,217+ tools.contrast-checker.input.counter
tools.contrast-checker.output.contrastRatio
17.06:1
tools.contrast-checker.output.largeTextPreview
tools.contrast-checker.output.normalTextPreview
tools.contrast-checker.output.smallTextPreview
tools.contrast-checker.output.reversedPreview
tools.contrast-checker.output.aaNormal
tools.contrast-checker.output.aaNormalReq
tools.contrast-checker.output.aaLarge
tools.contrast-checker.output.aaLargeReq
tools.contrast-checker.output.aaaNormal
tools.contrast-checker.output.aaaNormalReq
tools.contrast-checker.output.aaaLarge
tools.contrast-checker.output.aaaLargeReq
tools.contrast-checker.input.ctaText
tools.contrast-checker.input.ctaButtonما هو تباين الألوان في التصميم؟
تباين الألوان هو الفرق في السطوع بين لونين. يُعدّ التباين الكافي أمرًا بالغ الأهمية لإمكانية قراءة النص وإمكانية الوصول، خاصةً للمستخدمين ذوي الإعاقات البصرية أو ضعف الإبصار.
توفر إرشادات WCAG 2.1 معايير محددة لتباين الألوان لضمان إمكانية الوصول إلى المحتوى الرقمي للجميع. يُحسب التباين كنسبة تتراوح من 1:1 (لا تباين) إلى 21:1 (أقصى تباين).
مستويات WCAG 2.1
tools.contrast-checker.wcagLevels.aaNormal
tools.contrast-checker.wcagLevels.aaNormalRatio
tools.contrast-checker.wcagLevels.aaNormalDesc
tools.contrast-checker.wcagLevels.aaLarge
tools.contrast-checker.wcagLevels.aaLargeRatio
tools.contrast-checker.wcagLevels.aaLargeDesc
tools.contrast-checker.wcagLevels.aaaNormal
tools.contrast-checker.wcagLevels.aaaNormalRatio
tools.contrast-checker.wcagLevels.aaaNormalDesc
tools.contrast-checker.wcagLevels.aaaLarge
tools.contrast-checker.wcagLevels.aaaLargeRatio
tools.contrast-checker.wcagLevels.aaaLargeDesc
6 نصائح لتباين الألوان الرائع
tools.contrast-checker.tips.tip1
tools.contrast-checker.tips.tip1Desc
tools.contrast-checker.tips.tip2
tools.contrast-checker.tips.tip2Desc
tools.contrast-checker.tips.tip3
tools.contrast-checker.tips.tip3Desc
tools.contrast-checker.tips.tip4
tools.contrast-checker.tips.tip4Desc
tools.contrast-checker.tips.tip5
tools.contrast-checker.tips.tip5Desc
tools.contrast-checker.tips.tip6
tools.contrast-checker.tips.tip6Desc
مقارنة أدوات فحص التباين
| tools.contrast-checker.comparison.feature | tools.contrast-checker.comparison.kleap | tools.contrast-checker.comparison.webaim | tools.contrast-checker.comparison.coolors | tools.contrast-checker.comparison.adobeColor |
|---|---|---|---|---|
| tools.contrast-checker.comparison.price | tools.contrast-checker.comparison.priceKleap | tools.contrast-checker.comparison.priceWebaim | tools.contrast-checker.comparison.priceCoolors | tools.contrast-checker.comparison.priceAdobe |
| tools.contrast-checker.comparison.realTimePreview | tools.contrast-checker.comparison.realTimePreviewKleap | tools.contrast-checker.comparison.realTimePreviewWebaim | tools.contrast-checker.comparison.realTimePreviewCoolors | tools.contrast-checker.comparison.realTimePreviewAdobe |
| tools.contrast-checker.comparison.colorSuggestion | tools.contrast-checker.comparison.colorSuggestionKleap | tools.contrast-checker.comparison.colorSuggestionWebaim | tools.contrast-checker.comparison.colorSuggestionCoolors | tools.contrast-checker.comparison.colorSuggestionAdobe |
| tools.contrast-checker.comparison.wcagLevels | tools.contrast-checker.comparison.wcagLevelsKleap | tools.contrast-checker.comparison.wcagLevelsWebaim | tools.contrast-checker.comparison.wcagLevelsCoolors | tools.contrast-checker.comparison.wcagLevelsAdobe |
| tools.contrast-checker.comparison.websiteBuilder | tools.contrast-checker.comparison.websiteBuilderKleap | tools.contrast-checker.comparison.websiteBuilderWebaim | tools.contrast-checker.comparison.websiteBuilderCoolors | tools.contrast-checker.comparison.websiteBuilderAdobe |
| tools.contrast-checker.comparison.swapColors | tools.contrast-checker.comparison.swapColorsKleap | tools.contrast-checker.comparison.swapColorsWebaim | tools.contrast-checker.comparison.swapColorsCoolors | tools.contrast-checker.comparison.swapColorsAdobe |
| tools.contrast-checker.comparison.randomPair | tools.contrast-checker.comparison.randomPairKleap | tools.contrast-checker.comparison.randomPairWebaim | tools.contrast-checker.comparison.randomPairCoolors | tools.contrast-checker.comparison.randomPairAdobe |