WCAG өнгөний харьцааны шалгагч — үнэгүй
Хоёр өнгө хүртээмжийн WCAG AA болон AAA харьцааны стандартыг хангаж байгааг шалгах. Олон текстийн хэмжээнд шууд урьдчилан харалт бөгөөд харьцаа доогуур байвал автоматаар санал болгодог.
Том гарчгийн текст
Дунд хэмжээний үндсэн текст (18px) унших болон агуулгад зориулсан.
Хэвийн үндсэн текст (16px) параграфт зориулсан.
Жижиг үндсэн текст (14px) тайлбар болон мета мэдээлэлд зориулсан.
Контрастын харьцаа
4.5:1 шаардлагатай · Таны утга 14.63:1
3.0:1 шаардлагатай · Таны утга 14.63:1
7.0:1 шаардлагатай · Таны утга 14.63:1
4.5:1 шаардлагатай · Таны утга 14.63:1
3.0:1 шаардлагатай · Таны утга 14.63:1
Хурдан урьдчилсан тохиргоо
WCAG 2.1 контрастын удирдамжид үндэслэсэн. Том текст = 18pt (24px) хэвийн эсвэл 14pt (18.66px) тод. Hex кодууд хоёр чиглэлд шинэчлэгддэг: hex бичих эсвэл өнгө сонгох, хоёр оролт синхрончлогдсон хэвээр байна.
Түгээмэл хэрэглээ
- Вэб хуудсуудыг WCAG Compliance-ийн хувьд аудит хийхТаны сайтын текстийн өнгө WCAG AA эсвэл AAA контрастын стандартыг сайн ашиглаж болохуйц эсэхийг баталгаажуулах.
- Брэндийн өнгөний хосуудыг баталгаажуулахТаны брэндийн өнгөний палитра хосуудыг сайн ашиглаж болохуйц дизайнын хувьд сайн ажилладаг эсэхийг сорих.
- Бараан режимийн палитруудыг сорихХөлөг текст цагаан фонд дээр сүүлийн үйл ажиллагаа адилхан контрастаа сохраах боломжгүй — таны бараан режимийн палитра хосуудыг баталгаажуулах.
- Хэвлэл материалын хувьд өнгөний хосПлакатууд, тэмдэг, ба хэвлэл материалуудыг мөн оруулдаг унших боломжтой контраст — ялангуяа хэдэн нас барьсан үзэгчдийн хувьд.
- Нэвтрэх боломжтой товчноо өнгө эсгүүрлэхҮйлдэл товчнуу, сонгож авах товчнуу болон холбоос WCAG сонгосон фонгоо сувчихан байгаа эсэхийг шалгаарай.
Хэрхэн ажилладаг
Ялгаралт шалгах нь WCAG 2.1 харьцангуй гэрэлтэлтийн алгоритм ашиглан бүхэлдээ таны хөтчид ажилладаг — номын сан, сервер хамааралгүй, зөвхөн тодорхойлолтыг яг дагадаг гараар бичсэн математик. Үр дүн бүр бичих эсвэл өнгө сонгох тутамд бодит цагт шинэчлэгддэг.
- 1Hex оролт, нормалчлал3-цифр (#abc), 6-цифр (#aabbcc) hex утга хоёулаа хүлээн авагдаж бүрэн RGB гурвал болж нормалчлагддаг. Хүчингүй оролт чимээгүйхэн хар өнгө болж хувирахын оронд шууд татгалзагддаг тул буруу тэнцсэн үр дүнгийн оронд улаан хүрээ гарч ирдэг.
- 2WCAG гэрэлтэлтийн тооцоололӨнгө бүр WCAG 2.1 томьёо ашиглан харьцангуй гэрэлтэлт рүү хөрвүүлэгддэг: sRGB суваг утга хэсэгчилсэн gamma засварлалтаар шугамжуулагддаг (0.03928-аас доогуур бол 12.92-д хуваах, дээгүүр бол 2.4-т зэрэг өргөх), дараа нь 0.2126R + 0.7152G + 0.0722B гэж жинлэгддэг.
- 3Ялгаралтын харьцаа, нийцлийн шалгалтЯлгаралтын харьцаа (гэрэлтэй + 0.05) / (харанхуй + 0.05) гэж тооцоологдож бүх таван WCAG босготой харьцуулагддаг: AA энгийн текст (4.5:1), AA том текст (3:1), AAA энгийн текст (7:1), AAA том текст (4.5:1), UI бүрэлдэхүүн (3:1). Үр дүн товшилт бүрт шинэчлэгддэг.
- 4Тон-хадгалах засварын саналуудХос WCAG AA-д тэнцээгүй үед хэрэгсэл HSL гэрэлтэлтийн орон зайг эх гэрэлтэлтээс хоёр чиглэлд гадагш алхаж хайж, ижил тон, ханалттай хэвээр 4.5:1-д тэнцэх өнгө бүрийн хамгийн ойрхон хувилбарыг олдог. EyeDropper API (Chromium) ч мөн дэлгэцээс шууд ямар ч өнгийг сорьцлохоор боломжтой.
Холбоотой хэрэгслүүд
Өнгөт харааны дутагдлын симулятор
Дизайныг өнгөт харааны дутагдалтай хүмүүст хэрхэн харагдахыг харах. Протанопи, дейтеранопи, тританопи, ахроматопси болон хөнгөн аномалиудыг симуляцлана.
Миний дэлгэцийн нягтрал хэд вэ
Дэлгэцийн нягтралаа CSS болон бодит пикселээр харж, цонхны хэмжээ, пикселийн харьцаа, өнгөний гүн, HDR, хүрэлтийн дэмжлэг, шинэчлэгдэх хурдыг мэдэж, бүгдийг нь хуулж аваарай.
Гэмтэлтэй пиксел шалгагч
Дэлгэцээ бүхэлд нь хар, цагаан, улаан, ногоон, цэнхэр, саарал өнгөөр дүүргэж, үхсэн эсвэл гацсан пикселийг шалгах, мөн нэмэлтээр гацсан пиксел сэргээгчийг ашиглаарай.