Article: Guidelines about contrast

[mrosvik]

Artikkel under god praksis:

Lage retningslinjer for kontraster i designsystemet. Oppfordre til å strekke seg til å oppnå AAA, og unngå å bare være rett over AA-krav. Vi kan legge til grunn de samme argumentene som er brukt for at en har endret hvordan fokus regnes ut i WCAG 3.

@Camulos

[Camulos]

Stikkord for retningslinje:

Som hovedregel forsøker vi alltid å minst oppfylle AAA-krav fra WCAG 2.1 Argumentasjon / vurdering: Hensikten med kravet er at alle skal oppfatte tydelig tekst og andre elementer som har betydning for innhold og funksjonalitet, skille fra hverandre og fra bakgrunn. Metoden som brukes for å regne ut kontrast i WCAG 2.x tar utgangspunkt i fargens digitale verdi og ikke hvordan et menneskes øye faktisk oppfatter farger og lys. I metoden som utforskes for kontrastverdier i WCAG 3 så er øyets oppfattelse av farger og lys tatt med i beregningene, i tillegg så vil et fargepar gi forskjellig kontrastverdi etter hvilken farge som defineres som bakgrunn og hvilken som forgrunn/tekst. Verdiene som må oppnås for en godkjent vurdering i WCG 3 er mye strenger og høyere for flere fargepar enn i WCAG 2.

Siden intensjonen med kravene er at mennesker skal oppfatte tekst og innhold og klare å skille innhold fra hverandre er det hensiktsmessig å strekke seg til trippe-A nivået nå, oppfyllelse på AAA-nivå er også mye nærmere kravene i WCAG 3, dermed etterlever vi fremtidige krav i mye større grad enn på AA-nivå.

Samle noen lenker til kilder som beskriver arbeidet med WCAG 3 / APCA

Bruke https://contrast.brreg.no/ som eksempel, som viser WCAG 2 AA, AAA og APCA opp mot hverandre på fargesystemet. Vi kan legge til en velger som lar en velge fargesystemene som finnes i designsystemet og flytte løsningen til designsystemet.no.?

[mrosvik]

@Camulos Har https://contrast.brreg.no/ fått ny url? Lenken funket ikke..

[Camulos]

@Camulos Har https://contrast.brreg.no/ fått ny url? Lenken funket ikke..

ok, har varslet for service :)

Edit: og fikset!

[Camulos]

Kladd, er det noe som mangler?: Den opplevde visuelle forskjellen mellom to farger er det vi kaller kontrast

Vår retningslinje: Vi forsøker alltid å oppnå WCAG 2.1 krav på nivå AAA, selv om dette er strengere enn det vi må ifølge universell utforming. Aller helst er målet å oppnå nivå 4 / master level i APCA-metoden som nå utforskes i WCAG 3.0.

Hvorfor er dette viktig?

Brukere, inkludert dem med svekket syn, må kunne se innhold på nettstedet. Derfor er det i Web Content Accessibility Guidelines (WCAG) flere suksesskriterier og løsningsforslag som handler om dette. Men det er en forskjell på hensikten her, om at alle skal kunne se innholdet og hvordan vi i praksis har laget kontrastreglene.

Hvorfor så strenge?

I WCAG 2.x er kontrastregler knyttet til forskjellen i lysstyrken i fargeparet. Det som da spiller inn er verdien som er satt, med RGB, HEX eller HSL. Det er vist gjennom undersøkelser at metoden ikke er vitenskapelig støttet fra et tilgjengelighetsperspektiv, men fungerer som en «dum» måte å estimere forskjellen, uten at øyets evne til å oppfatte farger og lys er tatt hensyn til. Om en farge er bakgrunn eller forgrunn har ingenting å si for kontrastverdien. Derfor vil en i noen tilfeller oppleve at selv en lav kontrastverdi, er lett å oppfatte. Og motsatt at selv middels-høye kontrastverdier ikke er lett å oppfatte.

(BILDE eksempel høy kontrast men ikke lett å oppfatte + motsatt)

