APCA
Skrevet av: Morten Tollefsen
APCA (Advanced Perceptual Contrast Algorithm) er en metode for kontrastberegning. Denne metoden er foreslått som en del av WCAG 3.0. APCA skal altså erstatte metoden som brukes i WCAG 2.x, hvor kontrast beregnes basert på en enkel luminansforskjell (L1/L2).
APCA skal ivareta hvordan mennesker faktisk oppfatter kontrast:
- Perseptuell modell
- I motsetning til den lineære luminansbaserte modellen i WCAG 2.x, bruker APCA en modell som tar hensyn til hvordan øyet oppfatter lysstyrke og farger i ulike sammenhenger.
- Retningsbestemt kontrast
- APCA skiller mellom lys tekst på mørk bakgrunn og mørk tekst på lys bakgrunn. Dette skyldes at øyet oppfatter kontrast forskjellig avhengig av bakgrunnens lysstyrke.
- Tilpasning til skriftstørrelse og vekt
- Mindre og tynnere skrift krever høyere kontrast for å være lesbar, noe APCA tar hensyn til. Tradisjonelle metoder gir en fast kontrastgrense, mens APCA justerer kravet basert på størrelse og vekt.
- Bedre tilpasning til farger og moderne skjermer
- APCA fungerer bedre med fargerike grensesnitt og HDR-skjermer enn eldre metoder.
Tilstrekkelig kontrast er helt essensielt for at flest mulig skal kunne tilegne seg innhold du lager.
Litt om synsnedsettelse
Det finnes mange typer synsnedsettelser vi kan oppleve i løpet av livet. Ulike ting kan påvirke skarphet, kontrast eller fargeoppfattelse. Redusert syn kan oppstå som følge av genetikk, sykdom, medisiner, skader, tretthet, alder eller miljøforhold. Disse faktorene kan skape problemer fra øyelinsen og netthinnen til hjernen.
- Synsskarphet
- Synsskarphet refererer til evnen til å fokusere øynene på en liten gjenstand og se et skarpt og klart bilde. En reduksjon av synsskarpheten begrenser hvor små detaljer vi kan fokusere på. I mange tilfeller kan briller, kontaktlinser eller kirurgi forbedre synsskarpheten. En måte å imøtekomme slike problemer på er å gjøre ting større.
- Kontrastsensitivitet
- Kontrastsensitivitet er evnen til å oppdage kanter, linjer og bokstaver mot en bakgrunn. Denne evnen er uavhengig av synsskarphet – det er mulig å ha god synsskarphet, men dårlig kontrastsensitivitet. Vi kan forbedre kontrastoppfattelsen ved å øke lysstyrken på motivet. På en dataskjerm kan vi øke forskjellen mellom mørke og lyse farger.
- Redusert fargesyn Redusert evne til å skille mellom ulike nyanser av farger kalles ofte fargeblindhet. Personer med redusert fargesyn har like god eller bedre synsskarphet og kontrastsensitivitet som de med normalt fargesyn. Derfor påvirker ikke nødvendigvis fargeblindhet lesbarheten direkte. Imidlertid kan det skape utfordringer i visuelle oppgaver som kartlesing eller tolkning av diagrammer (datavisualisering), der det er nødvendig å skille mellom farger.
Forskjeller fra WCAG 2.x (oppsummert)
- WCAG 2.x bruker et enkelt kontrastforhold (f.eks. 4.5:1 for tekst).
- APCA bruker en mer kompleks formel som gir et numerisk resultat mellom -108 og +108, hvor høyere tall (og lavere negative tall) betyr bedre kontrast.
- APCA tar hensyn til flere variabler, som skriftstørrelse, bakgrunnsfarge og lysstyrke.
WCAG 3.0 og anbefalte APCA-verdier
APCA og WCAG 3.0 er pågående arbeid, og det kan sikkert komme justeringer.
I APCA varierer kontrastverdien fra 0 til 106 (tallet kan også være negativt).
Kontrast som godkjennes med glans i WCAG 2.x kan stryke med den foreslåtte APCA-metoden
RGB tekst: 125, 125, 255
RGB bakgrunn: 0, 0, 0
WCAG 2.x gir kontrasten 6,2 som består AA-kravet. Med APCA blir kontrasten -40,9 som ikke består minimumskravene for brødtekst (stryker med god margin, faktisk).
Positive APCA verdier indikerer mørk tekst på lys bakgrunn. Negative verdier indikerer lys tekst på mørk bakgrunn. -60 og +60 betyr ikke like god kontrast siden det er noe lettere å lese mørk tekst på lys bakgrunn. Nedenfor er anbefalte verdier for mørk tekst på lys bakgrunn, og noen eksempler for negative verdier vises i tabellen under.
Brødtekst:
Gjelder for tekst på minst 14px vanlig vekt eller 12px fet.
- Minimum: 60+ (for god lesbarhet)
- Anbefalt for bedre lesbarhet: 75+
- For ekstra god kontrast (best praksis): 90+
Større tekst (overskrifter, store knapper):
Gjelder for skriftstørrelser (minst 24px vanlig vekt eller 18px fet).
- Minimum: 45+
- For god lesbarhet: 60+
Ikke-tekstlig innhold (UI-elementer, ikoner, grenser):
- Minimum: 40+ for informasjonsgrafikk, grenser rundt elementer og ikoner.
- 60+ anbefales for viktige UI-elementer (f.eks. knapper, skjemaelementer).
Ekstra viktige grensesnitt-elementer (kritiske handlinger):
Eksempler: Viktige knapper, feilmeldinger, kritiske UI-komponenter.
- 75+ anbefales for elementer som er essensielle for brukerinteraksjon.
| Skriftstørrelse og vekt | Mørk tekst på lys bakgrunn (APCA-verdi) | Lys tekst på mørk bakgrunn (APCA-verdi) |
|---|---|---|
| 24 px eller større, fet skrift | 45 eller høyere | -60 eller lavere |
| 18 px eller større, fet skrift | 60 eller høyere | -75 eller lavere |
| 14–18 px, normal vekt | 75 eller høyere | -90 eller lavere |
| Mindre enn 14 px, normal vekt | 90 eller høyere | -105 eller lavere |
Algoritmen
Jeg har laget et Excel-ark som inneholder formlene og viser kontrastberegningen.
Formelen bruker APCA Contrast Prediction Equation versjon 0.0.98G-4g-base-W3.
Lyshetskontrast
L^c defineres som:
- Hvis absoluttverdien av S_apc er mindre enn W_clamp, så er L^c = 0.0.
- Hvis S_apc er større enn 0, så er L^c = (S_apc - W_offset) * 100,0.
- Hvis S_apc er mindre enn 0, så er L^c = (S_apc + W_offset) * 100.
Beregning av kontrastpolaritet og lyshetsforskjell
S_apc beregnes forskjellig avhengig av om bakgrunnen er lysere eller mørkere enn teksten:
- Normal polaritet (mørk tekst på lys bakgrunn): S_apc = (Y_bg ^ Nbg minus Y_txt ^ Ntx) * W_scale
- Revers polaritet (lys tekst på mørk bakgrunn): S_apc = (Y_bg ^ Rbg - Y_txt ^ Rtx) * W_scale
Myk klipping og sortnivåjustering:
For både tekst og bakgrunn beregnes lyshet Y ved:
- Y_txt = f_sc(Ys), der Ys er utledet fra tekstens farge.
- Y_bg = f_sc(Ys), der Ys er utledet fra bakgrunnens farge.
Funksjonen f_sc(Y_c) defineres som:
- Hvis Y_c er mindre enn 0 settes Y_c til 0.
- Hvis Y_c er mindre enn B_thrsh, justeres Y_c ved at B_thrsh - Y_c opphøyes i B_clip og deretter legges til Y_c.
- Ellers brukes Y_c som den er.
Estimering av skjermlysstyrke:
Lyshetsverdien Ys beregnes ved å vekte sRGB-komponentene:
Ys = (R' / 255.0) ` S_trc * 0.2126729 + (G' / 255.0) ` S_trc * 0.7151522 + (B' / 255.0) ^ S_trc multiplisert med 0.0721750.
Konstanter brukt i denne versjonen:
Eksponenter:
- S_trc = 2.4.
- Ntx = 0.57, Nbg = 0.56, Rtx = 0.62, Rbg = 0.65.
Klipping og skalering:
- B_clip = 1.414.
- B_thrsh = 0.022.
- W_scale = 1.14.
- W_offset = 0.027.
- W_clamp = 0.1.
Inndata
R', G', B' er i sRGB-området, med verdier mellom 0 og 255.