عملیاتی
بررسی کنتراست رنگ
تبلیغات
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 انتخاب کنید.
شما می توانید:
- آلفا را تنظیم کنید تا میزان شفافیت رنگ پیش زمینه تغییر کند.
- از اسلایدر Lightness استفاده کنید تا رنگ روشن تر یا تیره تر به نظر برسد.
ابزار ما سپس نسبت کنتراست را محاسبه کرده و آن را با دستورالعمل های WCAG مقایسه می کند:
- سطح AA WCAG 2.0
- حداقل ۴.۵:۱ برای متن اصلی معمولی
- حداقل ۳:۱ برای متن بزرگ
- WCAG 2.1 (رابط کاربری و گرافیک)
- حداقل ۳:۱ برای آیکون ها، حاشیه ها و سایر اجزای رابط کاربری
- سطح AAA WCAG
- حداقل ۷:۱ برای متن معمولی
- حداقل نسبت ۴.۵:۱ برای متن بزرگ
متن بزرگ به معنای یکی از موارد زیر است:
- ۱۴ امتیاز (حدود ۱۸.۶۶ پیکسل) و بولد، یا
- ۱۸ امتیاز (حدود پیکس) یا بیشتر
می توانید از قطره چکان در Color Picker برای گرفتن رنگ های دقیق از هر چیزی روی صفحه استفاده کنید. این کار تست طراحی ها، دکمه ها یا پس زمینه های واقعی را آسان می کند.
برای لینک هایی که فقط به رنگ تکیه دارند تا برجسته شوند، از بررسی کننده کنتراست رنگ ما استفاده کنید تا مطمئن شوید استانداردهای دسترسی پذیری را رعایت کرده و برای همه آسان برای خواندن باقی می مانند.