WCAG colour contrast checker
تحقق مما إذا كانت ألوانك مقروءة ومتاحة للجميع.
اختبر ألوان المقدمة والخلفية، عاين النتيجة، افحص WCAG AA وAAA ثم انسخ قيم HEX أو متغيرات CSS نظيفة.
وضوح الألوان مهم.
This sample updates as you change the foreground and background colours.
التباين ratio
21.00
ناجح
ناجح
AA normal text · 4.5:1
ناجح
AA large text · 3:1
ناجح
AAA normal text · 7:1
ناجح
AAA large text · 4.5:1
نسخ the colour pairing
استخدم this in CSS, a design system, or a quick accessibility note.
:root {
--contrast-text: #111827;
--contrast-background: #FFFFFF;
}
Accessible أمثلة to try
Start from a real لوحة or a safe high-contrast pairing, then adjust it for your project.
What the score means
The higher the ratio, the easier the combination is to read for more people and more display conditions.
AA normal text
استخدم at least 4.5:1 for body copy, navigation, links, buttons and most interface text.
AA large text
Large text can pass at 3:1, but higher contrast usually still feels clearer and more professional.
AAA text
7:1 is the stronger target for long reading, critical information, accessibility-first products and dashboards.