WCAG-kontroll av fargekontrast

Vurder kontrastforholdet mellom tekst- og bakgrunnsfarger basert på WCAG 2.1-retningslinjer. Generer tilgjengelige fargejusteringer umiddelbart.

HEX/RGB/HSL
HEX/RGB/HSL
Alt går lokalt i nettleseren din.

Live tekst forhåndsvisning

Stor overskrift (18pt fet / 24pt vanlig)

Dette er en forhåndsvisning av den store overskriftstilen.

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

Det er lett å verifisere kontraststandarder for å bygge tilgjengelige grensesnitt som overholder Section 508, ADA, og WCAG AA eller AAA retningslinjer.

Forslagsmotor

Automatisk justere farger gradvis langs HSL-koordinater for å finne de nærmeste alternativene som oppfyller kontrastforholdskriteriene.

Fullt kundesiden

Beregninger utføres lokalt i nettleserkonteksten din. Ingen farger, filer eller telemetrikoordinater overføres til våre servere.

Relaterte fargeverktøy

HEX-, RGB- og HSL-fargekonverterar
Konverter farger og juster lyshetskoordinater.
Fargevelger for bilder
Trekk ut fargepaletter fra designmockups.
CSS-fargekonverterar
Konverter mellom CMYK, HSV, RGB, HSL og HEX-format.

Fargekontrollsjekker

Rekn ut WCAG-kontrastforhold for forgrunns- og bakgrunnsfargar, og vis vanlege resultat for tekststorleikar.

Inndata
To gyldige CSS-farger og valgfri forhåndsvisningstekst.
Utdata
Et kontrastforhold med WCAG AA og AAA bestått/ikke bestått-indikatorer.
Reelle begrensninger
Beregningen dekker bare luminanskontrast; den sertifiserer ikke et grensesnitt eller tar hensyn til skriftgjengivelse, bevegelse, fokus eller ikke-fargebaserte signaler.
Personvern og databehandling
to gyldige CSS-farger og valgfri forhåndsvisning tekst behandles i denne nettleser-tabellen. Convertr mottar eller lagrer den; lukking eller omlasting av siden klargjør arbeidsstaten med mindre verktøyet uttrykkelig tilbyr en lokal nedlasting.

Hvordan bruke dette verktøyet

  1. Gi to gyldige CSS-farger og valgfri forhåndsvisningstekst i verktøykontrollene.
  2. Velg innstillingene som påvirker et kontrastforhold med WCAG AA- og AAA-bestått- eller feilindikatorer, og kjør deretter verktøyet.
  3. Se et kontrastforhold med WCAG AA- og AAA-bestått- eller feilindikatorer før kopiering eller nedlasting.

Vanlige feiltyper

Ugyldige farger kan ikke måles, og gjennomsiktighet uten en oppløst bakgrunn kan gjøre et forhold meningsløst.

Nyttig eksempel

Samanlikn teksten #1f2937 på #ffffff for å sjå kontrastforholdet for normal og stor tekst.