Kuntrast tal-kuluri għal test, buttuni u ikoni

Għaliex il-kuntrast huwa importanti

Test ċar jiswa l-qarrejja. Nies b'vista baxxa, qarrejja ikbar fl-età u kull min iħares lejn mowbajl f'dawl qawwi jeħtieġu differenza ċara bejn it-test u l-isfond. Għalhekk il-Web Content Accessibility Guidelines (WCAG) tal-W3C jistabbilixxu valuri minimi għat-test, għall-kontrolli bħal buttuni u oqsma tal-input, u għall-ikoni u l-grafika. Jistgħu jitkejlu u jiġu ċċekkjati qabel it-tnedija.

Kif jaħdem il-proporzjon tal-kuntrast

Il-proporzjon tal-kuntrast iqabbel kemm huma qawwija fid-dawl żewġ kuluri. Il-WCAG ma tħarisx lejn it-ton tal-kulur iżda lejn il-luminanza relattiva: valur bejn 0 għall-iktar iswed skur u 1 għall-iktar abjad ċar. It-tliet kanali aħmar, aħdar u blu jiġu kkonvertiti u ppeżati: l-aħdar jgħodd l-iktar, l-aħmar inqas u l-blu l-inqas. Il-proporzjon huwa (L1 + 0.05) / (L2 + 0.05), fejn L1 hija l-luminanza tal-kulur l-iktar ċar. Ir-riżultat ikun bejn 1:1 għal żewġ kuluri ugwali u 21:1 għal iswed fuq abjad.

Żewġ regoli mill-W3C huma importanti fil-prattika. L-ewwel, il-valuri ma jiġux arrotondati: proporzjon ta' 4.499:1 ma jilħaqx il-limitu ta' 4.5:1. It-tieni, il-kuntrast jitkejjel kontra l-isfond li huwa ssettjat għat-test. Jekk paġna tissettja biss kulur tat-test u l-ebda kulur tal-isfond, il-W3C jgħodd dan bħala falliment, għax l-isfond awtomatiku tal-viżitatur mhuwiex magħruf. Dejjem issettja ż-żewġ kuluri flimkien.

It-tliet kriterji ta' suċċess

• 1.4.3 Contrast (Minimum), livell AA: it-test u l-istampi tat-test jeħtieġu mill-inqas 4.5:1, it-test kbir mill-inqas 3:1.
• 1.4.6 Contrast (Enhanced), livell AAA: it-test jeħtieġ mill-inqas 7:1, it-test kbir mill-inqas 4.5:1. Huwa l-livell l-iktar strett u jgħin l-iktar b'testi twal.
• 1.4.11 Non-text Contrast, livell AA: mill-inqas 3:1 kontra l-kuluri ta' ħdejh, għal kull ħaġa li jeħtieġ tara biex tagħraf kontroll u l-istat tiegħu (pereżempju l-bordura ta' input jew indikatur tal-focus) u għall-partijiet tal-grafika li jeħtieġ biex tifhem il-kontenut, bħal ikoni jew linji f'chart.

X'jgħodd bħala test kbir

Test kbir huwa mill-inqas 18-il punt, jew mill-inqas 14-il punt f'tipa grassa. Il-W3C jikkonverti dan għal madwar 24 pixel u madwar 18.5 pixel f'tipa grassa. It-test kbir jista' jkollu inqas kuntrast għax l-ittri huma ikbar u l-istrixxi tagħhom usa'. Oqgħod attent b'tipi rqaq: skont il-W3C, l-anti-aliasing jista' jagħmel tipi rqaq jew mhux tas-soltu jidhru iktar ċari mill-kulur definit tagħhom. Jirrakkomanda tipi eħxen jew par ta' kuluri ferm 'il fuq mill-minimu.

X'mhux meħtieġ li jgħaddi

• Komponenti inattivi, bħal buttuna diżattivata.
• Dekorazzjoni pura u test li ħadd ma jista' jara.
• Test li huwa parti minn logo jew isem ta' marka.
• Test inċidentali fi stampa b'kontenut ieħor sinifikanti, bħal sinjal tat-triq f'ritratt.

Żbalji komuni

