Hur kontrollerar jag om mina text- och bakgrundsfärger klarar WCAG?

Ange hexkoder i Textfärg och Bakgrundsfärg, eller använd färgväljarna. Kontrastförhållandet visas med Godkänd eller Underkänd för AA och AAA för normal och stor text, plus UI-komponenter.

Vilket kontrastförhållande kräver WCAG AA?

AA kräver 4,5:1 för normal text och 3:1 för stor text. AAA kräver 7:1 för normal text och 4,5:1 för stor text. UI-komponenter och grafiska objekt kräver 3:1.

Vad räknas som stor text?

Verktyget behandlar 18pt (24px) normal text, eller 14pt (18,66px) fet text, som stor. Mindre text måste uppfylla de högre tröskelvärdena för normal text.

Mina färger klarar inte AA. Hur åtgärdar jag dem?

Använd förslagen Åtgärda textfärg eller Åtgärda bakgrund med ett klick. De justerar ljusheten samtidigt som nyansen behålls tills paret når 4,5:1.

Vilka färgformat accepteras, och kan jag välja från skärmen?

Det accepterar 3-siffriga och 6-siffriga hexvärden, som #abc eller #1e293b. En knapp för Välj färg från skärmen visas i webbläsare som stöder EyeDropper API, som Chromium.

Är det verkligen gratis?

Ja. Alla verktyg är gratis att använda, utan konto och utan kreditkort. Arbetet utförs på din enhet istället för på våra servrar, vilket är det som gör det gratis att köra.

Fungerar det på mobil?

Ja. Det fungerar i moderna mobilwebbläsare på iOS och Android, utan installation.

🌓

Gratis WCAG-färgkontrastkontroll

Kontrollera om två färger uppfyller WCAG AA- och AAA-kontrastkrav för tillgänglighet. Liveförhandsvisning i flera textstorlekar med automatiska förslag när kontrasten är för låg.

Körs i din webbläsareIngen registrering, inga popup-fönsterIngen inloggning krävsGratis för alltid

Fungerar offline när den väl lästs in

Textfärg

Bakgrundsfärg

Stor rubriktext

Medelstor brödtext (18px) för läsning och innehåll.

Normal brödtext (16px) för stycken.

Liten brödtext (14px) för bildtexter och metadata.

14,63:1

Kontrastförhållande

✓WCAG AA — Normal text

Kräver 4.5:1 · Du har 14,63:1

✓WCAG AA — Stor text

Kräver 3.0:1 · Du har 14,63:1

✓WCAG AAA — Normal text

Kräver 7.0:1 · Du har 14,63:1

✓WCAG AAA — Stor text

Kräver 4.5:1 · Du har 14,63:1

✓UI-komponenter / grafiska objekt

Kräver 3.0:1 · Du har 14,63:1

Snabbval

Baserat på WCAG 2.1 kontrastriktlinjer. Stor text = 18pt (24px) normal eller 14pt (18,66px) fetstil. Hex-koder uppdateras i båda riktningarna: skriv ett hex-värde eller välj en färg — båda fälten hålls synkroniserade.

Vanliga användningar

Granska webbsidor för WCAG-överensstämmelseVerifiera att webbplatsens textfärger uppfyller WCAG AA eller AAA kontraststandard för tillgänglighet.
Verifiera märkesfargerTesta dina märkesfarger för att säkerställa att de fungerar för tillgänglig UI-design.
Testa mörkmodsfärgerLjus text på mörk bakgrund kan fortfarande misslyckas kontrast — kontrollera dina mörkmodsfärgpar här.
Färgpar för tryckt materialAffischer, skyltar och tryckt material behöver också läsbar kontrast — särskilt för äldre tittare.
Designa tillgängliga knappfärgerSe till att CTA:er, åtgärdsknappar och länkar godkänns enligt WCAG mot sina bakgrunder.

Så här fungerar det

Kontrastkontrollen körs helt i din webbläsare med WCAG 2.1:s algoritm för relativ luminans — inget bibliotek, ingen server, bara handskriven matematik som följer specifikationen exakt. Varje resultat uppdateras i realtid när du skriver eller väljer en färg.

1
Hex-indata och normalisering
Både 3-siffriga (#abc) och 6-siffriga (#aabbcc) hexvärden accepteras och normaliseras till fullständiga RGB-tripplar. Ogiltig indata avvisas omedelbart istället för att tyst falla tillbaka till svart, så en röd ram visas istället för ett missvisande godkänt resultat.
2
WCAG-luminansberäkning
Varje färg omvandlas till relativ luminans med WCAG 2.1-formeln: sRGB-kanalvärden lineariseras med en styckvis gammakorrigering (division med 12,92 under 0,03928, upphöjning till 2,4 över det), och viktas sedan som 0,2126R + 0,7152G + 0,0722B.
3
Kontrastförhållande och efterlevnadskontroller
Kontrastförhållandet beräknas som (ljusare + 0,05)/(mörkare + 0,05) och kontrolleras mot alla fem WCAG-gränsvärden: AA normal text (4,5:1), AA stor text (3:1), AAA normal text (7:1), AAA stor text (4,5:1) och UI-komponenter (3:1). Resultaten uppdateras vid varje tangenttryckning.
4
Nyansbevarande fixförslag
När paret inte klarar WCAG AA söker verktyget i HSL-ljushetsrymden — steg för steg utåt från den ursprungliga ljusheten i båda riktningarna — för att hitta den närmaste varianten av varje färg som klarar 4,5:1 samtidigt som samma nyans och mättnad behålls. EyeDropper-API:et (Chromium) finns också tillgängligt för att provta valfri färg direkt från din skärm.

Relaterade verktyg

👁️

Färgblindhetssimulator

Se hur din design ser ut för personer med färgseendebrister. Simulerar protanopi, deuteranopi, tritanopi, akromatsopi och mildare avvikelser.

Prova detFiler stannar lokalt

📐

Vad är min skärmupplösning

Se din skärmupplösning i CSS och verkliga pixlar, fönsterstorlek, pixelförhållande, färgdjup, HDR, pekstöd och uppdateringsfrekvens, och kopiera allt.

Prova det

🖥️

Test av döda pixlar

Kontrollera din skärm efter döda eller fastnade pixlar med helskärmslägena svart, vitt, rött, grönt, blått och grått, plus en valfri fixare för fastnade pixlar.