Праверка кантраснасці колераў 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-коды абнаўляюцца ў абодвух напрамках.
Тыповыя выкарыстанні
- Аўдыт вэб-старонак на WCAG ComplianceПраверце, ці вашай сайтай тэкставыя колеры адпавядаюць WCAG AA або AAA контрастным стандартам.
- Праверце комбінацыі коляраў брэндуТэстуйце вашую палітру коляраў брэнду пары, каб гарантаваць яны працуюць для даступнай дызайну.
- Тэстуйце палітры Дарк МодэСветлы тэкст на тёмных фонах можа яшчэ не атрымаць контрастнасць — праверце вашыя пары палітры.
- Комбінацыі коляраў для друкаваных матэрыялаўПлакаты, знакі і друкаваныя матэрыялы таксама трэбаюць чытаёмасці контрастнасці.
- Дызайн даступных колераў кнопакПераканайцеся, што CTA, кнопкі дзеянняў і спасылкі адпавядаюць WCAG на сваіх фонах.
Як гэта працуе
Праверка кантрасту працуе цалкам у вашым браўзеры з дапамогай алгарытму адноснай яркасці WCAG 2.1 — без бібліятэкі, без сервера, толькі ўласнаручна напісаная матэматыка, якая дакладна адпавядае спецыфікацыі. Кожны вынік абнаўляецца ў рэальным часе, калі вы ўводзіце тэкст ці абіраеце колер.
- 1Увод шаснаццатковага фармату і нармалізацыяПрымаюцца і нармалізуюцца ў поўныя трыпляты RGB як 3-значныя (#abc), так і 6-значныя (#aabbcc) шаснаццатковыя значэнні. Няправільны ўвод адхіляецца неадкладна, замест ціхага прызначэння чорнага па змаўчанні, так што замест уводзячага ў зман станоўчага выніку з'яўляецца чырвоная рамка.
- 2Вылічэнне яркасці WCAGКожны колер пераводзіцца ў адносную яркасць з дапамогай формулы WCAG 2.1: значэнні каналаў sRGB лінеарызуюцца з дапамогай кускова-лінейнай гама-карэкцыі (дзяленне на 12.92 ніжэй за 0.03928, узвядзенне ў ступень 2.4 вышэй), потым узважваюцца як 0.2126R + 0.7152G + 0.0722B.
- 3Каэфіцыент кантрасту і праверкі адпаведнасціКаэфіцыент кантрасту вылічваецца як (lighter + 0.05) / (darker + 0.05) і правяраецца ва ўсіх пяці парогах WCAG: звычайны тэкст AA (4.5:1), вялікі тэкст AA (3:1), звычайны тэкст AAA (7:1), вялікі тэкст AAA (4.5:1) і кампаненты інтэрфейсу (3:1). Вынікі абнаўляюцца пры кожным націску клавішы.
- 4Прапановы выпраўлення са захаваннем адценняКалі пара не праходзіць WCAG AA, інструмент шукае ў прасторы яркасці HSL — крокамі вонкі ад арыгінальнай яркасці ў абодвух напрамках — каб знайсці найбліжэйшы варыянт кожнага колеру, які праходзіць 4.5:1, захоўваючы тое ж адценне і насычанасць. API EyeDropper (Chromium) таксама даступны для ўзору любога колеру непасрэдна з вашага экрана.
Звязаныя інструменты
Сімулятар каляровай сляпаты
Глядзіце, як выглядае ваш дызайн для людзей з парушэннем каляровага зроку. Сімулюе пратанапію, дэйтэранапію, трытанапію, ахраматапсію і больш лёгкія аднаміі.
Якое ў мяне разрозненне экрана
Глядзіце разрозненне вашага экрана ў CSS і рэальных пікселях, памер акна, піксельнае суадносіны, глыбіню колеру, HDR, падтрымку дотыку і частату абнаўлення, і скапіруйце ўсё гэта.
Тэст на бітыя пікселі
Праверце ваш экран на наяўнасць бітых або завіслых пікселяў з дапамогай поўнаэкранных чорнага, белага, чырвонага, зялёнага, сіняга і шэрага колераў, а таксама дадатковага інструмента для выпраўлення завіслых пікселяў.