WCAG Farvekontrastkontrol

Evaluer kontrastforholdet mellem tekst- og baggrundsfarver i henhold til WCAG 2.1-retningslinjerne. Generer øjeblikkeligt tilgængelige farvejusteringer.

HEX/RGB/HSL
HEX/RGB/HSL
Alt kører lokalt i din browser.

Live tekstforhåndsvisning

Stor overskrift (18pt fed / 24pt almindelig)

Dette er en forhåndsvisning af den store overskriftstekststil.

Normal tekst (under 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Kontrastforhold

18.6:1

WCAG 2.1 Overholdelsesstatus

WCAG AA Krav
Normal tekst (4.5:1) PASS
Stor tekst (3.0:1) PASS
WCAG AAA Krav
Normal tekst (7.0:1) PASS
Stor tekst (4.5:1) PASS

WCAG 2.1 Retningslinjer

Verificer nemt kontraststandarder for at bygge tilgængelige grænseflader, der overholder Section 508, ADA og WCAG AA eller AAA retningslinjer.

Forslagsmotor

Automatisk justere farverne gradvist langs HSL-koordinater for at finde de nærmeste alternativer, der opfylder kontrastforholdskriterierne.

Fuldstændig klientside

Beregninger udføres lokalt i din browserkontekst. Ingen farver, filer eller telemetrikoordinater overføres til vores servere.

Relaterede farveværktøjer

HEX RGB HSL Farvekonverter
Konverter farver og juster lysstyrkekoordinater.
Billedfarvevælger
Uddrag farvepaletter fra designmockups.
CSS Farvekonverter
Konverter mellem CMYK, HSV, RGB, HSL og HEX-formater.

Farvekontrastkontrol

Beregn WCAG-kontrastforhold for forgrunds- og baggrundsfarver og vis almindelige tekststørrelsesresultater.

Indtastning
To gyldige CSS-farver og valgfri forhåndsvisningstekst.
Udgang
Et kontrastforhold med WCAG AA- og AAA-bestået- eller fejlindikatorer.
Virkelige begrænsninger
Beregningen dækker kun luminanskontrast; den certificerer ikke en grænseflade eller tager højde for skrifttypegengivelse, bevægelse, fokus eller ikke-farvebaserede signaler.
Privatliv og databehandling
to gyldige CSS farver og valgfri forhåndsvisning tekst behandles i denne browser-tab. Convertr modtager eller gemmer det; lukning eller omladning af siden renser arbejdsstaten, medmindre værktøjet udtrykkeligt tilbyder en lokal download.

Hvordan man bruger dette værktøj

  1. Angiv to gyldige CSS-farver og valgfri forhåndsvisningstekst i værktøjets kontroller.
  2. Vælg de indstillinger, der påvirker et kontrastforhold med WCAG AA- og AAA-bestået- eller fejlet-indikatorer, og kør derefter værktøjet.
  3. Gennemgå et kontrastforhold med WCAG AA- og AAA-bestået- eller fejlet-indikatorer, før du kopierer eller downloader det.

Almindelige fejltilstande

Ugyldige farver kan ikke måles, og gennemsigtighed uden en opløst baggrund kan gøre et forhold meningsløst.

Nyttigt eksempel

Sammenlign #1f2937 tekst på #ffffff for at se dens forhold til normal og stor tekst.