Fargekontrastsjekk
Sjekk fargekontrastforhold for WCAG 2.1-samsvar. Verifiser AA- og AAA-standarder umiddelbart.
Hva er WCAG-kontrastforhold?
WCAG-kontrastforholdet måler luminansforskjellen mellom forgrunns- og bakgrunnsfarger. Fra 1:1 til 21:1.
Hva er WCAG AA- og AAA-kravene?
WCAG AA krever minimum 4.5:1 for normal tekst og 3:1 for stor tekst. AAA krever 7:1 og 4.5:1.
Hva regnes som stor tekst?
Stor tekst er definert som 18pt (24px) eller større, eller 14pt (18.66px) fet eller større.
Hvorfor er fargekontrast viktig?
Riktig kontrast sikrer at tekst er lesbar for personer med synshemninger og forbedrer lesbarheten for alle.
Hvordan beregner jeg kontrastforholdet?
Beregnes ved å bruke relative luminansverdier. Formelen er (L1 + 0.05) / (L2 + 0.05).
Hva er minimumskontrast for UI-elementer?
WCAG krever minimum 3:1 for UI-komponenter og grafiske objekter.
Kan jeg bruke hvilke fargekombinasjoner som helst?
Ikke alle kombinasjoner oppfyller tilgjengelighetsstandarder. Bruk denne sjekkeren for å validere.
Hva er relativ luminans?
Det er den opplevde lysstyrken til en farge, fra 0 (svart) til 1 (hvit). Beregnes med sRGB-fargerommet.
Må jeg sjekke kontrast for bilder?
Tekst i bilder må oppfylle samme krav. For dekorative bilder gjelder det ikke.
Hvilke verktøy hjelper med kontrast?
Bruk nettleserens utviklerverktøy, design-plugins eller online-sjekkere som denne.
Slik bruker du Fargekontrastsjekk
Sjekk umiddelbart om tekst- og UI-kontrast oppfyller AA- og AAA-grensene i WCAG 2.1 — helt i nettleseren din. Oppgi to farger, og forholdet beregnes lokalt; ingenting forlater enheten din.
- Skriv eller lim inn tekstfargen i feltet Foreground Color, i et støttet format som HEX eller RGB.
- Fyll ut feltet Background Color med fargen bak teksten for å beregne kontrastforholdet.
- Les det beregnede forholdet samt AA- og AAA-godkjenningsmerkene for normal og stor tekst.
- Juster én av fargene til forholdet overstiger 4,5:1 for brødtekst eller 3:1 for stor tekst og UI-komponenter.
- Bytt om verdiene i Foreground Color og Background Color for å teste motsatt kombinasjon, for eksempel lys tekst på mørkt tema.
AAA (7:1) er et fint mål for lang tekst, men 4,5:1 (AA) er minimumskravet i de fleste tilgjengelighetsretningslinjer.
Relaterte verktøy
- Fargevelger Velg farge fra skjermen med pipetten. Kopier HEX, RGB, HSL koder umiddelbart. Gratis online fargevelger.
- Fargepalettgenerator Lag vakre, harmoniske fargepaletter umiddelbart med vår gratis nettgenerator. Støtter monokromatiske, analoge, komplementære, triadiske, splitt-komplementære og tetradiske moduser. Finjuster farger med HSL-glidebrytere, lås favoritter og eksporter som CSS, Tailwind, JSON eller SVG. 100% nettleserbasert, dataene dine forlater aldri enheten.
- Fargeblindhetssimulator Gratis online fargeblindhetssimulator. Test design for Protanopi, Deuteranopi, Tritanopi og andre typer. 100% privat, kjører i nettleseren.
- GIF Del Bilderammer Pakk ut og last ned enkelte bilderammer fra GIF-animasjoner som PNG eller sprite-ark. Gratis onlineverktøy med forhåndsvisning og ZIP-eksport.
- GIF Baklengs Snu avspillingsrekkefølgen for GIF-animasjoner gratis online. Last opp, forhåndsvis og last ned umiddelbart.
- GIF Hastighetsendrer Endre GIF-animasjonshastighet online. Øk eller reduser hastigheten på GIF-filer umiddelbart.
- Video til GIF Konverter video til animert GIF på nett. Juster kvalitet, bildefrekvens og oppløsning direkte i nettleseren uten opplasting.
- Meme-generator Gratis meme-generator online. Legg til klassiske tekster over og under et bilde, dra dem fritt og last ned memen din som PNG eller JPEG umiddelbart.