• Griż ċar fuq abjad. Il-griż għad-dati, għall-captions jew għat-test sekondarju spiss ikun ċar wisq: #999999 fuq abjad jilħaq biss 2.84:1. L-iktar griż pur ċar li jgħaddi AA għal test normali fuq abjad huwa #767676 b'4.54:1.
• Test fuq stampi. Il-kuntrast jinbidel ma' kull parti tar-ritratt. Il-W3C jelenka stampi tal-isfond mingħajr biżżejjed kuntrast bħala falliment (F83). Poġġi t-test fuq erja solida, agħmel l-istampa warajh iktar skura jew poġġi t-test ħdejn l-istampa. Iċċekkja l-iktar post ċar wara t-test.
• Test tal-placeholder. In-nota griża f'qasam tal-input vojt hija test, u l-1.4.3 japplika għaliha. Griż ċar bħal #9ca3af fuq abjad jilħaq biss 2.53:1. Placeholder lanqas mhu sostitut għal tikketta viżibbli.
• Stati ta' hover u focus. Test li jidher jew jinbidel meta l-maws jgħaddi minn fuqu jew bil-focus tat-tastiera jrid jilħaq l-istess valuri. Effett ta' hover m'għandux ibaxxi l-kuntrast ta' kontroll jew idgħajjef l-indikatur tal-focus. Indikatur tal-focus li tiddisinja int stess jeħtieġ 3:1 kontra l-isfond ta' ħdejh.
• Test abjad fuq kuluri tal-marka qawwija. Buttuni oranġjo, sofor, ħodor ċari jew turkważ b'test abjad spiss ifallu: abjad fuq #ff6600 jilħaq 2.93:1.
• Borduri u ikoni ċari. Jekk il-bordura hija l-unika ħaġa li turi fejn hu qasam tal-input, teħtieġ 3:1: #cccccc fuq abjad għandu 1.60:1. Ikoni li jġorru tifsira mingħajr test, bħal vleġġa ta' dropdown jew ikona biex tagħlaq, jeħtieġu wkoll 3:1.
• Tiċċekkja tema waħda biss. Jekk is-sit tiegħek għandu dark mode, iċċekkja l-pari ta' kuluri tiegħu separatament. Kulur li jaħdem fuq abjad jista' jfalli fuq sfond skur.

Irranġa paletta tal-marka mingħajr ma titlef il-marka

1. 1Ikteb kull kulur bir-rwol tiegħu: test, sfond, aċċent jew buttuna, bordura. Ħafna problemi jibdew meta kulur wieħed jagħmel kull xogħol.
2. 2Żomm il-kulur tal-marka fejn ir-regoli huma iktar faċli biex tilħaqhom jew ma japplikawx: fil-logo, fuq erjas kbar, għad-dekorazzjoni u għall-intestaturi kbar.
3. 3Għat-test u għall-elementi żgħar, uża sfumatura iktar skura jew iktar ċara tal-istess ton. Jekk tinbidel biss id-dija, il-kulur jibqa' rikonoxxibbli: test abjad fuq #c74f00, oranġjo iktar skur, jilħaq 4.61:1.
4. 4Jew ibdel il-kulur tat-test minflok. Test skur fuq kulur tal-marka qawwi spiss jaħdem aħjar mill-abjad: #1a1a1a fuq #ff6600 jilħaq 5.92:1.
5. 5Iddefinixxi griż wieħed għat-test sekondarju li jgħaddi, pereżempju #767676 fuq abjad, u użah kullimkien minflok diversi griżi ċari.
6. 6Iċċekkja kull stat: normali, hover, focus, żball u dark mode. Issejvja l-kuluri finali bħala varjabbli fl-istyle sheet tiegħek, biex ħadd ma jerġa' jagħżel kulur ċar bl-idejn.

Iċċekkja l-kuluri tiegħek b'Do4U

Il-Verifika tal-kuntrast tal-kuluri tikkalkula dawn il-valuri għall-kuluri tiegħek stess. Iddaħħal il-kuluri tiegħek, wieħed f'kull linja, u tagħti lil kull wieħed rwol: text, background, accent (pereżempju buttuna) jew border. Il-kodiċi jiċċekkja kull par sensibbli kontra AA u AAA għal test normali u kbir u kontra 3:1 għal borduri, ikoni u erjas tal-buttuni, mingħajr ma jarrotonda 'l fuq. Għal kull par li jfalli, tieħu l-eqreb kulur li jgħaddi, darba iktar skur u darba iktar ċar, fl-istess ton. Do4U jibni wkoll paletta aġġustata, jerġa' jiċċekkjaha kollha kemm hi u jesportaha bħala CSS custom properties, SCSS jew JSON. Kollox jaħdem fil-kodiċi, mingħajr AI, u l-verifika hija b'xejn.

Il-verifika taf biss il-pari ta' kuluri li ddaħħal. Ma tistax tara d-daqsijiet tat-tipa, stampi wara t-test, trasparenza jew stati ta' hover u focus, għalhekk ittestja wkoll il-paġni lesti. Do4U jibni l-abbozz, int tiċċekkja u tiddeċiedi.