Effektive designprinsipper for nettdesignere: Kontrast

Hvis du har tatt formelle kurs eller undervisning i design, kjenner du sannsynligvis allerede grunnleggende elementer i effektive designprinsipper, inkludert de fire kjente standardtektene: kontrast, repetisjon, justering og nærhet. Videre, hvis du har undersøkt disse standardene, kan du kanskje også huske et spesielt forkortelse knyttet til deres kombinerte innledende tegn; mange har imidlertid brukt alternativer som ikke er like nedverdigende, inkludert PARC og CARP. Disse fire designprinsippene er standardkunnskap for utskriftsdesignsamfunnet; faktisk er det flere bøker som kreves tekstmateriell for mange college-emner om emnet, inkludert design for ikke-designere, for eksempel "The Non-Designer's Design Book ( 3. utgave)", av Robin Williams.

I dette innlegget skal jeg gjennomgå designprinsippet for kontrast, ettersom det gjelder nettdesign med fokus på farger og hvordan man tester for fargekonformitet.

Kontrast

Fra et helt kreativt synspunkt oppstår kontrast når to eller flere beslektede elementer vises forskjellig, og jo større forskjellen er, desto større er kontrasten. Det viktige poenget med effektiv kontrast er å ta lignende elementer på en webside og transformere dem til unike enheter, seksjoner, sider eller containere, for eksempel. Noen av de vanligste måtene å lage kontrastelementer inkluderer å etablere forskjeller i attributtene deres, for eksempel farge, som ser ut til å være den mest populære teknikken i dag. Andre attributter inkluderer størrelse, form, tekstur, orientering, posisjon og bevegelse. To like elementer med større grad av kontrast tilsvarer imidlertid ikke alltid en visuelt tiltalende opplevelse.

Kanskje kan de beste eksemplene på bruk av kontrast demonstreres ved bruk av fargeverdier tilordnet tekst- og typografiske elementer på et nettsted. Forgrunnen farge å teste er selve teksten, og da er bakgrunnsfargen bare det - uansett hvilken bakgrunn teksten er lagd på toppen av, et bilde, en gradient eller RGBa-farge for den saks skyld.

Kontrast ved bruk av farger

Å bruke effektiv fargekontrast i webdesign er faktisk ganske viktig ikke bare for den estetiske verdien, men for tilgjengeligheten på nettet. Mange mennesker er fargeblinde eller svaksynte, og å sørge for at fargekontrasten på nettstedet ditt blir justert tilsvarende gir økt respons og tilgjengelighet. Å teste fargekontrast på nettstedet ditt er en god praksis; flere verktøy (se nedenfor) er tilgjengelige som gir indikasjonen på sidens luminanskontrastforhold. Typisk er et kontrastforhold på 4, 5: 1 eller høyere tilfredsstillende for å oppfylle W3C WCAG 2.0-retningslinjene.

Verktøy for kontroll av fargekontrast

Denne listen over verktøy for kontroll av fargekontrast er nyttige hjelpemidler for å sikre at nettstedet ditt har den rette blandingen av forgrunnen og bakgrunnsfargekontrasten. Flere verktøy vil sjekke balansen mellom både fargeforskjell og lysstyrkeforskjell og vil vise resultatene inkludert lysstyrkeforskjell, fargeforskjell, fargekonformitet, kontrastforhold og WCAG 2-samsvar fra AA til AAA-kompatibel.

Check My Colors er et verktøy levert av Giovanni Scala, og det brukes til å sjekke forgrunns- og bakgrunnsfargekombinasjoner av alle DOM-elementer på siden. Bare koble til nettadressen som skal testes, og kontrolløren vil avgjøre om DOM-elementene gir tilstrekkelig kontrast når de blir sett av noen som har fargeunderskudd. Alle testene som kjøres på Check My Colors, er basert på algoritmene foreslått av World Wide Web Consortium (W3C). Verktøyet vises nedenfor i figur B etter å ha sjekket DOM-elementene for et eksempel på et nettsted

Figur B

Fargekontrastkontroll av Jonathan Snook lar deg spesifisere en forgrunn og en bakgrunnsfarge og bestemme om de gir nok av kontrast "når de blir sett av noen som har fargeunderskudd eller når de vises på en svart / hvit skjerm" W3C. Figur C viser Snooks kontrastkontroll i aksjon.

Figur C

Luminosity Color Contrast Ratio Analyzer av Gez Lemon lar deg beregne lysstyrkenes kontrastforhold mellom en forgrunns- og bakgrunnsfarge ved å taste inn den heksadesimale fargekoden. Sitrons lysstyrkeanalysator er vist i figur D:

Figur D

WebAIM Fargekontrastkontroll etter Webtilgjengelighet i tankene, kan brukes til å justere fargen ved å mørkne eller lysne opprinnelige fargeforgrunner og bakgrunnsfarger i RGB-heksadesimal format til den oppfyller Double-A-standarden. Kontrolløren lar deg også gjøre forgrunnen og bakgrunnsfargene lysere eller mørkere for å teste deres kombinasjoner mot kravene. Du kan bruke fargevelgeren til å endre farger eller endre lysstyrke. WebAIM fargechecker som er i bruk vises i figur E nedenfor.

Figur E

I mitt neste innlegg om designprinsipper vil jeg gjennomgå prinsippet om repetisjon for webdesign.

© Copyright 2020 | mobilegn.com