WCAG-analysator
Analysera varje färgkombination i din palett för WCAG AA- och AAA-kontrast och se i en enda överblick vilka par som uppfyller kraven och vilka att justera.
Palett att analysera
Kontrastmatris
Primary | Secondary | Background | Text | Muted | |
|---|---|---|---|---|---|
Primary | — | 1.15 Fail | 3.68 AA-L | 3.98 AA-L | 1.29 Fail |
Secondary | 1.15 Fail | — | 4.23 AA-L | 3.45 AA-L | 1.12 Fail |
Background | 3.68 AA-L | 4.23 AA-L | — | 14.63 AAA | 4.76 AA |
Text | 3.98 AA-L | 3.45 AA-L | 14.63 AAA | — | 3.07 AA-L |
Muted | 1.29 Fail | 1.12 Fail | 4.76 AA | 3.07 AA-L | — |
WCAG 2.1-teckenförklaring
Nivå AAA
Kvot ≥ 7:1 – Utmärkt
Nivå AA
Kvot ≥ 4,5:1 – Standard
AA stor
Kvot ≥ 3:1 – Stor text
Underkänd
Kvot < 3:1 – Uppfyller inte kraven
Analysera varje färgkombination i din palett för WCAG AA- och AAA-kontrast och se i en enda överblick vilka par som uppfyller kraven och vilka att justera.
WCAG-analysator visar bara kontroller och resultat som hör till funktionen. Tillgängliga alternativ beror på verktyget och indata.
Format som stöds
Så fungerar det
Steg 1
Öppna WCAG-analysator och förbered den indata som gränssnittet efterfrågar
Steg 2
Justera de synliga kontrollerna för önskat resultat
Steg 3
Kontrollera resultatet innan du kopierar, exporterar eller återanvänder det
Vanliga misstag att undvika
- Utgå inte från att ett format eller alternativ stöds om det inte visas i gränssnittet.
- Kontrollera värdena innan de används i en grafisk profil, ett gränssnitt eller en produktionsfil.
- När resultatet används för text eller UI bör även kontrasten kontrolleras.
Proffstips
- Spara källvärdet tillsammans med resultatet när du jämför varianter.
- Använd de format som verktyget faktiskt visar i stället för att uppskatta konverteringar.
- På mobil och surfplatta bör text och kontroller få radbrytas.
Databehandling
Databehandlingen beror på vilken funktion som används. Samtycke, analys och kontofunktioner på webbplatsen är separata från färgoperationen.
Vad verktyget gör
Analysera varje färgkombination i din palett för WCAG AA- och AAA-kontrast och se i en enda överblick vilka par som uppfyller kraven och vilka att justera. WCAG-analysator håller sig till denna uppgift och antyder inte funktioner som inte visas i gränssnittet. Använd de tillgängliga kontrollerna för önskat resultat och kontrollera de visade värdena innan du för över dem till ett annat verktyg, en stilmall, en designfil eller ett dokument.
Förbered användbar indata
Börja med den indata som WCAG-analysator efterfrågar: färg, värde, bild eller inställning beroende på skärmen. Formaten som anges på denna sida är Palette, HEX, CSS Variables, JSON. Om ett format eller alternativ inte visas i gränssnittet bör det inte betraktas som stöd för just denna funktion.
Läs och kontrollera resultatet
Läs resultatet i sammanhanget för den operation du utförde. Jämför det med källvärdet och gå igenom de inställningar som påverkade beräkningen. För viktigt visuellt arbete bör resultatet också kontrolleras i det faktiska gränssnitt där det ska användas.
Användning på mobil och surfplatta
WCAG-analysator använder webbplatsens responsiva layout. Rubriker, undertexter, breadcrumbs och kontroller kan radbrytas på smala skärmar så att långa översättningar inte klipps. Kontrollera ändå slutresultatet på den enhet och i det sammanhang där du tänker använda det.
Återanvänd resultatet i projektet
Efter kontroll bör du bara använda de åtgärder som WCAG-analysator faktiskt erbjuder, till exempel kopiering eller export när de finns. Spara källvärdet om inställningen behöver återskapas och dokumentera även färgens roll och kontrastkrav vid gränssnittsarbete.
Relaterade verktyg
Guider och handledningar
Lär dig hur du använder våra verktyg med våra detaljerade guider.
wcag-analyzer: praktisk guide för accessibility
Lokaliserad guide för att använda wcag-analyzer, förstå bästa praxis för accessibility och undvika vanliga misstag.
wcag-analyzer: praktisk guide för accessibility
Lokaliserad guide för att använda wcag-analyzer, förstå bästa praxis för accessibility och undvika vanliga misstag.
wcag-analyzer: praktisk guide för export
Lokaliserad guide för att använda wcag-analyzer, förstå bästa praxis för export och undvika vanliga misstag.
Vanliga frågor
Lär dig hur du använder våra verktyg med våra detaljerade guider.