I WCAG 3 utforskes metoden Advanced Perceptual Contrast Algorithm (APCA), som både endrer hvordan verdiene mellom to farger bestemmes, her er det også forskjell på hvilken farge som står som forgrunn og hvilken som er bakgrunn. Men det settes også tydelige terskelverdier eller målverdier, som tar hensyn til valg av font, tekststørrelse og font-vekt. APCA er da en mer presis metode for å kalkulere kontrast og sette terskelverdier.

Ved å forsøke å strekke oss til over AAA-krav i WCAG 2.1, så vet vi at vi også kommer til å være nærmere terskelverdiene i APCA. Vi har altså større sjanse til å oppfylle hensikten med disse kravene.

(BILDE terkselverdier)

I verktøyet her kan du se fargesystemet til Brønnøysundregistrene og teste hvordan kontrastverdier endrer seg etter hvilken tekstfarge, størrelse og vekt du velger, du kan se om en oppfyller WCAG AA eller AAA nivåer og APCA. Terskelverdiene som brukes for å si godkjent eller ikke, er forenklet fra en tidlig "sølv"-nivå tabell fra APCA-arbeidet, når en ferdig modell anbefalt fra w3c så erstatter vi terskelverdiene.

[tvs-brreg]

Syns den er veldig bra skrevet, men eg har et lite forslag på formuleringsendring på et paragraf. Tar med hele paragrafen under, men endringsforslagene er fra andre/tredje setning og utover.

Nå: " WCAG 2.x er kontrastregler knyttet til forskjellen i luminans i fargeparet. Det som da spiller inn er verdien som er satt, med RGB, HEX eller HSL. Det er vist gjennom undersøkelser at metoden ikke er vitenskapelig støttet fra et tilgjengelighetsperspektiv, men fungerer som en «dum» måte å estimere forskjellen, uten at øyets evne til å oppfatte farger og lys er tatt hensyn til. Om en farge er bakgrunn eller forgrunn har ingenting å si for kontrastverdien. Derfor vil en i noen tilfeller oppleve at selv en lav kontrastverdi, er lett å oppfatte. Og motsatt at selv middels-høye kontrastverdier ikke er lett å oppfatte."

Forslag: " WCAG 2.x er kontrastregler knyttet til forskjellen i luminans i fargeparet. Det som da spiller inn er verdien som er satt, med RGB, HEX eller HSL. Det er vist gjennom undersøkelser at metoden ikke er vitenskapelig støttet fra et tilgjengelighetsperspektiv. Metoden tar ikke i vurdering hvilke farger ligger som forgrunn eller bakgrunn og dermed blir ikke øyets evne til å oppfatte farger og lys er tatt hensyn til. I praksis betyr dette at metoden ikke skaper et komplett eller reelt bilde over hvordan kontrasten faktisk vil bli opplevd. I noen tilfeller vil en oppleve at selv en lav kontrastverdi er lett å oppfatte, og motsatt, at selv middels-høye kontrastverdier er vanskelig å oppfatte."

[Camulos]

Illustrasjonsbilde til artikkel (bildet er i 2x oppløsning, altså vist dobbelt så stort som tekststørrelsen i forklaringen tilsier), følgende tekst forklarer bildet:

Illustrasjonen viser to eksempler med 16px stor tekst i normal vekt, begge variantene har 4,6 til 1 i kontrast. I variant A er teksten gitt fargen #6D7879 og bakgrunnen er hvit, teksten er sånn passelig lesbar. I variant B er teksten farget svart og satt på bakgrunn med farge #6D7879, denne er noe mindre lesbar enn variant A. Illustrasjonen viser at selv om det er lik kontrast utregnet med metoden fra WCAG 2, hvor begge er godkjent, så er det faktisk en forskjell på hvor godt leselig innholdet faktisk blir, til det er APCA-metoden bedre. Med APCA får variant A en verdi på Lc-72 og variant B får Lc-32. Skulle vi oppnå kravene fra WCAG 3 måtte vi i variant A økt skriftstørrelsen til 21px eller mer, mens for variant B måtte vi økt til hele 60px størrelse eller mer og i tillegg også gitt større vekt på minimum 500.