Farve, mønster og direkte etiketter
Kod serier, så farveblinde brugere kan læse dem.
Farve, mønster og direkte etiketter er en gratis Web Accessibility Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Web Accessibility Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Farver alene snyder nogle øjne
Omkring 1 ud af 12 mænd kan ikke pålideligt skelne mellem bestemte farver. Hvis dit diagram siger, at rød betyder tab, ser disse brugere slet ingen forskel. 🎨
Reglen om to kanaler
Kod hver serie med en sekundær kanal ud over farven: et mønster, en form eller en direkte etiket. Så bliver farven en bonus i stedet for det eneste signal.
Mønstre udfylder forskellen
Giv søjler og områder forskellige mønstre som striber eller prikker. Fyldet adskiller serierne, selv i ren gråskala.
<rect fill="url(#stripes)" />Forskellige former til linjediagrammer
Markér punkter i linjediagrammer med forskellige former: cirkler, firkanter og trekanter. Hver linje kan stadig skelnes uden at være afhængig af farvetonen.
Direkte etiketter slår signaturforklaringer
En separat signaturforklaring tvinger brugeren til at matche farver. Placér etiketten direkte på linjen eller udsnittet, så navnet står ved siden af dataene.
Vælg en farveblindvenlig palet
Nogle farvepar, f.eks. rød og grøn, er de sværeste at skelne fra hinanden. En farveblindvenlig palet som Okabe-Ito undgår disse sammenfald.
Kontrast er stadig vigtig her
Nærtliggende serier og deres tekstetiketter har brug for reel kontrast. WCAG kræver mindst 3 til 1 mellem betydningsfulde grafiske dele.
Test i gråskala
Lav et hurtigt tjek: Se på diagrammet i gråskala. Hvis du ikke kan skelne serierne fra hinanden, kan en farveblind bruger heller ikke. Ret det, før du sender det ud.
filter: grayscale(100%);Målet er redundant kodning
Denne kombination af signaler kaldes redundant kodning: farve plus mønster plus etiket. Hvis ét signal forsvinder, kan diagrammet stadig læses tydeligt.
Overfyld ikke med signaler
Balance er vigtig. Hvis du lægger alle mønstre oven i hinanden, bliver det rodet. Tilføj kun nok til, at hver serie er tydeligt adskilt, og diagrammet forbliver roligt.
Det hjælper også i dårligt lys
Direkte etiketter og mønstre redder også diagrammer, der ses i sollys, på billige skærme eller udskrives i sort-hvid. Alle vinder. ☀️
Hurtigt tjek
Hvorfor er farve alene en dårlig måde at skelne diagramserier fra hinanden på?
Opsummering: Mere end ét signal
Du har lært aldrig kun at stole på farve: tilføj mønstre, former eller direkte etiketter, vælg sikre paletter, og test i gråskala. 🖤
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Farve, mønster og direkte etiketter” gratis?
Ja — hele teksten til “Farve, mønster og direkte etiketter” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Web Accessibility Academy-kurset, skal du opgradere til CoddyKit PRO. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Farve, mønster og direkte etiketter”?
Kod serier, så farveblinde brugere kan læse dem. Du øver dig i Web Accessibility Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Web Accessibility Academy?
Der kræves ingen tidligere erfaring. Web Accessibility Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Farve, mønster og direkte etiketter”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Web Accessibility Academy-lektion?
Ja. Alle Web Accessibility Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Alle diagrammer har brug for et tekstalternativ
- Data-tabellens fallback
- Farve, mønster og direkte etiketter
- Interaktive diagrammer, der kan navigeres med tastaturet