WCAG Color Contrast sjekker

Evaluate the contrast ratio of text and background colors based on WCAG 2.1 guidelines. Instantly generate accessible color adjustments.

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

Live tekst forhåndsvisning

Stor heading (18pt Bold / 24pt Regelmessig)

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
Større 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.

Motoren for forslag

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

Fullt kundesiden

Informasjonene utføres lokalt i nettleserkontakteren din. Ingen farger, filer eller telemetri koordinater overføres til våre servere.

Relaterte farger verktøy

HEX RGB HSL farge Converter
Konverter farger og justerer lys koordinater.
Bildet av Color Picker
Ekstrakter fargepaletter fra designmockups.
CSS farge Converter
Konverter mellom CMYK, HSV, RGB, HSL og HEX-format.

Farge kontrast sjekker

Beregne kontrastforholdene for foreground og bakgrunnsfarger og vise vanlige tekststørrelse resultater.

Inndata
To gyldige CSS-farger og valgfri forhåndsvisningsteksjon.
Resultat
Kontrastforhold med WCAG AA og AAA pass eller feil indikatorer.
Faktiske begrensninger
Beregningen dekker bare lysende kontrast; det sertifiserer ikke et grensesnitt eller konto for font rendering, bevegelse, fokus eller ikke-farge leker.
Personvern og databehandling
to gyldige CSS-farger og valgfri forhåndsvisning tekst behandles i denne nettleser-tabellen. Converter 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åndsvisning tekst i verktøykontrollen.
  2. Velg innstillingene som påvirker en kontrastforhold med WCAG AA og AAA pass eller feil indikatorer, deretter kjøre verktøyet.
  3. Se en kontrastforhold med WCAG AA og AAA pass eller feil indikatorer før kopiering eller nedlasting.

Vanlige feiltyper

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

Nyttig eksempel

Sammenlign #f2937 tekst på #ffffff for å se om forholdet mellom normal og stor tekst.