Brug høj farve kontrast til mere tilgængelig design

Webstandarder for farvekontrast

Farve kontrastforhold måler forskellen i kontrast mellem to farver. Jo højere værdien er, desto lettere er det at skelne objektet (tekst, billede, grafik) i forgrunden fra baggrunden.

Farver kan kontrast på mange forskellige måder, såsom i nuance, værdi og mætning. Farvekontrastforhold beregnes ved hjælp af en formel fra W3C, den største internationale standardorganisation for World Wide Web.

Det kan tage en værdi imellem 1: 1 (ingen kontrast overhovedet, Forgrunden og baggrunden har samme farve) og 21: 1 (den maksimale kontrast der eksisterer kun mellem sort og hvidt).

W3Cs seneste retningslinjer for Web Accessibility Accessibility (WCAG) 2.0 giver webudviklere og indholdsskabere benchmarks for minimum (niveau AA) og den forbedrede (Level AAA) -værdi af acceptabelt farvekontrastforhold.

Niveau AA kræver mindst 4,5: 1 forhold for almindelig tekst, og 3: 1 til stor tekst. Det er meget nemmere at læse stor tekst som undertekster, derfor har den brug for en lavere farvekontrast.

Hvis du vil nå niveau AAA, som er det forbedrede niveau, skal du designe dit farveskema med større omhu, som det mindst kræver 7: 1 kontrastforhold for normal tekst, og 4,5: 1 for store. Hvis en tekst er en del af et logo eller et mærke, er der ikke et minimumskrav til farvekontrast på enten WCAG-niveau.

Vi kan kun kalde en hjemmeside visuelt tilgængelig, hvis farve kontrastforhold mellem hvert forgrundsobjekt og dets baggrund når mindst niveau AA.

Fordele ved høj farve kontrastforhold

Ved at sikre bedre læsbarhed engagerer du ikke kun synshandicappede brugere, men også folk der læser dit indhold på små skærme f.eks. på en smartphone eller en smartwatch, blandt dårlige lysforhold, og på lavere kvalitet skærme.

Folk læser også hurtigere, når der er større kontrast mellem teksten og baggrunden, så det vil højst sandsynligt tage mere tid for dem at kede sig med indholdet af webstedet.

Hvis du er bekymret for at anvende højere kontrastforhold vil have en negativ indvirkning på æstetikken i dit design, skal du tjekke Contrast Rebellion webprojektet, som viser med egentlige eksempler, at det at holde fast i reglerne for høj kontrastforhold stadig kan resultere i attraktive og cool design.

Apps til kontrol af farvekontrast

Der er mange gode gratis værktøjer over hele nettet, der kan hjælpe designere med at kontrollere farvekontrastforholdet på deres hjemmeside.

Den nemmeste måde at teste dit design på for farvekontrast er at vælge hovedfarverne med enten Photoshop eller en egnet browserudvidelse som denne til Firefox, og kopiere værdierne til en af ​​appsne nedenfor.

Det vigtigste er at huske, at du altid har brug for Sammenlign forgrundsfarven som tekstfarve til det omkringliggende område (baggrundsfarve).

1. WebAim Color Contrast Checker

WebAim (Web Accessibility in Mind) er en organisation, der fremmer webtilgængelighed, der giver udviklere en simpel men pålidelig farvekontrastkontrollør blandt mange andre store tilgængelighed værktøjer som Wave, en generel tilgængelighed evalueringsapp, der kan hjælpe dig Vurder hurtigt dit websteds tilgængelighedsproblemer.

WebAims Color Contrast Checker fortæller dig hvis dine farver passerer WCAG AA og AAA testene, både for normale og store tekster.

2. Snook Color Contrast Check

Jonathan Snook, der i øjeblikket arbejder som lead front end-udvikler hos Shopify, har været vært for sit handy farvekontrastskontrolværktøj i over et årti. Snook's app giver dig mulighed for ændre HSL og RGB værdier af forgrunden og baggrundsfarve en efter en ved hjælp af bekvem rækkevidde glidere indtil du når et resultat, som er i overensstemmelse med WCAG 2.0 benchmarks.

CheckMyColours

CheckMyColours oprettet af Giovanni Scala giver dig mulighed for at kontrollere farvekontrastforholdet mellem alle forgrunds-baggrundsfarvekombinationer på en levende hjemmeside.

Det beregner lysstyrke kontrastforhold, lysstyrke forskel, og farveforskel, og giver dig en komplet rapport om resultaterne. CheckMyColours 'rapport kan betydeligt lette din forståelse af, hvordan du kan forbedre visuel tilgængelighed af dit websted.

Farveskema Designer

Color Scheme Designer er ikke særlig en farve kontrast checker, men et værktøj til designe komplette farveskemaer.

Vi indbefatter den i denne samling, fordi den har en funktion, der giver dig mulighed for at se, hvordan dit farveskema opfattes af personer med forskellige former for synshandicap. Du kan teste dine farver for fuldfarveblindhed, protanopi, deuteranopi og mange andre synsforstyrrelser. App'en har en nyere version kaldet Paletton, der muliggør en mere sofistikeret vision simulering (du kan også teste for ting som elendig LED display eller svag CRT display).

W3C giver dig også en enorm liste over værktøjer til webtilgængelighedsværktøjer, hvor du kan finde mange andre farvekontrastværktøjer som dette nyttige hjælpefunktionshjul.

Tips til oprettelse af visuelt tilgængelige websteder

Hvis du vil oprette en visuelt tilgængelig hjemmeside, er det altid en god ide at undgå at bruge farve alene for at formidle funktionalitet eller mening. Ikoner, der ændrer deres farve baseret på deres nuværende tilstand, er typiske eksempler på dette.

Hvis det er muligt, altid designe yderligere visuelle signaler der hjælper folk, der ser farver anderledes i forståelse af funktionalitet.

Glem aldrig at Vær særlig opmærksom på farvekontrast af knapper, links og menuer, som de er midler til navigation på dit websted. Hvis brugere ikke kan navigere let på dit websted, vil du hurtigt miste dem. Tilgængelige farver til call-to-action-knapper er også afgørende for gode omregningskurser.

Det er en god workflow-øvelse for at teste farvekontrastforhold så tidligt som muligt i designprocessen, da det vil være svært at overtale din klient til at ændre farveplanen for webstedet senere på designprocessen.

Læs nu: Praktisk tilgang til valg af hjemmeside-farveskema