Rəng kontrastı yoxlayıcısı (WCAG)
Mətn və fon rəngini seçin — alət WCAG kontrast nisbətini hesablayır, adi və böyük mətn, həmçinin interfeys elementləri üçün AA və AAA şərtlərinin ödənildiyini göstərir, nümunədə real mətn, düymə və ikon çıxarır.
.text {
color: #2563eb;
background-color: #ffffff;
}
/* contrast 5.17:1 — AA ✓ AAA ✗ */Necə istifadə etmək olar
- Mətn və fon rəngini rəng seçicisi ilə seçin və ya HEX dəyəri yazın, məsələn,
#2563ebya da#fff. - Kontrast nisbətini və AA / AAA nəticələrini oxuyun: yaşıl — cüt həddi keçir, qırmızı — keçmir.
- Nümunəyə baxın: seçdiyiniz fonda adi mətn, böyük mətn, düymə və ikon. Cüt keçmirsə, «Təklif et» düyməsini basın — alət mətn rəngini açıqlığına görə dəyişib
4.5:1-ə çatdırır. - «Yerini dəyiş» ilə tərs cütü yoxlayın, sonra nəticə barədə şərhi olan hazır
.textqaydasını kopyalayın.
Bu necə işləyir
Kontrast necə hesablanır
WCAG 2.x iki rəngin nisbi parlaqlığını müqayisə edir. Əvvəlcə hər sRGB kanalı xətti işığa çevrilir, sonra kanallar gözün onları nə qədər parlaq qəbul etməsinə görə çəkilənir. Nisbət 1:1 (eyni rəng) ilə 21:1 (ağ üzərində qara) arasında dəyişir.
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
ratio = (L1 + 0.05) / (L2 + 0.05) /* L1 daha açıq rəngdir */AA, AAA və hədlər
AA səviyyəsi adi mətn üçün 4.5:1, böyük mətn üçün (24px və yuxarı, qalındırsa 18.66px və yuxarı) 3:1 tələb edir. AAA səviyyəsində bu rəqəmlər 7:1 və 4.5:1 olur. İnterfeys komponentləri və qrafika — input haşiyələri, ikonlar, diaqram xətləri — WCAG 1.4.11 Non-text Contrast üzrə 3:1 tələb edir. Əksər saytlar üçün real hədəf AA-dır.
WCAG 2.2, APCA və WCAG 3
WCAG 2.2 hazırda qüvvədə olan W3C standartıdır, kontrast meyarları (1.4.3, 1.4.6, 1.4.11) isə WCAG 2.1 ilə eynidir. WCAG 3.0 hələ işçi layihədir; onun üçün müzakirə olunan APCA alqoritmi isə heç bir nəşr olunmuş standartın tərkibində deyil. Audit və hüquqi tələblər WCAG 2 kontrast nisbətinə söykənməyə davam edir — bu alət məhz onu hesablayır.
Keçməyən cütü necə düzəltmək olar
Mətni tündləşdirin və ya fonu açın (tünd mövzuda isə əksinə). «Təklif et» düyməsi bunu HSL-də edir: çalar və doyuruğu saxlayır, açıqlığı 4.5:1-ə çatan ən yaxın dəyərə çəkir. Müasir CSS-də oklch() rəngin L kanalı açıqlığı HSL-dən daha bərabər dəyişir, ona görə əlçatan palitralar üçün rahat əsasdır.
Tez-tez verilən suallar
Əsas mətn üçün hansı kontrast nisbəti lazımdır?
AA üçün ən azı 4.5:1, AAA üçün 7:1. Böyük mətn üçün AA-da 3:1, AAA-da 4.5:1 kifayətdir. Kiçik və ya nazik şriftlərdə daha yüksək nisbət seçin.
Hansı mətn böyük sayılır?
Adi qalınlıqda ən azı 18pt (24px) və ya qalın şriftdə ən azı 14pt (təxminən 18.66px) olan mətn. Bundan kiçik hər şey adi mətn sayılır.
Loqo, deaktiv düymə və placeholder də keçməlidir?
Loqotiplər, bəzək elementləri və qeyri-aktiv (disabled) komponentlər istisnadır. Placeholder isə insanların oxuduğu mətndir, ona görə o da 4.5:1 şərtinə cavab verməlidir.
Qradiyent, şəkil və ya yarımşəffaf rəng üzərindəki mətni yoxlamaq olarmı?
Alət iki bərk rəngi müqayisə edir. Yarımşəffaf rəng üçün əvvəlcə fonla qarışdıqdan sonra alınan rəngi tapın. Qradiyent və ya foto üçün kontrastı ən aşağı olan hissəni yoxlayın, yaxud mətnin arxasına bərk və ya qaraldılmış qat qoyun.
