Share
Et av de viktigste aspektene ved å lage tilgjengelige nettsteder er at du har lesbar tekst. Og i sin tur er det å lage lesbar tekst som sikrer at du har tilstrekkelig fargekontrast mellom tekstfarger og bakgrunnsfarger.
For eksempel, ta en titt på den lilla teksten på hvit bakgrunn fra hjemmesiden til Tuts +. Dette kontrastnivået er alt bra:
Eksempel på et godt tekstkontrastforhold Men hvis vi gjør teksten lettere, kan vi raskt nå et punkt der kontrasten er for lav og det blir for vanskelig å lese:
Den samme teksten justert nå har et dårlig kontrastforhold Dette kan være et relativt rett fremtredende konsept, men å sikre nok kontrast i praksis kan faktisk være litt vanskelig. Noen ganger kan fargekontrast se fint ut i øyet, men i virkeligheten kan det ikke være opp til det samme. Så hvordan kan vi være sikre på at fargekontrastnivåene er tilgjengelighetsvennlige? Det er der Chrome Dev Tools kan hjelpe deg.
Denne opplæringen er en del av Web Accessibility: Den komplette læringsguiden, der vi har samlet en rekke opplæringsprogrammer, artikler, kurs og e-bøker, for å hjelpe deg å forstå web tilgjengelighet fra begynnelsen.
Du vil merke i de ovennevnte skjermbildene vi ser fargeplukkeren Chrome Dev Tools. Hvis du ser nøye ut, kan du også se at det er noen tilleggsinformasjon i den fargeplukeren, for eksempel visning av et kontrastforhold, som hjelper til med å gi tilbakemelding på fargevalg. Dette er en del av de nylig tilgjengelige tilgjengelighetsverktøyene i Chrome - la oss ta en titt og se hvordan alt fungerer.
Merk: Du kan se noen instruksjoner på nettet som sier at du må aktivere "Developer Experiments" for å bruke disse funksjonene for fargekontrastkontroll, men dette er ikke lenger tilfelle. Funksjonaliteten er nå bygget rett inn i både Chrome og Chrome.
Begynn med å åpne Chrome / Chrom Dev Dev-verktøy og velg et tekstelement i HTML-en din. Så, i Styles fanen, finn farge eiendom, og til høyre for det klikker du på den lille fargeprøven for å åpne plukkverktøyet.
Velg et tekstelement og klikk på det fargede torget for å starte I området jeg har markert med et rødt firkant under ser du kontrastforholdet på 5,00 dette tekstelementet har blitt gitt. Denne poengsummen kommer ved å oppdage fargen på bakgrunnselementet og sammenligne den med fargen på teksten.
Du vil også merke at det er to grønne flått ved siden av poengsummen, og dette kontrastforholdet er innenfor de aksepterte parametrene for tilgjengelighet.
Får kryss av godkjenning på kontrastforhold Denne grunnleggende poengsummen er nyttig, men for å få tilgang til alle fargekontrastverktøyene, klikker du nedover pekepilen til høyre for kontrastresultatet. Det vil vise et verktøytips merket Vis mer når du svinger over den.
Utvide verktøyene for å få mer informasjon om fargekontrast Med denne delen utvidet får vi ytterligere informasjon. Her ser du de ideelle kontrastpoengene du bør prøve å oppnå, med høyere tall som representerer sterkere kontrast. En poengsum på mellom 3,0 og 4,5 er representert som "AA" og anses som minimum, mens 4,5 eller høyere er representert som "AAA" og er ideell.
Nå ser vi kontrastpoengene for å sikte på, og en "sikker" linje på fargeplukkeren Du vil også legge merke til at når fargekontrastverktøyene er utvidet, vises en linje langs toppen av fargevalgeren. Dette er skillelinjen mellom tekstfarger som er minst "AA", og de som ikke oppfyller standarder.
Merk: Du kan komme ganske nær linjen og skifte fra en "AAA" -rating til "AA", som holder seg over en poengsum på 3,0, men går under 4,5:
Å komme nær linjen er fortsatt greit, men ikke ideelt Alt over linjen vil imidlertid bli merket med røde advarselssymboler for å fortelle deg at fargekombinasjonen utgjør et problem for tilgjengelighet:
Kryss linjen og miste AA / AAA kontrast vurdering Du kan også skifte alfa-skyveknappen, som befinner seg under nyanse-skyveknappen, og den "sikre" linjen vil skifte til kontoen for økt gjennomsiktighet:
Flytting av alfa-glidebryteren beveger også "sikker" linjen En annen ting å være klar over er at siden av linjen du vil at tekstfargen din skal falle på, kan invertere avhengig av fargen på bakgrunnen. Hvis teksten din er på en mørk bakgrunn, vil du at fargen på teksten skal vises ovenfor køen. Hvis teksten din er på en lys bakgrunn, skal faren falle under køen.
Nedenfor ser vi et eksempel på denne inversjonen, med en mørk bakgrunn i det venstre bildet og en lys bakgrunn i riktig bilde. Legg merke til at det også er en forhåndsvisning av teksten og bakgrunnsfargene sammen, se etter Aa inne i en sirkel, under Vis mer bytte om:
På venstre side bør lyse tekst på en mørk bakgrunn ha fargen over linjen. Til høyre skal mørk farget tekst på en lys bakgrunn ha fargen under linjen. Disse verktøyene for fargekontrast i Chrome og Chromium gjør det betydelig lettere å sikre lesbarhet under designprosessen. Alt vi trenger å gjøre er en rask sjekk på hver av våre tekstfarger, bruk fargeplukkeren til å justere om nødvendig, og integrer de nye fargene tilbake i vår kode.
Det er et skritt nærmere å gjøre nettet et flott sted for alle!
Accentsconagua