شرح صفوف ومحتوى الفقرة
يفقد الإطار الخارجي فائدته الوظيفية تماماً إذا اختار المصمم درجة باهتة تذوب في خلفية الصفحة فلا يراها من يتنقل بمفتاح Tab عبر لوحة المفاتيح؛ فالحلقة الرمادية الفاتحة فوق خلفية بيضاء تكاد تختفي، كما تضيع الحلقة الكحلية فوق شريط علوي داكن.
احرص دائماً على اختبار تباين outline-color مع السطح المحيط بالعنصر: اعتمد درجات داكنة مشبعة مثل #1d4ed8 فوق الخلفيات الفاتحة، ودرجات مضيئة ساطعة مثل #fde047 فوق الأسطح الداكنة. جرّب الحالات الثلاث في المختبر التفاعلي والمحرر الحي أدناه:
CSS
.btn-on-light {
outline-style: solid;
outline-width: 3px;
outline-color: #1d4ed8;
}
.btn-on-dark {
outline-style: solid;
outline-width: 3px;
outline-color: #fde047;
}