أداة إمكانية الوصول
مدقق تباين
الألوان
تأكد من أن توافق ألوانك يلبي معايير إمكانية الوصول WCAG 2.1. احصل على اقتراحات فورية وصدرها كـ Design Tokens بكل سهولة.
لون النص
rgb(30, 41, 59)
لون الخلفية
rgb(255, 255, 255)
تفاصيل لون النص
HSL217° 33% 17%
Luminance0.0218
RGB30, 41, 59
Hex#1E293B
تفاصيل لون الخلفية
HSL0° 0% 100%
Luminance1.0000
RGB255, 255, 255
Hex#FFFFFF
14.6:1
نسبة التباين
1:121:1
نصوص الفقرات، التسميات، الأوصاف
AA
عادي
ناجح
4.5:1
عناوين 18px+، أو 14px+ عريض
AA
كبير
ناجح
3:1
معيار قراءة محسّن للوضوح العالي
AAA
عادي
ناجح
7:1
نصوص كبيرة بأعلى معايير الوضوح
AAA
كبير
ناجح
4.5:1
معاينة حية
نص توضيحي — 11px / 600
نص الفقرة — 14px / 400. هذا النص هو مثال لمعاينة شكل الفقرات لتتأكد من وضوح وسهولة القراءة للمستخدمين وفقاً لدرجة التباين الحالية.
عنوان فرعي — 18px / 600
عنوان رئيسي — 30px / 800
زر تفاعليرابط نصي
/* TAG Studio — Color Contrast Tokens */
/* Contrast Ratio: 14.63:1 */
--color-foreground: #1E293B;
--color-foreground-rgb: 30, 41, 59;
--color-foreground-hsl: 217 33% 17%;
--color-background: #FFFFFF;
--color-background-rgb: 255, 255, 255;
--color-background-hsl: 0 0% 100%;
--contrast-ratio: 14.63;
--wcag-aa-normal: pass;
--wcag-aa-large: pass;
--wcag-aaa-normal: pass;
--wcag-aaa-large: pass;
/* Contrast Ratio: 14.63:1 */
--color-foreground: #1E293B;
--color-foreground-rgb: 30, 41, 59;
--color-foreground-hsl: 217 33% 17%;
--color-background: #FFFFFF;
--color-background-rgb: 255, 255, 255;
--color-background-hsl: 0 0% 100%;
--contrast-ratio: 14.63;
--wcag-aa-normal: pass;
--wcag-aa-large: pass;
--wcag-aaa-normal: pass;
--wcag-aaa-large: pass;