Verifikatur tal-kuntrast tal-kuluri
Verifikatur b’xejn tal-kuntrast WCAG. Daħħal kulur tat-test u tal-isfond biex tikseb il-proporzjon tal-kuntrast, ir-riżultati AA/AAA u l-eqreb kulur li jgħaddi.
Riżultati WCAG 2.2
| AA | AAA | |
|---|---|---|
| Test normali | ||
| Test kbir | ||
| Komponenti tal-UI u grafika | – |
Previżjoni
Test normali (16 px). Il-volpi l-kafe malajr taqbeż il-kelb għażżien.
Test kbir (24 px)
Test kbir grassett (18.66 px grassett)
Suġġerimenti
Kif tuża l-verifikatur tal-kuntrast
- Daħħal il-Kulur tat-test u l-Kulur tal-isfond. Uża l-kampjuni tal-kuluri jew ikteb kwalunkwe valur CSS fil-qasam: kodiċi HEX bħal
#595959,rgb(89 89 89),hsl(0 0% 35%)jew isem bħalnavy. - Il-Proporzjon tal-kuntrast jinbidel waqt li tikteb, minn 1:1 (l-ebda kuntrast) sa 21:1 (iswed fuq abjad).
- It-tabella tar-Riżultati WCAG 2.2 turi Għadda jew Falla għal Test normali, Test kbir u Komponenti tal-UI u grafika, fil-livelli AA u AAA.
- Iċċekkja l-Previżjoni: turi test normali, test kbir, test kbir grassett, kontorn ta’ buttuna u ikona fiż-żewġ kuluri tiegħek.
- Jekk livell jfalli, agħżel Mira taħt Suġġerimenti. L-għodda tipproponi l-L-eqreb kulur tat-test li jgħaddi u l-L-eqreb kulur tal-isfond li jgħaddi. Ikklikkja Uża biex tapplika wieħed. Biddel il-kuluri jbiddel it-test mal-isfond.
Kollox jiġi kkalkulat fil-brawżer tiegħek; xejn ma jintbagħat imkien.
Kif jiġi kkalkulat il-proporzjon tal-kuntrast
WCAG 2.x tiddefinixxi l-proporzjon bħala (L1 + 0.05) / (L2 + 0.05), fejn L1 hija l-luminożità relattiva tal-kulur l-iktar ċar u L2 dik tal-iktar skur. Il-luminożità relattiva tiġi kkalkulata mill-kanali sRGB illinearizzati: kull kanal jiġi deħkodifikat bil-kurva tat-trasferiment sRGB, imbagħad L = 0.2126 R + 0.7152 G + 0.0722 B. L-aħdar jiżen l-iktar għax għajnejna huma l-iktar sensittivi għalih, u għalhekk aħdar pur jidher ferm iktar jleqq minn blu pur bl-istess “saħħa”.
Il-proporzjon qatt ma jiġi mrodd ’l fuq. #777777 fuq l-abjad jagħti madwar 4.48:1 u jfalli l-AA għal test normali, anke jekk jidher bħal “4.5”. Din l-għodda tnaqqas il-valur murija għal żewġ deċimali biex dak li tara jkun dak li jiċċekkja WCAG.
Jekk il-kulur tat-test huwa nofs trasparenti (per eżempju rgb(0 0 0 / 60%)), l-ewwel jitħallat mal-isfond, kif jitpinġi mill-brawżer. It-trasparenza fil-kulur tal-isfond tiġi injorata, għax ma nafux x’hemm wara l-paġna.
Il-livelli WCAG f’ħarsa
| Kontenut | AA | AAA |
|---|---|---|
| Test normali | 4.5:1 | 7:1 |
| Test kbir (24 px, jew 18.66 px grassett) | 3:1 | 4.5:1 |
| Komponenti tal-UI u grafika sinifikanti | 3:1 | – |
“Test kbir” ifisser mill-inqas 18 pt (24 pikseli CSS), jew 14 pt grassett (madwar 18.66 px). Il-logos u t-test purament dekorattiv m’għandhomx rekwiżit. Ir-regola tat-3:1 għall-komponenti tal-interface (kriterju ta’ suċċess 1.4.11) tapplika għall-borders tal-inputs u tal-buttuni, l-indikaturi tal-fokus, l-ikoni u l-linji tal-charts li l-utenti jeħtieġu jaraw.
Kif jaħdmu s-suġġerimenti
Il-kuluri suġġeriti jżommu t-tonalità u l-kroma tal-kulur tiegħek fl-ispazju OKLCH u jibdlu biss id-dawl tiegħu, skur jew ċar, sakemm jintlaħaq il-proporzjon fil-mira. L-għodda mbagħad tagħżel liema miż-żewġ direzzjonijiet hija viżwalment l-eqreb għall-kulur oriġinali tiegħek, imkejla f’OKLab. Ir-riżultat jerġa’ jiġi ċċekkjat wara r-rodd għal kodiċi HEX, allura tassew jgħaddi. Jekk l-ebda dawl ma jista’ jilħaq il-mira (7:1 kontra griż medju, per eżempju), l-għodda tgħid hekk.
Dwar APCA
APCA (Accessible Perceptual Contrast Algorithm) huwa mudell tal-kuntrast iktar ġdid ikkunsidrat għal WCAG 3 fil-futur. Jikkunsidra l-piż, id-daqs u l-polarità tal-font (skur fuq ċar kontra ċar fuq skur). Għadu abbozz u mhux rekwiżit legali jew normattiv, allura din l-għodda tirrapporta riżultati WCAG 2.x, li jibqgħu r-referenza għall-istandard Ewropew tal-aċċessibbiltà EN 301 549, Section 508 u l-biċċa l-kbira tal-liġijiet.
Mistoqsijiet frekwenti
Liema proporzjon tal-kuntrast għandi bżonn għat-test tal-ġisem?
Mill-inqas 4.5:1 għal-livell AA, li huwa l-livell li l-biċċa l-kbira tal-liġijiet u l-politiki jirrikjedu. Immira għal 7:1 (AAA) għal qari twil jew għal udjenzi b’viżjoni baxxa.
It-test abjad fuq il-kulur tal-brand tiegħi jgħaddi?
Daħħal l-abjad bħala l-kulur tat-test u l-kulur tal-brand bħala l-isfond. Ħafna blu, oranġjo u ħodor ta’ tonalità medja jilħqu 3:1 biss: tajjeb għal titli kbar u buttuni b’tikketti kbar, mhux għal test żgħir. Uża l-kulur tal-isfond suġġerit jekk għandek bżonn AA għal test normali.
Għaliex l-ordni tal-kuluri ma tbiddilx il-proporzjon?
Il-formula dejjem taqsam il-luminożità l-iktar ċara bl-iktar skura, allura skur fuq ċar u ċar fuq skur jagħtu l-istess proporzjon. Il-kuntrast perċepit xorta jista’ jvarja ftit, li huwa wieħed mill-kwistjonijiet li APCA tipprova tindirizza.
4.49:1 huwa biżżejjed biex jgħaddi?
Le. Il-limiti WCAG huma minimi strett: 4.49:1 jfalli l-AA għal test normali. Uża s-suġġeriment biex tikseb kulur li tassew jgħaddi.
Il-verifikatur tal-kuntrast jaħdem għal test placeholder jew diżattivat?
It-test placeholder irid jilħaq l-istess minimu ta’ 4.5:1 meta jgħaddi informazzjoni. Il-kontrolli diżattivati huma eżentati mir-rekwiżiti tal-kuntrast, imma stati diżattivati li jinqraw xorta jgħinu lill-utenti.
Għodod relatati
- Selettur tal-kuluri Selettur tal-kuluri online b’xejn. Agħżel kwalunkwe kulur u ikkopja minnufih il-kodiċijiet HEX, RGB, HSL, HSV u CMYK tiegħu, bil-kuntrast fuq l-abjad u l-iswed.
- Simulatur tal-għama tal-kuluri Simulatur b’xejn tal-għama tal-kuluri. Ara kwalunkwe immaġni b’protanopia, deuteranopia, tritanopia jew akromatopsja, maġenb xulxin jew b’slider.
- Ġeneratur tat-tints u tax-shades Iġġenera tints u shades ta’ kwalunkwe kulur b’passi ta’ 5, 10, 20 jew 25 %, imħallta f’OKLCH jew sRGB, u esportahom bħala varjabbli CSS jew Tailwind.