Analitzador WCAG de paleta de color
Analitzeu tota la vostra paleta de colors per a la conformitat WCAG, vegeu quines parelles superen els nivells AA i AAA i corregiu l'accessibilitat del disseny.
Paleta per analitzar
Matriu de contrast
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 | — |
Llegenda WCAG 2.1
Nivell AAA
Ràtio ≥ 7:1 - Excel·lència
Nivell AA
Ràtio ≥ 4,5:1 - Estàndard
AA gran
Ràtio ≥ 3:1 - Text gran
No compleix
Ràtio < 3:1 - No conforme
Analitzeu tota la vostra paleta de colors per a la conformitat WCAG, vegeu quines parelles superen els nivells AA i AAA i corregiu l'accessibilitat del disseny.
Analitzador WCAG de paleta de color mostra només els controls i resultats corresponents a la seva funció. Les opcions disponibles depenen de l’eina i de l’entrada.
Formats compatibles
Com funciona
Pas 1
Obriu Analitzador WCAG de paleta de color i prepareu l’entrada que demana la interfície
Pas 2
Ajusteu els controls visibles segons el resultat que necessiteu
Pas 3
Reviseu el resultat abans de copiar-lo, exportar-lo o reutilitzar-lo
Errors comuns a evitar
- No doneu per compatible un format o una opció que no aparegui a la interfície.
- Comproveu els valors abans de reutilitzar-los en una identitat, interfície o fitxer final.
- Si el resultat s’utilitza en text o UI, reviseu també el contrast.
Consells pro
- Conserveu el valor d’origen amb el resultat per comparar variants.
- Feu servir els formats que l’eina mostra realment en lloc d’estimar conversions.
- En mòbil i tauleta, permeteu que textos i controls saltin de línia.
Tractament de dades
El tractament depèn de la funció utilitzada. El consentiment, l’analítica i les funcions de compte del lloc són separats de l’operació de color.
Què fa aquesta eina
Analitzeu tota la vostra paleta de colors per a la conformitat WCAG, vegeu quines parelles superen els nivells AA i AAA i corregiu l'accessibilitat del disseny. Analitzador WCAG de paleta de color es concentra en aquesta tasca i no pressuposa funcions que no es mostren a la interfície. Utilitzeu els controls disponibles per obtenir el resultat que necessiteu i comproveu els valors mostrats abans de portar-los a una altra eina, full d’estils, fitxer de disseny o document.
Preparar una entrada adequada
Comenceu amb l’entrada que demana Analitzador WCAG de paleta de color: color, valor, imatge o ajust segons la pantalla. Els formats indicats en aquesta pàgina són Palette, HEX, CSS Variables, JSON. Si un format o una opció no apareix a la interfície, no el considereu compatible amb aquesta funció concreta.
Llegir i verificar el resultat
Llegiu el resultat dins del context de l’operació realitzada. Compareu-lo amb el valor d’origen i reviseu els controls que han influït en el càlcul. Per a treballs visuals importants, comproveu també el resultat a la interfície real on s’utilitzarà i no només a partir del codi.
Ús en mòbil i tauleta
Analitzador WCAG de paleta de color utilitza el disseny responsive del lloc. Títols, subtítols, breadcrumbs i controls poden saltar de línia en pantalles estretes per evitar tallar traduccions llargues. Tot i així, reviseu el resultat final al dispositiu i al context on el fareu servir.
Reutilitzar el resultat al projecte
Després de verificar el resultat, utilitzeu només les accions que Analitzador WCAG de paleta de color ofereix realment, com copiar o exportar quan estiguin disponibles. Conserveu el valor d’origen si heu de reproduir l’ajust i, en interfícies, documenteu també el paper del color i el contrast necessari.
Eines relacionades
Guies i tutorials
Aprèn a utilitzar les nostres eines amb les nostres guies detallades.
wcag-analyzer: guia pràctica de accessibility
Guia localitzada per utilitzar wcag-analyzer, entendre bones pràctiques de accessibility i evitar errors comuns.
wcag-analyzer: guia pràctica de accessibility
Guia localitzada per utilitzar wcag-analyzer, entendre bones pràctiques de accessibility i evitar errors comuns.
wcag-analyzer: guia pràctica de export
Guia localitzada per utilitzar wcag-analyzer, entendre bones pràctiques de export i evitar errors comuns.
Preguntes freqüents
Aprèn a utilitzar les nostres eines amb les nostres guies detallades.