Kontrasttjekker

Indtast en tekst- og baggrundsfarve for at se WCAG-kontrastforholdet og hvilke AA- og AAA-niveauer der bestås.

—Kontrastforhold
Normal tekstAA4.5:1—
Normal tekstAAA7:1—
Stor tekstAA3:1—
Stor tekstAAA4.5:1—
Brugergrænseflade & grafik3:1—
Indtast en tekst- og baggrundsfarve for at tjekke.

Hvert tjek sker i din browser. Intet af det, du indtaster, uploades til BroBroGo.

FAQ

Hvad betyder AA- og AAA-resultaterne?

AA er det niveau, de fleste websteder sigter efter: det kræver et forhold på mindst 4,5:1 for normal tekst og 3:1 for stor tekst. AAA er strengere — 7:1 for normal tekst og 4,5:1 for stor tekst. Kontrastforholdet går fra 1:1 (ingen kontrast) til 21:1 (sort på hvidt).

Hvad tæller som stor tekst?

Tekst fra 18pt (ca. 24px), eller 14pt (ca. 18,5px) når den er fed. Større tekst forbliver læselig ved lavere kontrast, så den består AA ved 3:1 og AAA ved 4,5:1 i stedet for de strengere grænser for normal tekst.

Hvilke farveformater kan jeg indtaste?

Indtast en hex-værdi som #1a1a1a, en rgb()-værdi som rgb(26, 26, 26) eller en hsl()-værdi — eller klik på en af farveprøverne for at vælge en farve. Brug byt-knappen til at bytte om på tekst- og baggrundsfarverne.

Er dette WCAG 2 eller den nyere APCA-metode?

Den bruger formlen fra WCAG 2.1 / 2.2, som er den, tilgængelighedsregler og -revisioner refererer til i dag. APCA er en nyere metode baseret på den visuelle opfattelse, som stadig er ved at blive udarbejdet til WCAG 3 — den er lovende, men endnu ikke en officiel standard, hvorfor resultaterne her ikke bruger den.

Skrevet og gennemgået af BroBroGo-redaktionen.Sidst opdateret:

Forstå WCAG 2.1 / 2.2 kontraststandarder

Dette værktøj gør det muligt at indtaste en tekstfarve og en baggrundsfarve for at bestemme deres kontrastforhold i henhold til WCAG 2.1 / 2.2-standarderne. Værktøjet bruger formlen fra WCAG 2.1 / 2.2, som er den formel, tilgængelighedsregler og -revisioner refererer til i dag.

Når farverne analyseres, viser værktøjet, hvilke tilgængelighedsniveauer (AA og AAA) farvekombinationen bestås for. Kontrastforholdet beregnes og vises som "X:1", og det spænder fra 1:1 (ingen kontrast) til 21:1 (sort på hvidt). Som udgangspunkt er værktøjet indstillet med initialfarverne #4f46e5 som tekstfarve og #ffffff som baggrundsfarve, hvilket resulterer i et kontrastforhold på 6.29.

Inputværdier og understøttede farveformater

For at udføre en kontrol skal du angive to primære inputværdier:

  • Tekstfarve: En farveværdi for teksten.
  • Baggrundsfarve: En farveværdi for baggrunden.

