Farvekontrasttjek
Tjek farvekontrastforhold for WCAG 2.1-overholdelse. Bekræft AA- og AAA-standarder med det samme.
Hvad er WCAG-kontrastforhold?
WCAG-kontrastforholdet måler luminansforskellen mellem forgrunds- og baggrundsfarver. Fra 1:1 til 21:1.
Hvad er WCAG AA- og AAA-kravene?
WCAG AA kræver minimum 4.5:1 for normal tekst og 3:1 for stor tekst. AAA kræver 7:1 og 4.5:1.
Hvad tæller som stor tekst?
Stor tekst er defineret som 18pt (24px) eller større, eller 14pt (18.66px) fed eller større.
Hvorfor er farvekontrast vigtigt?
Korrekt kontrast sikrer at tekst er læsbar for personer med synshandicap og forbedrer læsbarheden for alle.
Hvordan beregner jeg kontrastforholdet?
Beregnes ved at bruge relative luminansværdier. Formlen er (L1 + 0.05) / (L2 + 0.05).
Hvad er minimumskontrast for UI-elementer?
WCAG kræver minimum 3:1 for UI-komponenter og grafiske objekter.
Kan jeg bruge alle farvekombinationer?
Ikke alle kombinationer opfylder tilgængelighedsstandarder. Brug denne tjekker til at validere.
Hvad er relativ luminans?
Det er den opfattede lysstyrke af en farve, fra 0 (sort) til 1 (hvid). Beregnes med sRGB-farverummet.
Skal jeg tjekke kontrast for billeder?
Tekst i billeder skal opfylde samme krav. For dekorative billeder gælder det ikke.
Hvilke værktøjer hjælper med kontrast?
Brug browserens udviklerværktøjer, design-plugins eller online-tjekkere som denne.
Sådan bruges Farvekontrasttjek
Tjek med det samme, om tekst- og UI-kontrast opfylder AA- og AAA-grænserne i WCAG 2.1 — helt i din browser. Angiv to farver, og forholdet beregnes lokalt; intet forlader din enhed.
- Skriv eller indsæt tekstfarven i feltet Foreground Color, i et understøttet format som HEX eller RGB.
- Udfyld feltet Background Color med farven bag teksten for at beregne kontrastforholdet.
- Læs det beregnede forhold samt AA- og AAA-godkendelsesmærkerne for normal og stor tekst.
- Justér en af farverne, til forholdet overstiger 4,5:1 for brødtekst eller 3:1 for stor tekst og UI-komponenter.
- Byt rundt på værdierne i Foreground Color og Background Color for at teste den omvendte kombination, f.eks. lys tekst på mørkt tema.
AAA (7:1) er et flot mål for længere tekst, men 4,5:1 (AA) er minimumskravet i de fleste tilgængelighedsretningslinjer.
Relaterede værktøjer
- Farvevælger Vælg farve fra skærmen med pipetten. Kopier HEX, RGB, HSL koder øjeblikkeligt. Gratis online farvevælger.
- Farvepaletgenerator Opret smukke, harmoniske farvepaletter øjeblikkeligt med vores gratis online generator. Understøtter monokromatiske, analoge, komplementære, triadiske, split-komplementære og tetradiske tilstande. Finjuster farver med HSL-skydere, lås favoritter og eksporter som CSS, Tailwind, JSON eller SVG. 100% browserbaseret, dine data forlader aldrig din enhed.
- Farveblindhedssimulator Gratis online farveblindhedssimulator. Test designs for Protanopi, Deuteranopi, Tritanopi og andre typer. 100% privat, kører i din browser.
- GIF Opdel Billeder Udtræk og download enkelte billeder fra GIF-animationer som PNG eller sprite-sheet. Gratis onlineværktøj med forhåndsvisning og ZIP-eksport.
- GIF Baglæns Omvend afspilningsrækkefølgen for GIF-animationer gratis online. Upload, forhåndsvis og download med det samme.
- GIF Hastighedsændrer Ændr GIF-animationshastighed online. Accelerer eller sænk hastigheden på GIF-filer øjeblikkeligt.
- Video til GIF Konvertér video til animeret GIF online. Justér kvalitet, billedhastighed og opløsning direkte i din browser uden upload.
- Meme-generator Gratis meme-generator online. Tilføj klassiske tekster over og under et billede, træk dem frit og download din meme som PNG eller JPEG med det samme.