Kui palju peaks "hover state" erinema tavalisest nupu olekust?

"Hover state" on lingi või nupu olek, kus kasutaja on hiirega selle kohal. Et linkidest ja nuppudest oleks kasu, st et neid vajutataks, peavad nad olema disainitud moel, et saab aru, et vajutades hakkab midagi koledat sündima. Nupud ja lingid peaksid olema arusaadavalt kujundatud, nupud päriselu nuppude moodi, lingid harjumuspäraselt linkide moodi. Lisavõimendusena võiks hiire kursor muutuda sobivaks, mis üldjuhul, ehk vaikimisi linkide ja nuppude puhul toimubki. Lisaks võiks aga muutuda ka nupu/lingi toon/värv, mis muudab elemendi veelgi arusaadavamalt interaktivseks.

Siin kirjutasin põgusalt WCAG nõuetest "focus state" ehk fookuses oleva elemendi kohta. Päris samalaadseid nõudeid "hover state" kohta pole. Aga kui juba ühe asjaga tuhnid reeglites, siis tekib sama küsimus ka teise asjaga tegeledes.

Kui palju oleks hea toonierinevus?

Nii palju kui ma asjast aru saan ja leida ei õnnestunud (sest kui oleks leida õnnestunud, siis ma oleks kirjutanud palju leida õnnestus), siis toonierinevusele WCAG nõudeid pole. Seega siin jääb disainer või arendaja, kes seni näpuga kasutuskõlbulikkuse piiblis järge ajanud, hätta.

Aga leidsin Stackowerflowst sellele ühe südant rahustava vastuse – lisa värvi HEX koodi kõikidele numbritele +2 ja saadki lollikindla tulemuse.

NB! Kui koodis on F, ehk HEX koodi viimane nö number, siis seda muuta ei saa.

P.S. Mulle endale tundub hoveri puhul tooni liigutamine tumedamas suunas kuidagi "õigem", seega võib ka lahutada olemasolevatest numbritest -2.

Siiski peab säilima üldine WCAG temaatika – värvi kontrastus 4.5:1 väikse teksti puhul (alla 24px) ja 3:1 suure teksti puhul ja nupu kontrastsus 3:1 ümbritsevaga võrreldes.