ترکیب رنگ های خود را در زیر وارد کنید تا آنها را با بررسی کنتراست رنگ ما آزمایش کنید و فوراً ببینید که آیا استانداردهای دسترسی را برآورده می کنند یا خیر.
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
21.00:1
WCAG Compliance
Normal Text
✓ AA Pass
✓ AAA Pass
Large Text (18pt+ or 14pt+ bold)
✓ AA Pass
✓ AAA Pass
UI Components & Graphics
✓ AA Pass
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
Black on White
White on Blue
White on Dark Gray
بررسی کنتراست رنگ ما چگونه کار می کند
رنگ‌های پیش‌زمینه و پس‌زمینه خود را با استفاده از مقادیر هگز RGB وارد کنید یا مستقیماً با Color Picker انتخاب کنید.
- Alpha را تنظیم کنید تا میزان شفافیت رنگ پیش زمینه را تغییر دهید.
- از نوار لغزنده Lightness استفاده کنید تا رنگ روشن تر یا تیره تر به نظر برسد.
سپس ابزار ما نسبت کنتراست را محاسبه می‌کند و آن را بر اساس دستورالعمل‌های WCAG بررسی می‌کند:
- WCAG 2.0 سطح AA
- حداقل 4.5:1 برای نوشتار متن معمولی
- حداقل 3:1 برای متن بزرگ
- WCAG 2.1 (UI و گرافیک)
- حداقل 3:1 برای نمادها، حاشیه‌ها و سایر اجزای رابط
- WCAG سطح AAA
- حداقل 7:1 برای متن معمولی
- حداقل 4.5:1 برای متن بزرگ
متن بزرگ به این معنی است:
- 14 نقطه (حدود 18.66 پیکسل) و پررنگ، یا
- 18 نقطه (حدود px) یا بزرگتر
می توانید از قطره چشم در Color Picker برای گرفتن رنگ های دقیق از هر چیزی روی صفحه نمایش خود استفاده کنید.
برای متمایز شدن پیوندهایی که تنها به رنگ متکی هستند، از بررسی کنتراست رنگ ما استفاده کنید تا مطمئن شوید که استانداردهای دسترس‌پذیری را برآورده می‌کنند و خواندن آنها برای همه آسان است.