Ingen upload, 100% lokalt, ingen konto

WCAG-kontrasttjek

Skriv eller vælg to farver, og se WCAG-kontrastforholdet med det samme, med AA/AAA-badges for normal og stor tekst.

Sådan virker Kontrasttjek (WCAG)

Dette værktøj beregner WCAG-kontrastforholdet mellem to farver og viser, om parret opnår niveau AA eller AAA for normal tekst, stor tekst og ikke-tekstlige grænsefladeelementer. Alt beregnes lokalt i din browser; de farver, du indtaster, bliver aldrig uploadet.

Skrevet af Bastien Sulyan

Sådan bruger du Kontrasttjek (WCAG), trin for trin

  1. Indtast eller vælg forgrundsfarven (tekstfarven).
  2. Indtast eller vælg baggrundsfarven.
  3. Aflæs kontrastforholdet og AA-/AAA-mærkerne for normal tekst, stor tekst og ikke-tekstlige grænsefladeelementer.
  4. Brug Byt farver for at tjekke parret den anden vej rundt.

Almindelige anvendelser

  • Tjekke et brands primærfarve mod hvid eller sort, før en knapkomponent frigives.
  • Kontrollere, at dæmpet grå brødtekst stadig består AA på en lys kortbaggrund.
  • Bekræfte, at en linkfarve inde i et afsnit når op på 4,5:1-tærsklen for normal tekst.
  • Teste, om en stor overskrift med lettere vægt stadig består den lempede 3:1-tærskel for stor tekst.

Ofte stillede spørgsmål

Sender dette værktøj mine farver til en server?

Nej, beregningen sker helt i din browser med JavaScript; intet af det, du indtaster, bliver uploadet.

Hvilket kontrastforhold har jeg brug for til AA eller AAA?

WCAG 2.x kræver 4,5:1 for AA ved normal tekst, 7:1 for AAA ved normal tekst, 3:1 for AA ved stor tekst og 4,5:1 for AAA ved stor tekst.

Hvad tæller som stor tekst?

Mindst 24px (18pt) i normal vægt, eller omkring 18,7px (14pt) i fed; alt mindre bruger tærsklerne for normal tekst.

Hvorfor ændrer det ikke forholdet, når jeg bytter forgrund og baggrund?

Formlen for kontrastforholdet er symmetrisk: den sammenligner kun den lyseste og mørkeste luminans, ikke hvilken farve der bruges til tekst. Det er stadig nyttigt at bytte, fordi det fortæller dig, om parret også fungerer med rollerne byttet om, for eksempel mørk tekst på en lys chip over for lys tekst på en mørk chip.

Garanterer bestået AA, at mit design er tilgængeligt?

Nej. Kontrast er ét WCAG-succeskriterium blandt mange. Farvevalg for personer med nedsat farvesyn, synlighed af fokus, tekstforstørrelse og tastaturnavigation er separate tjek; simulatoren for farveblindhed på dette site dækker ét af dem.

Er dette et officielt W3C- eller WebAIM-værktøj?

Nej. Det implementerer selvstændigt den offentlige WCAG 2.x-kontrastformel og er ikke tilknyttet W3C eller nogen anden tilgængelighedsorganisation.

Relaterede værktøjer

Hold alt lokalt, udforsk komplementære værktøjer.

Alle udviklerværktøjer