Hvorfor kontrastforhold findes
Sådan hænger øjet og matematikken bag 4,5 til 1 sammen.
Hvorfor kontrastforhold findes er en gratis Web Accessibility Academy-lektion på CoddyKit. Dette er lektion 1 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.
Hvad kontrast egentlig betyder
Når du læser tekst, sammenligner øjet, hvor lyse eller mørke bogstaverne er i forhold til baggrunden. Den forskel er kontrast. 👀
Hvorfor vi har brug for et tal
Én designer synes, at en farve ser fin ud, mens en anden kniber øjnene sammen. For at afgøre det bruger tilgængelighed et kontrastforhold, et enkelt målbart tal, som alle kan kontrollere.
Forholdsskalaen
Forholdet går fra 1:1 til 21:1. Sort på hvidt er maksimum, 21:1, mens samme farve på sig selv er 1:1 og helt usynlig.
Luminans, ikke kun farve
Beregningen bygger på luminans, den oplevede lysstyrke i en farve. To meget forskellige nuancer kan stadig være svære at skelne, hvis deres lysstyrke ligger for tæt.
Øjne er ikke ens
Kontrastregler findes, fordi synet varierer. Brugere med nedsat syn, ældre øjne og trætte læsere har alle brug for en større forskel end en ung designer foran en lys skærm.
Virkeligheden modarbejder dig
Solskin, billige skærme og dæmpede telefoner reducerer kontrasten. Et forhold, der kan klare disse forhold, holder teksten læsbar overalt.
Hvor 4,5 til 1 kommer fra
WCAG valgte 4.5:1 for normal tekst som en forskningsbaseret minimumsgrænse. Det tager omtrent højde for moderat nedsat syn uden at kræve rent sort og hvidt.
Større tekst, mindre krav
Stor tekst er lettere at læse, så grænsen sænkes til 3:1. Tykke, store bogstaver kan klare en mindre forskel i lysstyrke end lille brødtekst.
Forgrund og baggrund hører sammen
Et forhold handler altid om to farver sammen. Grå er aldrig læsbar eller ulæselig alene, kun i forhold til den overflade, den står på.
Det gælder ikke kun tekst
Den samme idé gælder for brugergrænsefladekomponenter. Knapkanter, ikoner og konturer omkring formularer skal også have tilstrækkelig kontrast, så brugerne kan finde dem.
Et forhold i rigtig CSS
Disse to farver giver omtrent et 4.6:1-forhold, så de lige akkurat overskrider grænsen for normal tekst og er behagelige at læse.
p {
color: #595959;
background: #ffffff;
}Hurtigt tjek
Lad os teste, hvorfor forholdet overhovedet findes.
Opsummering: Hvorfor forhold findes
Du har lært, at et kontrastforhold gør læsbarhed til ét ærligt tal baseret på luminans, så tekst fungerer for alle øjne. Næste trin: at nå AA-grænserne. ✅
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 “Hvorfor kontrastforhold findes” gratis?
Ja — hele teksten til “Hvorfor kontrastforhold findes” 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 “Hvorfor kontrastforhold findes”?
Sådan hænger øjet og matematikken bag 4,5 til 1 sammen. 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 1 af 4.
Hvor lang tid tager lektionen “Hvorfor kontrastforhold findes”?
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
- Hvorfor kontrastforhold findes
- Opnå AA: Grænser for tekst og stor tekst
- Stol aldrig på farve alene
- Kontrollér kontrast med gratis værktøjer