Gå til hovedindhold
LibraTool logoLibraTool

Gratis WCAG-farvekontrast-tjekker

Tjek om to farver opfylder WCAG AA- og AAA-kontraststandarder for tilgængelighed. Liveforhåndsvisning i flere tekststørrelser med automatiske forslag, når kontrasten er for lav.

Virker offline, når den er indlæst

Stor overskriftstekst

Mellemstor brødtekst (18px) til læsning og indhold.

Normal brødtekst (16px) til afsnit.

Lille brødtekst (14px) til billedtekster og metadata.

14,63:1

Kontrastforhold

✓WCAG AA — Normal tekst

Kræver 4.5:1 · Du har 14,63:1

✓WCAG AA — Stor tekst

Kræver 3.0:1 · Du har 14,63:1

✓WCAG AAA — Normal tekst

Kræver 7.0:1 · Du har 14,63:1

✓WCAG AAA — Stor tekst

Kræver 4.5:1 · Du har 14,63:1

✓UI-komponenter / grafiske objekter

Kræver 3.0:1 · Du har 14,63:1

Hurtigvalg

Baseret på WCAG 2.1 kontrastretningslinjer. Stor tekst = 18pt (24px) normal eller 14pt (18,66px) fed. Hex-koder opdateres i begge retninger: skriv et hex-værdier eller vælg en farve — begge felter holdes synkroniseret.

Almindelige anvendelser

  • Revision af websider for WCAG-overholdelseBekræft at dit websteds tekstfarver opfylder WCAG AA eller AAA kontraststandard for tilgængelighed.
  • Bekræft brandfarvesammensetningerTest dine brandfarver for at sikre, at de fungerer til tilgængelig UI-design.
  • Test mørkemodus farvepaletterLyst tekst på mørk baggrund kan stadig mislykkes kontrast — tjek dine mørkemodus-farvekombinationer her.
  • Farvepar til trykt materialePlakater, skilte og trykt materiale skal også have læsbar kontrast — især for ældre seere.
  • Designere tilgængelige knapfarverSørg for, at CTA'er, handlingsknappar og links godkendes WCAG mod deres baggrunde.

Sådan fungerer det

Kontrasttjekket kører udelukkende i din browser med WCAG 2.1-algoritmen for relativ luminans — intet bibliotek, ingen server, kun håndskrevet matematik, der følger specifikationen præcist. Hvert resultat opdateres i realtid, mens du skriver eller vælger en farve.

  1. 1
    Hex-input og normalisering
    Både 3-cifrede (#abc) og 6-cifrede (#aabbcc) hex-værdier accepteres og normaliseres til fulde RGB-tripler. Ugyldigt input afvises straks i stedet for stille at falde tilbage til sort, så der vises en rød kant i stedet for et misvisende bestået-resultat.
  2. 2
    WCAG-luminansberegning
    Hver farve omregnes til relativ luminans med WCAG 2.1-formlen: sRGB-kanalværdierne lineariseres med en stykvis gammakorrektion (division med 12,92 under 0,03928, opløftning i 2,4 over), og vægtes derefter som 0.2126R + 0.7152G + 0.0722B.
  3. 3
    Kontrastforhold og overholdelsestjek
    Kontrastforholdet beregnes som (lysere + 0,05) / (mørkere + 0,05) og tjekkes mod alle fem WCAG-grænser: AA normal tekst (4.5:1), AA stor tekst (3:1), AAA normal tekst (7:1), AAA stor tekst (4.5:1) og UI-komponenter (3:1). Resultaterne opdateres ved hvert tastetryk.
  4. 4
    Rettelsesforslag, der bevarer farvetonen
    Når parret ikke består WCAG AA, søger værktøjet i HSL-lyshedsrummet — trinvis udad fra den oprindelige lyshed i begge retninger — for at finde den nærmeste variant af hver farve, der består 4.5:1, med samme farvetone og mætning. EyeDropper API (Chromium) er også tilgængelig, så du kan hente en farve direkte fra skærmen.

Relaterede værktøjer

👁️

Farveblindhed-simulator

Se hvordan dit design ser ud for personer med farvesyn­defekter. Simulerer protanopi, deuteranopi, tritanopi, akromatopsi og mildere anomalier.

Prøv detFiler forbliver lokale
📐

Hvad er min skærmopløsning

Se din skærmopløsning i CSS og reelle pixels, vinduesstørrelse, pixelratio, farvedybde, HDR, touch-understøttelse og opdateringshastighed, og kopiér det hele.

Prøv det
🖥️

Død pixel-test

Tjek din skærm for døde eller fastlåste pixels med fuldskærms sort, hvid, rød, grøn, blå og grå plus en valgfri pixel-fixer.

Prøv det

Ofte stillede spørgsmål