Funcionament del càlcul de contrast sota la norma WCAG 2.1 / 2.2
El contrast de color és un dels pilars fonamentals de l'accessibilitat web. Aquesta eina permet introduir un color de text i un color de fons per determinar la seva relació de contrast exacta segons els estàndards WCAG 2.1 / 2.2. A partir d'aquesta comparació, l'aplicació calcula quins nivells d'accessibilitat (AA i AAA) supera la combinació de colors triada, avaluant de manera diferenciada el text normal, el text gran i els components d'interfície d'usuari.
L'algorisme utilitza les fórmules oficials de les pautes WCAG 2.1 / 2.2 per obtenir un valor numèric precís. Per defecte, l'eina s'inicia amb els colors #4f46e5 per al text i #ffffff per al fons, la qual cosa genera una relació de contrast inicial de 6.29:1. L'usuari pot invertir fàcilment aquests valors mitjançant el botó d'intercanvi, que commuta el color del text pel del fons i viceversa.
Formats de color admesos i validació d'entrades
Per realitzar la comprovació, l'eina accepta tres formats de color estàndard utilitzats en el desenvolupament i disseny web:
- Valors hexadecimals: Per exemple,
#1a1a1a. - Valors RGB: Mitjançant la sintaxi
rgb(), com arargb(26, 26, 26). - Valors HSL: Mitjançant la sintaxi
hsl().
L'eina valida en temps real les dades introduïdes als camps de text. Si s'introdueix un format incorrecte o un color no reconegut, el sistema mostra un missatge d'error específic per guiar l'usuari:
- Si el color del text és incorrecte, es mostra el missatge: "Introduïu un color de text vàlid, com ara #1a1a1a o rgb(26, 26, 26)."
- Si el color de fons és incorrecte, es mostra el missatge: "Introduïu un color de fons vàlid, com ara #ffffff o rgb(255, 255, 255)."
Interpretació de la relació de contrast i llindars d'accessibilitat
La relació de contrast es calcula en una escala numèrica que va des d'1:1 (quan el text i el fons són idèntics i no hi ha cap mena de contrast) fins a 21:1 (que representa el contrast màxim possible, corresponent al negre pur sobre blanc pur).
Per determinar si una combinació és apta o no apta, les directrius WCAG defineixen uns llindars de tall estrictes segons la mida del text i el nivell de conformitat requerit:
| Element a avaluar | Nivell AA | Nivell AAA |
|---|---|---|
| Text normal | Mínim de 4.5:1 | Mínim de 7:1 |
| Text gran | Mínim de 3:1 | Mínim de 4.5:1 |
| Interfície i gràfics | Mínim de 3:1 (sense distinció AA/AAA) | Mínim de 3:1 (sense distinció AA/AAA) |
La fila corresponent a "Interfície i gràfics" avalua components d'interfície d'usuari i elements gràfics de manera unificada. A diferència del text, aquesta categoria no disposa de nivells AA i AAA diferenciats, sinó que s'avalua sota un únic llindar de tall de 3:1. L'eina mostrarà un únic resultat per a aquesta fila.
Definició de text normal i text gran
L'accessibilitat web reconeix que els caràcters més grans o amb un traç més gruixut són inherentment més fàcils de llegir, motiu pel qual requereixen un contrast menor per garantir la seva llegibilitat. Les especificacions WCAG defineixen els dos grups de la següent manera:
- Text gran: Es considera text gran aquell que té una mida d'almenys 18pt (aproximadament 24px), o bé d'almenys 14pt (aproximadament 18.5px) si s'utilitza una font en negreta.
- Text normal: Qualsevol text que quedi per sota d'aquestes mides i gruixos especificats.
A causa d'aquesta diferència, una mateixa combinació de colors pot rebre la qualificació de "No apte" per a text normal però ser "Apte" per a text gran si es troba en el rang d'entre 3:1 i 4.4:1.
Resum de resultats i veredicte final
L'eina avalua de manera independent cada categoria i ofereix un veredicte resumit que indica el nivell d'accessibilitat més alt que s'ha assolit amb els colors introduïts. Els missatges de veredicte que es poden generar són els següents:
- "Apte per a AA i AAA en text normal." S'emet quan la relació de contrast és igual o superior a 7:1.
- "Apte per a AA en text normal." S'emet quan la relació és d'almenys 4.5:1 però inferior a 7:1.
- "Apte per a AA només en text gran." S'emet quan la relació és d'almenys 3:1 però inferior a 4.5:1.
- "Per sota del mínim AA: cal augmentar el contrast." S'emet quan la relació de contrast és inferior a 3:1, la qual cosa no compleix els requisits mínims per a cap tipus de text.
Privadesa i processament de dades
La privadesa de les dades introduïdes està garantida pel mètode d'execució de l'aplicació. Cada comprovació s'executa al seu navegador. Cap dada que introdueixi es puja a BroBroGo, assegurant que el procés de treball es manté completament local.
Preguntes freqüents (FAQ)
Què signifiquen els resultats AA i AAA?
El nivell AA és l'objectiu de la majoria de llocs web: requereix una relació d'almenys 4.5:1 per a text normal i de 3:1 per a text gran. El nivell AAA és més estricte: 7:1 per a text normal i 4.5:1 per a text gran. La relació va des d'1:1 (sense contrast) fins a 21:1 (negre sobre blanc).
Què es considera text gran?
Text a partir de 18pt (uns 24px), o de 14pt (uns 18.5px) si està en negreta. El text més gran manté la llegibilitat com un contrast menor, de manera que aprova el nivell AA amb un ràtio de 3:1 i el nivell AAA amb un ràtio de 4.5:1, en lloc dels llindars més estrictes del text normal.
Quins formats de color puc introduir?
Escriviu un valor hexadecimal com #1a1a1a, un valor rgb() com rgb(26, 26, 26) o un valor hsl(), o bé feu clic a qualsevol de les mostres per triar un color. Utilitzeu el botó d'intercanvi per invertir els colors del text i del fons.
S'utilitza el mètode WCAG 2 o el nou mètode APCA?
Utilitza la fórmula WCAG 2.1 / 2.2, que és la referència actual per a les auditories i normatives d'accessibilitat. L'APCA és un mètode més nou i perceptiu que s'està redactant per a la versió WCAG 3; és prometedor, però encara no és un estàndard de conformitat, per la qual cosa els resultats d'aquí no l'utilitzen.