تباين سهل الوصول
كل ألوان النص تجتاز معيار WCAG AA على الأبيض.
رموز الألوان
| HEX | RGB | HSL | CMYK | |
|---|---|---|---|---|
| hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) | |||
| hsl(0, 0%, 10%) | cmyk(0%, 0%, 0%, 90%) | |||
| hsl(213, 100%, 35%) | cmyk(100%, 55%, 0%, 30%) | |||
| hsl(349, 100%, 35%) | cmyk(0%, 100%, 82%, 31%) | |||
| hsl(152, 100%, 22%) | cmyk(100%, 0%, 46%, 56%) |
CSS
:root {
--accessible-contrast-1: #FFFFFF;
--accessible-contrast-2: #1A1A1A;
--accessible-contrast-3: #0050B3;
--accessible-contrast-4: #B00020;
--accessible-contrast-5: #00703C;
}كيف تعمل هذه الألوان معاً
تجمع درجات متقابلة على العجلة لتباين قوي وحيوي. طابعها العام بارد. يمتد نطاق الإضاءة 90 نقطة، وهذا يحدد مقدار التباين الممكن.
4 من أصل 10 أزواج ألوان تصل إلى تباين 4.5:1 المطلوب للنص العادي. أوضح زوج هو #FFFFFF على #1A1A1A (17.40:1).
تباين سهل الوصول — نص مقروء باستخدام أفضل زوج.
تطبيقات مقترحة
- سمات المواقع وأنظمة التصميم.
- سمات الواجهات: الأفتح للخلفيات والأغمق للنصوص.
- حزم الهوية والتصاميم الاجتماعية والعروض التقديمية.
الأسئلة الشائعة
كيف أستخدم لوحة تباين سهل الوصول؟
تضم لوحة تباين سهل الوصول عدد 5 ألوان. استخدم لوناً مهيمناً للمساحات الكبيرة ولوناً داعماً للعناصر الثانوية، والأكثر تشبعاً بقلة كلون مميز.
أي ألوان هذه اللوحة أنسب للنصوص؟
استخدم #FFFFFF على #1A1A1A؛ نسبة تباينهما 17.40:1.
هل يمكنني تنزيل هذه اللوحة؟
نعم، صدّرها بصيغة PNG أو SVG أو متغيرات CSS أو JSON أو نص عادي عبر الأزرار أعلى جدول الألوان.
لوحات أخرى
لوحة تحكم برمجية#0F172A #1E293B #6366F1 #10B981 #F8FAFCمدونة نظيفة#FFFFFF #F3F4F6 #374151 #111827 #2563EBمتجر دافئ#FFF7ED #FED7AA #EA580C #7C2D12 #1C1917أيام الجينز#F1F1EE #C8D3E0 #6C8EBF #2F4F7F #1A2238إطلاق منتج#111827 #4F46E5 #22D3EE #F9FAFB #F43F5Eحقول اللافندر#F3EEFC #E0D4F7 #C3B1E1 #9D8EC7 #6A5D8F