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 rubriktextrin.

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.
Bilder från Color Picker
Extrahera färgpaletter från designmockuper.
CSS Färgkonverterare
Konvertera mellan CMYK, HSV, RGB, HSL och HEX-format.

Färgkontrastkontroll

Beräkna kontrastprocenterna för föregående och bakgrundsfärger och visa vanliga textstorlekar.

Inmatning
Två giltiga CSS-färger och valfri förhandsvisning text.
Utdata
En kontrastförhållande med WCAG AA och AAA pass eller misslyckade indikatorer.
Verkliga begränsningar
Beräkningen täcker endast ljusstyrka kontrast; den certifierar inte ett gränssnitt eller konto för font rendering, rörelse, fokus eller icke-färgade färger.
Integritet och databehandling
två giltiga CSS-färger och valfri förhandsvisning text behandlas i denna webbläsarflik. Converter 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. Ge två giltiga CSS-färger och valfri förhandsgranskning i verktygskontrollen.
  2. Välj inställningarna som påverkar en kontrastförhållande med WCAG AA och AAA pass eller misslyckade indikatorer, sedan kör verktyget.
  3. Övervaka en kontrastförhållande med WCAG AA och AAA pass eller misslyckas indikatorer innan du kopierar eller laddar ner den.

Vanliga misslyckande lägen

Invaliderade färger kan inte mätas, och öppenhet utan en lös bakgrund kan göra en proportion meningslös.

Användbar exempel

Jämför #f2106 text på #fffff för att granska dess förhållande till normal och stor text.