WCAG farvekontrastkontrol — Gratis Online Værktøj

Hvad er WCAG farvekontrastkontrol?

Gratis online WCAG farvekontrastkontrol. Indtast for- og baggrundsfarve, kontrollér overholdelse af WCAG 2.1 AA og AAA-standarder. Inkluderer foruddefinerede farvepar og live-forhåndsvisning.

Farvekontrast er et af de mest oversete aspekter af webtilgængelighed, men det påvirker direkte, om millioner af brugere kan læse dit indhold. WCAG (Web Content Accessibility Guidelines) 2.1 definerer specifikke kontrastforhold for tekst- og baggrundsfarver for at sikre læsbarhed for brugere med nedsat syn, farveblindhed eller visningsforhold som skarpt sollys. Color Contrast Checker måler enhver forgrund/baggrund-farvekombination mod disse standarder og fortæller dig øjeblikkeligt, om den består eller fejler.

Indtast farver med HEX-farvevælgeren, eller skriv hex-værdier direkte. Værktøjet beregner kontrastforholdet — et tal mellem 1:1 (ingen kontrast) og 21:1 (maksimal kontrast, sort på hvidt). Resultatet sammenlignes mod fire WCAG-tærskler: AA-normal tekst (4,5:1), AA-stor tekst (3:1), AAA-normal tekst (7:1) og AAA-stor tekst (4,5:1). Hver tærskel viser en tydelig bestået/fejlet-indikator, så du ved præcis, hvilke standarder dit farvepar opfylder.

Et live-forhåndsvisningspanel viser eksempeltekst gengivet med dine valgte farver, hvilket giver dig en visuel kontrol ud over den numeriske analyse. Det er vigtigt, fordi nogle farvekombinationer, der består matematisk, stadig kan føles ubehagelige at læse (eller omvendt). Otte forudindstillede farvepar er inkluderet til almindelige scenarier — mørk tilstand, lys tilstand, linkfarver og advarselsmærker — så du hurtigt kan teste virkelige kombinationer.

Værktøjet håndterer også kanttilfælde. Hvis farverne er for ens, falder forholdet under 3:1, og alle tjek fejler — et stærkt signal om, at parret er ubrugeligt til tekst. Hvis du tester ikke-tekstelementer som ikoner eller formularrammer, er WCAG's krav til ikke-tekstkontrast mere lempelige (minimum 3:1), hvilket denne tjekker kan hjælpe dig med at vurdere visuelt, selvom de primære tærskler er rettet mod tekst.

Praktiske anvendelser af WCAG farvekontrastkontrol

Sikring af tekstlæsbarhed på en landingsside

Din designer valgte lys grå tekst (#999) på en hvid baggrund til hero-sektionen. Test det her: forholdet er cirka 2,8:1 — det fejler WCAG AA for alle tekststørrelser. Justér forgrunden til en mørkere grå (#595959), og test igen, indtil det består AA for normal tekst (4,5:1+). Live-forhåndsvisningen bekræfter læsbarheden ved første øjekast.

Validering af farveskemaer til mørk tilstand

Et mørk tilstand-UI bruger hvid tekst på en mørkeblå baggrund. Test kombinationen: hvid (#FFFFFF) på marineblå (#0A1628) giver typisk et forhold på over 10:1 og består AAA let. Linkfarven i mørk tilstand kan dog være for subtil — test din blå link (#4A90D9) på den samme mørke baggrund for at verificere, at den mindst opfylder AA for stor tekst.

Valg af tilgængelige knap- og mærkefarver

Dit notifikationsmærke bruger hvid tekst på en rød baggrund. Test den nøjagtige røde nuance — ikke alle røde farver består kontrastkravene. En klar rød (#E53E3E) med hvid tekst består normalt AA for stor tekst, men kan fejle for små mærkeetiketter. Justér den røde nuance, og test igen, indtil mærket både er on-brand og tilgængeligt.

Hvorfor bruge WCAG farvekontrastkontrol?

Overholder WCAG AA/AAA-retningslinjer
Bestået/ikke-bestået-indikatorer med påkrævede forhold
8 forudindstillede farvepar til almindelige scenarier

Sådan bruger du WCAG farvekontrastkontrol — Trin for trin

Indtast forgrunds- og baggrundsfarver.

Juster, indtil alle kontroller er bestået.

Brug forudindstillinger til almindelige scenarier.

Hvem er WCAG farvekontrastkontrol bedst til?

web-tilgængelighed
UI-design
regeloverholdelse

Pro-tips til WCAG farvekontrastkontrol

1Design til AA-overholdelse som minimumsstandard. AAA er ideelt, men ikke påkrævet for alt indhold — reserver AAA til længere læsekontekster, hvor læsbarheden er kritisk.
2Stor tekst (18px+ almindelig eller 14px+ fed) har et lavere kontrastkrav (3:1 for AA). Udnyt det til overskrifter, knapper og etiketter, der kan styles større.
3Stol aldrig kun på farve til at formidle information. Selv med bestået kontrast har brugere med farveblindhed brug for ekstra signaler som ikoner, understregninger eller etiketter for at skelne tilstande.
4Test farvepar tidligt i designprocessen i stedet for efter udvikling. At rette kontrastproblemer i CSS er nemt; at rette dem, efter en brandfarve er blevet fastlagt, er meget sværere.

WCAG farvekontrastkontrol — Ofte stillede spørgsmål

What is WCAG 2.1 AA compliance?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).

What is the difference between AA and AAA?

AAA is a higher standard requiring 7:1 for normal text and 4.5:1 for large text. AAA is not required for all content but is recommended where possible.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is WCAG farvekontrastkontrol really free to use?

Yes, WCAG farvekontrastkontrol is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

Klar til at bruge WCAG farvekontrastkontrol?

Gratis onlineværktøj — fungerer i din browser, ingen tilmelding nødvendig. Start med at bruge det nu.

Prøv det nu