WCAG-analysator
Analyseer elke kleurcombinatie in je palet op WCAG AA- en AAA-contrast en zie in één overzicht welke paren voldoen en welke nog aanpassing nodig hebben.
Te analyseren palet
Contrastmatrix
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-legenda
Niveau AAA
Verhouding ≥ 7:1 - Uitmuntend
Niveau AA
Verhouding ≥ 4,5:1 - Standaard
AA groot
Verhouding ≥ 3:1 - Grote tekst
Voldoet niet
Verhouding < 3:1 - Niet conform
Analyseer elke kleurcombinatie in je palet op WCAG AA- en AAA-contrast en zie in één overzicht welke paren voldoen en welke nog aanpassing nodig hebben.
WCAG-analysator toont alleen bediening en resultaten die bij de functie horen. Beschikbare opties hangen af van het gereedschap en de invoer.
Ondersteunde formaten
Hoe het werkt
Stap 1
Open WCAG-analysator en bereid de invoer voor die de interface vraagt
Stap 2
Pas de zichtbare bediening aan voor het gewenste resultaat
Stap 3
Controleer het resultaat voordat u het kopieert, exporteert of hergebruikt
Veelgemaakte fouten om te vermijden
- Ga niet uit van een formaat of optie die niet in de interface staat.
- Controleer waarden voordat u ze gebruikt in een huisstijl, interface of productiebestand.
- Controleer ook contrast wanneer het resultaat voor tekst of UI wordt gebruikt.
Pro-tips
- Bewaar de bronwaarde samen met het resultaat om varianten te vergelijken.
- Gebruik de werkelijk getoonde formaten in plaats van conversies te schatten.
- Laat tekst en bediening op mobiel en tablet afbreken over meerdere regels.
Gegevensverwerking
Gegevensverwerking hangt af van de gebruikte functie. Toestemming, analytics en accountfuncties van de site staan los van de kleurbewerking.
Wat dit gereedschap doet
Analyseer elke kleurcombinatie in je palet op WCAG AA- en AAA-contrast en zie in één overzicht welke paren voldoen en welke nog aanpassing nodig hebben. WCAG-analysator blijft bij deze taak en suggereert geen functies die niet in de interface staan. Gebruik de aanwezige bediening voor het gewenste resultaat en controleer de getoonde waarden voordat u ze overneemt in een ander gereedschap, stylesheet, ontwerpbestand of document.
Een bruikbare invoer voorbereiden
Begin met de invoer die WCAG-analysator vraagt: kleur, waarde, afbeelding of instelling afhankelijk van het scherm. Voor deze pagina worden Palette, HEX, CSS Variables, JSON vermeld. Als een formaat of optie niet in de interface verschijnt, behandel het dan niet als ondersteuning van deze specifieke functie.
Het resultaat lezen en controleren
Lees het resultaat in de context van de uitgevoerde bewerking. Vergelijk het met de bronwaarde en controleer de instellingen die de berekening beïnvloedden. Voor belangrijk visueel werk moet u het resultaat ook in de uiteindelijke interface bekijken in plaats van alleen op de code te vertrouwen.
Gebruik op mobiel en tablet
WCAG-analysator gebruikt de responsieve lay-out van de site. Koppen, subtitels, breadcrumbs en bediening kunnen op smalle schermen over meerdere regels lopen zodat langere vertalingen niet worden afgesneden. Controleer het eindresultaat alsnog op het apparaat waarop u het wilt gebruiken.
Het resultaat hergebruiken
Gebruik na controle alleen de acties die WCAG-analysator werkelijk aanbiedt, zoals kopiëren of exporteren wanneer die zichtbaar zijn. Bewaar de bronwaarde als u de instelling later wilt reproduceren en documenteer voor UI-kleuren ook de rol en de vereiste contrastverhouding.
Gerelateerde tools
Handleidingen en tutorials
Leer hoe je onze tools gebruikt met onze gedetailleerde gidsen.
wcag-analyzer: praktische gids voor accessibility
Gelokaliseerde gids voor wcag-analyzer, best practices voor accessibility en veelgemaakte fouten.
wcag-analyzer: praktische gids voor accessibility
Gelokaliseerde gids voor wcag-analyzer, best practices voor accessibility en veelgemaakte fouten.
wcag-analyzer: praktische gids voor export
Gelokaliseerde gids voor wcag-analyzer, best practices voor export en veelgemaakte fouten.
Veelgestelde vragen
Leer hoe je onze tools gebruikt met onze gedetailleerde gidsen.