Hopp til hovedinnhold
Niquelao Tilgjengelighet på nett og front-end-utvikling på spansk: WCAG-standarder, tilgjengelige widgets og utvidelser for Firefox, forklart med ekte kode.

Noen lenker på dette nettstedet er affiliate-lenker: hvis du kjøper gjennom dem, kan vi tjene en provisjon uten ekstra kostnad for deg. Dette påvirker aldri hva vi anbefaler. Se vår affiliate-erklæring for detaljer. Ansvarsfraskrivelse for affiliate.

Niquelao » Utvidelse for colorChecker

Med denne utvidelsen kan du sjekke om en kombinasjon av to farger er egnet for visuell persepsjon basert på kravene i WCAG 1 og WCAG 2 , ved å bruke algoritmen disse foreslår. WCAG 1.

Retningslinje 2. Stol ikke utelukkende på farge. 2.2 Sørg for at kombinasjoner av forgrunns- og bakgrunnsfarger gir tilstrekkelig kontrast når de ses av noen med fargesynsvansker eller på en svart-hvitt-skjerm. [Prioritet 2 for bilder, Prioritet 3 for tekst]. WCAG 2.

Retningslinje 1.4 Skilleevne: Gjør det lettere for brukere å se og høre innhold, inkludert å skille forgrunn fra bakgrunn. 1.4.3 Kontrast (minimum): Den visuelle presentasjonen av tekst og bilder av tekst har et kontrastforhold på minst 5:1, med følgende unntak: (Nivå AA) Stor skrift: Tekst i stor størrelse og bilder av tekst i stor størrelse har et kontrastforhold på minst 3:1; Tilfeldig: Tekst eller bilder av tekst som er del av en inaktiv komponent i brukergrensesnittet, som er rent dekorative, som er tilfeldig tekst i et bilde, eller som ikke er synlige for noen, har ingen krav til minimumskontrast.

Logotyper: Tekst som er del av en logo eller et merkenavn har ingen krav til minimumskontrast. 1.4.6 Kontrast (forbedret): Den visuelle presentasjonen av tekst og bilder av tekst har et kontrastforhold på minst 7:1, med følgende unntak: (Nivå AAA) Stor skrift: Tekst i stor størrelse og bilder av tekst i stor størrelse har et kontrastforhold på minst 5:1; Tilfeldig: Tekst eller bilder av tekst som er del av en inaktiv komponent i brukergrensesnittet, som er rent dekorative, som er tilfeldig tekst i et bilde, eller som ikke er synlige for noen, har ingen krav til minimumskontrast.

Logotyper: Tekst som er del av en logo eller et merkenavn har ingen krav til minimumskontrast. Egenskaper ved utvidelsen Utvidelsen vises i et sidepanel og presenterer resultater både for normale synsforhold og for situasjoner med vanskeligheter knyttet til fargepersepsjon (protanopi, deuteranopi og tritanopi).

Siden metoden inkludert i WCAG 2 anses som mer presis, er dette resultatet som vises som standard først. Mål den relative luminansen for hver bokstav (med mindre de alle er ensartede) ved hjelp av formelen: L = 0.2126 * R + 0.7152 * G + 0.0722 * B der R , G og B er definert som: hvis R sRGB <= 0.03928 så er R = R sRGB /12.92 ellers er R = ((R sRGB +0.055)/1.055) ^ 2.4 hvis G sRGB <= 0.03928 så er G = G sRGB /12.92 ellers er G = ((G sRGB +0.055)/1.055) ^ 2.4 hvis B sRGB <= 0.03928 så er B = B sRGB /12.92 ellers er B = ((B sRGB +0.055)/1.055) ^ 2.4 og R sRGB , G sRGB , og B sRGB er definert som: R sRGB = R 8bit /255 G sRGB = G 8bit /255 B sRGB = B 8bit /255 Tegnet ”^” er eksponentoperator.

Related: con plan gratuito para empezar hoy mismo.

Merk: For aliaserte bokstaver skal du bruke verdien for relativ luminans funnet to piksler inn fra kanten av bokstaven. Mål den relative luminansen for bakgrunnspikslene umiddelbart ved siden av bokstaven ved hjelp av samme formel.

Beregn kontrastforholdet ved hjelp av følgende formel. (L1 + 0.05) / (L2 + 0.05), der L1 er den relative luminansen for den lysere av forgrunns- eller bakgrunnsfargene, og L2 er den relative luminansen for den mørkere av forgrunns- eller bakgrunnsfargene. Kontroller at kontrastforholdet er lik eller større enn 7:1 Fargekoden kan tastes inn både i heksadesimalt format (forkortet eller ikke, med eller uten #), og i RGB-format (der du kan bruke ulike skilletegn mellom verdiene, for eksempel komma eller kolon).

Eksempel: I heksadesimalt format kan du skrive: #FC5 eller FC5 eller FFCC55 I RGB-format kan du skrive: 231,28,197 eller 231:28:197 eller rgb(231,28,197) Bruken av utvidelsen colorChecker kan kombineres med utvidelsen ColorZilla , da denne lar deg velge farger direkte fra nettdokumentet (og kopiere dem til utklippstavlen) som du ønsker å teste. Hvis du har denne utvidelsen installert, vil colorChecker gjenkjenne dens tilstedeværelse. I så fall vil trykking på Shift + Z eller Shift + X aktivere pipetten i ColorZilla og automatisk sende enten forgrunnsfargen eller bakgrunnsfargen til colorChecker for analyse.

Worth a look: — Accesibilidad gestionada: automatización combinada con revisión humana.

Sidepanelet åpnes fra nettleserens verktøymeny, eller ved å klikke på ikonet som vises i statuslinjen, og dessuten med tastaturkombinasjonen alt + c . Hvis du etter å ha lest dette allerede er overbevist om at du vil prøve utvidelsen, finner du lenken til utvidelsen colorChecker her igjen, som du også kan installere fra Firefox Add-ons I simuleringen for å hente verdier som tilsvarer problemer med fargepersepsjon, er algoritmen som brukes basert på algoritmen beskrevet av Hans Brettel, Francoise Vienot og John Mollon i deres artikkel publisert i Journal of the Optical Society of America V14, #10 ss.

2647, og på tilpasningen inkludert i den tilhørende modulen i Gimp, hvis kreditering tilhører: Michael Natterer (mitch@gimp.org) Sven Neumann (sven@gimp.org) Robert Dougherty (bob@vischeck.com) Alex Wade (alex@vischeck.com) Du kan følge kommentarene via RSS 2.0-feeden . Du kan også legge igjen en kommentar , eller sende en trackback med adressen http://www.niquelao.net/extension-colorchecker/trackback/ fra ditt eget nettsted.

1 kommentar Firefox Add-ons (25. mai 2008) […] Med denne utvidelsen kan du sjekke om to farger har tilstrekkelig kontrast imellom seg basert på kravene i WCAG 1 og WCAG 2. […] Du kan følge kommentarene via RSS 2.0-feeden . Du kan også legge igjen en kommentar, eller sende en trackback fra ditt eget nettsted. Dette verket er lisensiert under en Creative Commons-lisens .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; if you want the current details.


¿Cumplir WCAG sin tocar el código?

Superposición de IA que promete cumplimiento WCAG en 48 horas