Hvorfor en palette kan bestå kontrasttjekket og alligevel svigte
Et kontrastforhold er et tal om én farve på en anden. Det siger ingenting om, om læseren kan skelne de to ad. Rødt #dc2626 og grønt #16a34a på hvid baggrund klarer hver for sig — og ved deuteranopi bliver de til #8f801b og #958951, to nuancer af samme olivengrøn. Et statusmærke der siger "fejlet / bestået" for dig siger det samme ord to gange for omkring en mand ud af tolv.
Din egen palette er næste skridt: kør den gennem den gratis simulator →
Hvad reglen egentlig siger
WCAG SC 1.4.1 Brug af farve: farve må ikke være den eneste visuelle måde at formidle information på, markere en handling eller skelne et element fra et andet. Det er ikke en regel om hvilke farver du må bruge — det er en regel om at bruge dem alene.
Det udbredte tilfælde er rød-grøn
Deuteranopi er langt den mest udbredte form for nedsat farvesyn, og den er rød-grøn. Protanopi gør rødt mørkere, indtil det synker ned i gråen. Tritanopi, blå-gul, er så sjælden at den normalt er det sidste du tjekker.
Det en kontrasttjekker ikke kan se
To farver kan have 5:1 mod siden og alligevel være umulige at skelne fra hinanden. Kontrast måler læsbarhed; en simulering måler separation. Du skal bruge begge, for de svigter forskellige steder.
Sådan gør du (under et minut)
- Åbn simuleringen og sæt dine farver ind — gerne en hel palette ad gangen. Den starter med seks almindelige farver, så du kan se modellen virke før du tilføjer dine egne.
- Sæt sværhedsgraden. 100 % er fuld dikromasi; lavere værdier tilnærmer de mildere former, som er langt mere udbredte end de fulde.
- Læs tabellen. Hver farve tegnes for normalt syn og for protanopi, deuteranopi og tritanopi, hver med sit kontrastforhold mod en baggrund du vælger.
- Læg et skærmbillede op, hvis du har et. Samme model kører på hver enkelt pixel i hele billedet, så du ser siden og ikke bare farvefelterne.
- Eksportér som CSS eller JSON, ret det der brød sammen, og kør det igen.
Modellen er Machado, Oliveira og Fernandes' sværhedsgradsmodel fra 2009, interpoleret mellem nabomatricerne som forfatterne anbefaler — den samme fremgangsmåde som professionelle designværktøjer bruger. Alt kører i JavaScript i din egen browser; din palette forlader aldrig maskinen.
Prøv det på dine egne farver
Farveblindhedssimulatoren er det værktøj denne guide beskriver: en hel palette ad gangen, justerbar sværhedsgrad, en skærmbillede-tilstand og CSS eller JSON ud igen. Intet at installere, ingen konto, og farverne bliver i din browser.
Farveblindhedssimulator
Protanopi, deuteranopi og tritanopi over en hel palette, med sværhedsgrad og en skærmbillede-tilstand der går pixel for pixel.
WCAG-kontrasttjekker
Den anden halvdel af opgaven: forholdet mellem to farver, med AA- og AAA-grænserne skrevet ud.
Tilgængelighedspalette-generator
Bygger en palette der hænger sammen — nyttig når simuleringen fortæller at din ikke gør.
Målt: hvad et rød-grønt statuspar gør
Tallene herunder kommer fra den samme model som simuleringen kører, ved fuld sværhedsgrad, mod hvid. Første kolonne er farven som du valgte den; de øvrige tre er, hvad den bliver til. Hvert tal er beregnet, ikke estimeret.
| Farve | Normalt | Protanopi | Deuteranopi | Tritanopi |
|---|---|---|---|---|
Rød #dc2626 | 4,83:1 | 7,06:1 | 4,00:1 | 4,35:1 |
Grøn #16a34a | 3,30:1 | 3,05:1 | 3,50:1 | 3,28:1 |
Blå #2563eb | 5,17:1 | 4,32:1 | 5,24:1 | 4,30:1 |
Ravgul #f59e0b | 2,15:1 | 2,48:1 | 1,97:1 | 2,30:1 |
Violet #7c3aed | 5,70:1 | 4,89:1 | 5,29:1 | 5,30:1 |
Blæk #111827 | 17,74:1 | 17,53:1 | 17,87:1 | 17,68:1 |
Tre ting falder ud af den tabel, og ingen af dem kan du se i en kontrasttjekker.
En bestået farve holder op med at bestå
Rød på 4,83:1 klarer AA for normal tekst. Ved deuteranopi er den 4,00:1, og det gør den ikke. Farven ændrede sig ikke — læseren gjorde.
Parret smelter helt sammen
Rødt mod grønt er 1,47:1 for normalt syn og 1,14:1 ved deuteranopi. Blåt mod ravgul holder på 2,41:1 og falder aldrig under 1,74:1, det værst tænkelige i protanopi — stadig lavt, men det holder.
Mørke neutraler er stabile
Blæk rører sig næsten ikke, fra 17,74:1 til 17,53:1, fordi det allerede er næsten sort i alle modeller. Neutral tekst er det sikreste grund du har.
Kontrast er ikke hele historien heller: den måler om én farve kan læses på en anden, ikke om to farver bliver adskilt. Kør både et kontrasttjek og en simulering, før du kalder en palette færdig.
Fra ét billede til en hel side
En simulator fortæller dig hvad din palette gør. Den kan ikke fortælle dig hvad der faktisk blev udgivet — hvilket tema der overskrev din knapfarve på den side ingen har åbnet siden lanceringen, eller hvilket foto der sender en rød-grøn forklaring ud, fordi nogen klistrede den ind fra et regneark. Brug den gratis Accessibility Scanner til det: den kører 15 WCAG-tjek mod en rigtig URL, kontrast med i blandingen, og fortæller hvilken side og hvilket element der fejler.
Mere kontrasthjælp
Kontrasttjekkeren tjekker farvepar · palette-generatoren bygger tilgængelige paletter · tekst-på-billede-tjekket måler tekst over et foto.
Læs kontrastguiden
En trin-for-trin-guide til WCAG-kravene selv: WCAG-kontrasttjekker, trin for trin.
Simulatoren er gratis. En rapport du kan aflevere er ikke.
Simulatoren og den gratis Accessibility Scanner er gratis for evigt — ingen konto, ingen prøveversion, ingen grænse på hvor mange paletter eller sider du kører gennem dem.
Hvad ingen af dem giver dig er noget, du kan sende til en kunde eller vedlægge en tilgængelighedserklæring: en skriftlig rapport, der også dækker de dele af et site kun en server kan se. Pro tilføjer GDPR/cookie- og NIS2/sikkerhedstjekkene, og rapporten som en fil, du kan vedlægge.
| Hvad du får | Gratis | EUComply Pro — 79 $ pr. år pr. website |
|---|---|---|
| Farveblindhedssimulering | ja, hele paletten og skærmbilleder | med i licensen |
| Sidetjek | tilgængelighedstjekkene — 15 WCAG-regler, kontrast indbefattet | de samme 15 regler |
| Resultat | scoren og karakteren for siden | med i licensen |
| Rapporten | hele rapporten på siden | med i licensen |
| En rapport, du kan vedlægge en mail | — | hele pdf-rapporten som en fil |
| Tjek kun en server kan lave | — | GDPR/cookie- og NIS2/sikkerhedstjekkene — 18 mere, 33 i alt |
Licensen dækker ét website. Hvis du kun skal vide hvad din palette gør ved deuteranopi, behøver du aldrig betale for noget — den gratis simulator ovenfor er hele svaret.
Ofte stillede spørgsmål
Hvad er forskellen på en kontrasttjekker og en farveblindhedssimulator?
En kontrasttjekker svarer på om én farve kan læses på en anden — ét tal. En simulator svarer på om to farver bliver ved med at være til at skelne, når farvesynet er nedsat, ved at tegne begge gennem en model for protanopi, deuteranopi eller tritanopi. Et par kan have god kontrast og alligevel blive til samme farve, og derfor skal man bruge begge.
Hvor præcis er simuleringen?
Værktøjet bruger Machado, Oliveira og Fernandes' sværhedsgradsmatricer fra 2009 med en justerbar sværhedsgrad fra 0 til 100 procent — den samme model som professionelle designværktøjer. Den tilnærmer hvordan farver opfattes. Kun en klinisk test kan stille diagnosen om et menneskes farvesyn.
Hvilken synstype skal jeg tjekke mod?
Start med deuteranopi. Det er langt den mest udbredte form, og det er rød-grøn-parret der svigter. Virker designet stadig for deuteranopi og tritanopi, virker det næsten altid også for de sjældnere typer.
Hvad kræver WCAG om farve?
SC 1.4.1 Brug af farve: farve må ikke være den eneste visuelle måde at formidle information på, markere en handling eller skelne et element fra et andet. Retningen er aldrig at fjerne farven — det er at tilføje et andet signal: en label, et ikon, et mønster eller tekst der siger det farven siger.
Værktøjer og guides
Tekst-på-billede kontrasttjek
Hero-billeder med tekst ovenpå er en af de mest almindelige fejl. Mål det værste tilfælde bag dine bogstaver.
Tilgængelighedsscanner fra terminalen
Kør de samme 15 tjek mod en vilkårlig URL uden at åbne en browser, i CI eller lokalt.
Alle gratis værktøjer
Gratis tilgængelighedsværktøjer
Hvad hvert gratis værktøj egentlig tjekker, og hvor du stadig har brug for et menneske.
Gratis GDPR-dokumentgeneratorer
Privatlivspolitikker, DBB-aftaler og behandlingsoversigter, lavet ud fra dine egne svar.