WCAG Färgkontrastkontroll

Utvärdera kontrastförhållandet mellan text- och bakgrundsfärger enligt WCAG 2.1-riktlinjerna. Generera tillgängliga färganpassningar direkt.

HEX/RGB/HSL
HEX/RGB/HSL
Allt körs lokalt i din webbläsare.

Live textförhandsvisning

Stor rubrik (18pt fet / 24pt vanlig)

Detta är en förhandsvisning av den stora rubriktextstilen.

Normal text (under 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Kontrastförhållande

18.6:1

WCAG 2.1 Efterlevnadsstatus

WCAG AA-krav
Normal text (4.5:1) PASS
Stor text (3.0:1) PASS
WCAG AAA-krav
Normal text (7.0:1) PASS
Stor text (4.5:1) PASS

WCAG 2.1 Riktlinjer

Verifiera enkelt kontraststandarder för att bygga tillgängliga gränssnitt som följer Section 508, ADA och WCAG AA eller AAA-riktlinjer.

Förslagsmotor

Automatiskt justera färgerna stegvis längs HSL-koordinater för att hitta de närmaste alternativen som uppfyller kontrastförhållandekriterierna.

Helt klientbaserad

Beräkningar utförs lokalt i din webbläsare. Inga färger, filer eller telemetrikoordinater överförs till våra servrar.

Relaterade färgverktyg

HEX RGB HSL färgkonverterare
Konvertera färger och justera ljushetskoordinater.
Färgväljare för bilder
Extrahera färgpaletter från designmockuper.
CSS Färgkonverterare
Konvertera mellan CMYK, HSV, RGB, HSL och HEX-format.

Färgkontrastkontroll

Beräkna WCAG-kontrastförhållanden för förgrunds- och bakgrundsfärger och visa vanliga textstorleksresultat.

Inmatning
Två giltiga CSS-färger och valfri förhandsvisningstext.
Utdata
Ett kontrastförhållande med WCAG AA och AAA godkänd eller underkänd indikatorer.
Verkliga begränsningar
Beräkningen täcker endast ljushetskontrast; den certifierar inte ett gränssnitt eller tar hänsyn till teckensnittsrendering, rörelse, fokus eller icke-färgade ledtrådar.
Integritet och datahantering
två giltiga CSS-färger och valfri förhandsvisning text behandlas i denna webbläsarflik. Convertr inte får eller lagrar det; stängning eller omlastning av sidan klarar arbetsstaten såvida verktyget uttryckligen erbjuder en lokal nedladdning.

Hur man använder detta verktyg

  1. Ange två giltiga CSS-färger och valfri förhandsgranskningstext i verktygskontrollen.
  2. Välj inställningarna som påverkar ett kontrastförhållande med WCAG AA och AAA godkänd eller underkänd indikatorer, kör sedan verktyget.
  3. Granska ett kontrastförhållande med WCAG AA och AAA godkänd eller underkänd indikatorer innan du kopierar eller laddar ner det.

Vanliga feltillstånd

Ogiltiga färger kan inte mätas, och genomskinlighet utan en löst bakgrund kan göra ett förhållande meningslöst.

Användbart exempel

Jämför #1f2937 text på #ffffff för att granska dess kontrastförhållande för normal och stor text.