Værktøjet bruger den officielle WCAG-formel for relativ luminans, så tallene stemmer overens med WebAIM-tjekkeren og de fleste tilgængeligheds-audits. Alt kører i din browser - dine farver uploades aldrig, og der er ingen begrænsninger.
Farvekontrast tjek
Kører helt i din browser - ingen upload, ingen tilmelding.
Kontrastforhold
Beståetkræver 4.5:1
Beståetkræver 3:1
Fejletkræver 7:1
Beståetkræver 4.5:1
Stor = 18pt (24px) eller 14pt (18,66px) i fed.
Hvad er et farvekontrast tjek?
Et farvekontrast tjek måler kontrastforholdet mellem en tekstfarve og dens baggrund og fortæller dig, om det lever op til WCAG-tilgængelighedsstandarderne. Resultatet er et forhold fra 1:1 til 21:1, og du ser med det samme, om det består eller fejler for AA og AAA - ved både normal og stor tekst.
Sådan gør du
- 1Angiv dine farver. Skriv en hex-kode, rgb()-værdi eller et CSS-farvenavn for tekst og baggrund, eller vælg dem med farvefelterne.
- 2Aflæs forholdet. Kontrastforholdet opdateres løbende, og du ser en forhåndsvisning af teksten på dens baggrund.
- 3Tjek mærkerne. Hvert mærke viser bestået eller ikke bestået for WCAG AA og AAA ved normal og stor tekst.
Hvem er det til
- Designere, der tester brandfarver, inden de sendes til udvikling.
- Frontend-udviklere, der tjekker knap-, link- og labelfarver mod WCAG AA.
- Tilgængeligheds-auditorer, der dokumenterer kontrastfejl med præcise forhold.
- Content- og e-mailteams, der sikrer, at teksten forbliver læsbar på farvede baggrunde.
Ofte stillede spørgsmål
Er farvekontrast-tjekkeren gratis?
Ja - den er 100 % gratis, uden tilmelding og uden begrænsninger. Den kører helt i din browser.
Hvilket kontrastforhold kræves til WCAG AA?
WCAG 2.1 niveau AA kræver et kontrastforhold på mindst 4,5:1 for normal tekst og 3:1 for stor tekst. Niveau AAA hæver det til 7:1 for normal tekst og 4,5:1 for stor tekst.
Hvad regnes som stor tekst?
Stor tekst er mindst 18pt (ca. 24px) med normal vægt eller 14pt (ca. 18,66px) i fed. Stor tekst må have et lavere kontrastforhold, fordi større bogstaver er lettere at læse.
Hvordan beregnes kontrastforholdet?
Det er (L1 + 0,05) / (L2 + 0,05), hvor L1 og L2 er den relative luminans af den lysere og mørkere farve. Luminansen beregnes fra sRGB rød-, grøn- og blå-kanalerne efter WCAG 2.x-definitionen.
Understøtter den hex, RGB og farvenavne?
Ja. Du kan angive 3-, 4-, 6- eller 8-cifret hex, rgb()- og rgba()-værdier eller et hvilket som helst CSS-farvenavn som f.eks. »teal«. Du kan også vælge farver med det native farvefeltet.
Hvorfor kan det samme forhold nogle gange bestå og andre gange fejle?
Det krævede forhold afhænger af tekststørrelse og det niveau, du sigter efter. Et forhold på 3,5:1 fejler AA for normal tekst, men består AA for stor tekst - tjek derfor altid mod den størrelse og det niveau, du rent faktisk bruger.