Værktøjet accepterer følgende farveformater:

  • Hex-værdier (f.eks. #1a1a1a).
  • rgb()-værdier (f.eks. rgb(26, 26, 26)).
  • hsl()-værdier.

Hvis der indtastes en ugyldig tekstfarve, vises fejlmeddelelsen: "Indtast en gyldig tekstfarve, f.eks. #1a1a1a or rgb(26, 26, 26).". Hvis der indtastes en ugyldig baggrundsfarve, vises fejlmeddelelsen: "Indtast en gyldig baggrundsfarve, f.eks. #ffffff eller rgb(255, 255, 255).". Værktøjet har desuden en byt-knap, som gør det muligt hurtigt at bytte om på tekst- og baggrundsfarverne.

Resultater for tekst og brugergrænseflade

Når kontrastforholdet er beregnet, opdeles resultaterne i tre specifikke kategorier, hvor der vises enten "Bestået" (pass) eller "Ikke bestået" (fail):

  • Normal tekst: Viser "Bestået" eller "Ikke bestået" for både AA- og AAA-niveauer. AA-niveauet for normal tekst kræver et forhold på mindst 4,5:1, mens AAA-niveauet kræver et forhold på mindst 7:1.
  • Stor tekst: Viser "Bestået" eller "Ikke bestået" for AA- og AAA-niveauer. Stor tekst er defineret som tekst fra 18pt (ca. 24px), eller 14pt (ca. 18,5px) når den er skrevet med fed skrift. AA-niveauet for stor tekst kræver et forhold på mindst 3:1, mens AAA-niveauet kræver mindst 4,5:1.
  • Brugergrænseflade & grafik: Denne række måler kontrasten mod en enkelt grænseværdi på mindst 3:1. Denne række har ingen opdeling mellem AA og AAA; værktøjet viser kun ét samlet resultat for denne kategori.

Samlet vurdering og konklusion

Udover de individuelle resultater viser værktøjet en samlet konklusion (verdict), der opsummerer det højeste niveau, som farvekombinationen klarer. Denne besked vil være en af følgende:

  • "Består AA og AAA for normal tekst.".
  • "Består AA for normal tekst.".
  • "Består kun AA for stor tekst.".
  • "Under AA-minimum — øg kontrasten.".

Disse vurderinger hjælper designere, udviklere og indholdsteams med hurtigt at afgøre, om deres farvevalg lever op til de nødvendige tilgængelighedskrav.

Behandling af data og privatliv

Når du bruger dette værktøj, kan du være sikker på, at dit arbejde forbliver privat. Hvert tjek sker lokalt i din browser, og intet af det, du indtaster, uploades til BroBroGo.

Ofte stillede spørgsmål (FAQ)

Hvad betyder AA- og AAA-resultaterne?

AA er det niveau, de fleste websteder sigter efter: det kræver et forhold på mindst 4,5:1 for normal tekst og 3:1 for stor tekst. AAA er strengere — 7:1 for normal tekst og 4,5:1 for stor tekst. Kontrastforholdet går fra 1:1 (ingen kontrast) til 21:1 (sort på hvidt).

Hvad tæller som stor tekst?

Tekst fra 18pt (ca. 24px), eller 14pt (ca. 18,5px) når den er fed. Større tekst forbliver læselig ved lavere kontrast, så den består AA ved 3:1 og AAA ved 4,5:1 i stedet for de strengere grænser for normal tekst.

Hvilke farveformater kan jeg indtaste?

Indtast en hex-værdi som #1a1a1a, en rgb()-værdi som rgb(26, 26, 26) eller en hsl()-værdi — eller klik på en af farveprøverne for at vælge en farve. Brug byt-knappen til at bytte om på tekst- og baggrundsfarverne.

Er dette WCAG 2 eller den nyere APCA-metode?

Den bruger formlen fra WCAG 2.1 / 2.2, som er den, tilgængelighedsregler og -revisioner refererer til i dag. APCA er en nyere metode baseret på den visuelle opfattelse, som stadig er ved at blive udarbejdet til WCAG 3 — den er lovende, men endnu ikke en officiel standard, hvorfor resultaterne her ikke bruger den.

FarvekonverterKonverter farver mellem HEX, RGB, HSL, HSV, CMYK og LAB — rediger et felt, og resten opdateres løbende.Farvevælger fra billedeVælg en hvilken som helst pixel fra et billede og aflæs dens HEX, RGB og HSL med et forstørrelsesglas til præcis prøveudtagning.BilledformatkonverteringKonverter JPG-, PNG-, WebP-, HEIC- og AVIF-billeder direkte i din browser.Billedformat-beregnerOmdan enhver bredde × højde til et rent forhold som 16:9, eller vælg et forhold og beregn den manglende side – til både video, fotos og skærme.Box shadow-generatorTræk i skyderne for at forme en box-shadow, stabel lag for at skabe dybde, og kopier den færdige CSS med det samme.Gradient-generatorByg en lineær, radial eller konisk gradient, tilføj farvestop og indstil retningen, og kopier derefter CSS-koden med ét klik.SkærmtestTjek enhver skærm med testmønstre i fuldskærm – døde pixels, lysgennemstrømning, banding, gamma, ghosting, opdateringshastighed med mere.