فاحص تباين الألوان

اختبر مجموعات ألوان النص والخلفية للتحقق من الامتثال لمعايير إمكانية الوصول WCAG 2.1

94,217+ contrast checks performed

Contrast Ratio

17.06:1

Large Text Preview (24px)

Normal body text preview (16px). The quick brown fox jumps over the lazy dog. This sample shows how your color combination looks at typical body copy size.

Small text (14px) — often used for captions, footnotes, and metadata.

Reversed: background on text color (17.06:1 — same ratio)

AA Normal Text

Requires 4.5:1

ناجح

AA Large Text

Requires 3:1

ناجح

AAA Normal Text

Requires 7:1

ناجح

AAA Large Text

Requires 4.5:1

ناجح

Ready to build an accessible website with these colors?

Build with these colors

ما هو تباين الألوان في التصميم؟

تباين الألوان هو الفرق في السطوع بين لونين. يُعدّ التباين الكافي أمرًا بالغ الأهمية لإمكانية قراءة النص وإمكانية الوصول، خاصةً للمستخدمين ذوي الإعاقات البصرية أو ضعف الإبصار.

توفر إرشادات WCAG 2.1 معايير محددة لتباين الألوان لضمان إمكانية الوصول إلى المحتوى الرقمي للجميع. يُحسب التباين كنسبة تتراوح من 1:1 (لا تباين) إلى 21:1 (أقصى تباين).

مستويات WCAG 2.1

AA Normal Text

4.5:1 minimum

Requires a minimum contrast ratio of 4.5:1. This is the most common compliance target and applies to body text under 18pt (or 14pt bold).

AA Large Text

3:1 minimum

Requires a minimum contrast ratio of 3:1. Applies to text that is at least 18pt (24px) or 14pt bold (18.66px bold).

AAA Normal Text

7:1 minimum

The highest standard, requiring 7:1 contrast ratio. Ensures readability for users with moderately low vision (approximately 20/80).

AAA Large Text

4.5:1 minimum

Requires 4.5:1 for large text at the AAA level. Provides enhanced readability for headers and display text.

6 نصائح لتباين الألوان الرائع

1

tools.contrast-checker.tips.tip1

Choose your text and background colors with contrast in mind from the beginning. Retrofitting accessibility is much harder than building it in from the start.

2

tools.contrast-checker.tips.tip2

Use icons, patterns, underlines, or labels alongside color to convey meaning. About 8% of men have some form of color blindness.

3

tools.contrast-checker.tips.tip3

Colors look different on monitors, phones, and in bright sunlight. Test your contrast ratios on actual devices, not just in your design tool.

4

tools.contrast-checker.tips.tip4

If your site supports dark mode, verify contrast ratios for both themes. A color pair that passes in light mode may fail in dark mode.

5

tools.contrast-checker.tips.tip5

Thin and light font weights reduce perceived contrast. If you use weights below 400, aim for a higher contrast ratio than the minimum.

6

tools.contrast-checker.tips.tip6

Hover, focus, and active states often use different colors. Make sure all interactive states meet contrast requirements, not just the default.

مقارنة أدوات فحص التباين

FeatureKleapWebAIMCoolorsAdobe Color
PriceFreeFreeFreemiumFree (with Adobe account)
Real-time PreviewYes, live text on backgroundYes, basicYesYes
Nearest Accessible ColorYes, auto-suggestedNoNoPartial
WCAG Levels TestedAA + AAA (normal + large)AA + AAAAA onlyAA + AAA
Built-in Website BuilderYes, AI-poweredNoNoNo
Swap Colors ButtonYesNoNoNo
Random Accessible PairYesNoNoNo

أسئلة شائعة حول تباين الألوان

tools.contrast-checker.faq.q1+
A color contrast ratio is a numerical value that represents the difference in luminance (perceived brightness) between two colors. It ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). The ratio is calculated using the WCAG 2.1 relative luminance formula, which accounts for how the human eye perceives different wavelengths of light.
tools.contrast-checker.faq.q2+
For WCAG 2.1 Level AA compliance (the most widely required standard), normal body text needs at least 4.5:1 contrast, and large text (18pt+ or 14pt+ bold) needs at least 3:1. For Level AAA (the highest standard), normal text needs 7:1 and large text needs 4.5:1. Most legal accessibility requirements reference Level AA.
tools.contrast-checker.faq.q3+
Large text in WCAG is defined as text that is at least 18 points (24 CSS pixels) or 14 points bold (approximately 18.66 CSS pixels bold). This corresponds to roughly heading-sized text. Large text has lower contrast requirements because its larger size makes it inherently easier to read.
tools.contrast-checker.faq.q4+
Yes, WCAG 2.1 Success Criterion 1.4.11 requires that UI components (like icons, form borders, and focus indicators) and graphical objects have at least 3:1 contrast against adjacent colors. This is separate from the text contrast requirements and was introduced in WCAG 2.1.
tools.contrast-checker.faq.q5+
The contrast ratio uses the relative luminance formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. Relative luminance is calculated by converting sRGB values to linear light (using gamma correction) and weighting them: 0.2126*R + 0.7152*G + 0.0722*B. The weights reflect human eye sensitivity — we perceive green as brightest.
tools.contrast-checker.faq.q6+
WCAG AA is the standard referenced by most accessibility laws worldwide, including the ADA (US), EAA (EU), and EN 301 549 (Europe). For most websites and apps, AA compliance is both legally sufficient and provides good readability. AAA is recommended for government sites, healthcare, and education, but is not typically required by law.
tools.contrast-checker.faq.q7+
You have several options: slightly adjust the shade of your brand color (often a small lightness change is enough), use your brand color for decorative elements only and a high-contrast color for text, increase font size to qualify for the large text threshold, or add a semi-transparent overlay behind text placed on colored backgrounds. Our tool suggests the nearest accessible color automatically.
tools.contrast-checker.faq.q8+
Absolutely. The same WCAG contrast requirements apply regardless of the color scheme. In fact, dark mode introduces unique challenges: pure white (#FFFFFF) text on a very dark background can cause halation (a glowing effect) for users with astigmatism. A slightly off-white (#E0E0E0 to #F0F0F0) on a dark gray (#1A1A1A to #2D2D2D) often provides better readability while still meeting AA standards.
tools.contrast-checker.faq.q9+
High contrast ratios help colorblind users significantly, but contrast alone is not sufficient. WCAG also requires that color is not the sole means of conveying information (1.4.1). For example, don't use only red/green to indicate error/success — add icons or text labels. The contrast ratio formula accounts for luminance, not hue, so it helps across all types of color blindness.
tools.contrast-checker.faq.q10+
You can use browser DevTools (Chrome's Lighthouse audit includes contrast checks), browser extensions like axe or WAVE, or paste your exact HEX/RGB values into this tool. For comprehensive testing, use automated tools like Lighthouse for a full-page scan, then manually verify any flagged elements. Remember to test hover states, focus styles, and placeholder text — these are commonly missed.

ابنِ موقعًا سهل الوصول مع Kleap

Kleap يضمن أن موقعك يلتزم بمعايير إمكانية الوصول تلقائيًا

ابدأ مجانًا

Related Free Tools

CSS Gradient Generator

Color Picker

Color Palette Generator

Button Generator

فاحص تباين الألوان - WCAG 2.1 | Kleap