Back to Glossary

WCAG

WCAG

إرشادات إمكانية الوصول لمحتوى الويب (WCAG)

Intermediateaccessibility1 min read
web content accessibility guidelinesaccessibility standarda11y standardwcag 2.1wcag 2.2color contrast
Official DocsSign in to save & take notes

Definition

The international standard for web accessibility — defines criteria for making web content accessible to people with disabilities.

المعيار الدولي لإمكانية وصول الويب — يُعرّف معايير لجعل محتوى الويب قابلاً للوصول للأشخاص ذوي الإعاقات.

Why It Matters

Brand colors like brand-purple on white backgrounds in 404Fault must meet 4.5:1 contrast ratio. Lighthouse accessibility audit flags WCAG violations automatically.

ألوان العلامة التجارية مثل brand-purple على خلفيات بيضاء في 404Fault يجب أن تستوفي نسبة التباين 4.5:1. مراجعة Lighthouse لإمكانية الوصول تُشير إلى انتهاكات WCAG تلقائيًا.

Full Definition

WCAG (Web Content Accessibility Guidelines) defines three conformance levels: A (minimum), AA (standard target), AAA (advanced). Key criteria: color contrast ratio ≥ 4.5:1 for normal text (AA), keyboard navigation for all interactive elements, text alternatives for images, captions for video. Most organizations target WCAG 2.1 AA. Lighthouse audits check many WCAG criteria automatically.
WCAG تُعرّف ثلاثة مستويات مطابقة: A (الحد الأدنى)، AA (الهدف المعياري)، AAA (متقدم). معايير رئيسية: نسبة تباين الألوان ≥ 4.5:1 للنص العادي (AA)، التنقل بلوحة المفاتيح لجميع العناصر التفاعلية، بدائل نصية للصور.

Example Usage

“// WCAG AA requires 4.5:1 contrast ratio: // brand-purple (#8b5cf6) on white (#fff) = 4.7:1 ✅ // Light gray text on white = might fail ❌”

“// WCAG AA تتطلب نسبة تباين 4.5:1: // brand-purple (#8b5cf6) على أبيض (#fff) = 4.7:1 ✅ // نص رمادي فاتح على أبيض = قد يفشل ❌”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using WCAG:

1

Low contrast 'placeholder' or 'muted' text that looks elegant but fails AA

2

Icon-only buttons without aria-label — screen readers announce them as unlabelled

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using WCAG.

Explain:
1. What is WCAG and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Low contrast 'placeholder' or 'muted' text that looks elegant but fails AA, Icon-only buttons without aria-label — screen readers announce them as unlabelled
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account