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 forudsætning af den store overskriftstil.

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.
Billed af Color Picker
Udpak farvepaletter fra designmockups.
CSS Farvekonverter
Konverter mellem CMYK, HSV, RGB, HSL og HEX-formater.

Farvekontrastkontrol

Beregn kontrastforholdene for foreground og baggrundsfarver og vise almindelige tekst-størrelse resultater.

Indtastning
2 gyldige CSS-farver og valgfri forudsigelsestekst.
Udgang
En kontrastforhold med WCAG AA og AAA pass eller fejler indikatorer.
Virkelige begrænsninger
Beregningen dækker kun lysstyrke kontrast; det certifierer ikke et grænseflade eller konto for font rendering, bevægelse, fokus eller ikke-farvede skær.
Privatliv og databehandling
to gyldige CSS farver og valgfri forhåndsvisning tekst behandles i denne browser-tab. Converter 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. Tilbyde to gyldige CSS farver og valgfri forhåndsvisning tekst i værktøjskontrollerne.
  2. Vælg de indstillinger, der påvirker et kontrastforhold med WCAG AA og AAA passerer eller fejler indikatorer, derefter køre værktøjet.
  3. Overvej et kontrastforhold med WCAG AA og AAA passerer eller fejler indikatorer, før du kopierer eller downloader det.

Vanlige fejlmoder

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

Nyttig eksempel

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