Com puc comprovar si els meus colors de text i fons compleixen les WCAG?

Introdueix codis hex a Text color i Background color, o fes servir els selectors. El Contrast ratio apareix amb Pass o Fail per a text normal i gran en AA i AAA, i també per als components de la interfície.

Quina ràtio de contrast requereix el nivell AA de les WCAG?

AA requereix 4,5:1 per a text normal i 3:1 per a text gran. AAA requereix 7:1 per a text normal i 4,5:1 per a text gran. Els components de la interfície i els objectes gràfics requereixen 3:1.

Què es considera text gran?

L'eina tracta el text normal de 18pt (24px) o el text en negreta de 14pt (18,66px) com a gran. El text més petit ha de complir els llindars més alts per a text normal.

Els meus colors no compleixen l'AA. Com els puc arreglar?

Utilitza els suggeriments d'un sol clic Arreglar el color del text o Arreglar el fons. Ajusten la lluminositat mantenint el mateix to fins que la parella arriba a 4,5:1.

Quins formats de color accepta i puc triar-ne un de la pantalla?

Accepta valors hex de 3 i 6 dígits, com #abc o #1e293b. Un botó Agafar color de la pantalla apareix en navegadors que admeten l'API EyeDropper, com els basats en Chromium.

És realment gratuït?

Sí. Totes les eines són gratuïtes, sense compte ni targeta de crèdit. El treball s'executa al teu dispositiu en lloc dels nostres servidors, i això és el que permet que sigui gratuït.

Sí. Funciona als navegadors mòbils actuals d'iOS i Android, sense instal·lar res.

🌓

Comprovador de contrast de colors WCAG de franc

Comprova si dos colors compleixen els estàndards de contrast WCAG AA i AAA per a l'accessibilitat. Previsualització en viu a múltiples mides de text amb suggeriments automàtics quan el contrast és massa baix.

S'executa al teu navegadorSense registre, sense finestres emergentsNo cal iniciar sessióGratuït per sempre

Funciona sense connexió un cop carregat

Color del text

Color de fons

Text de títol gran

Text de cos mitjà (18px) per a lectura de contingut.

Text de cos normal (16px) per a paràgrafs.

Text de cos petit (14px) per a llegendes i metadades.

14,63:1

Ràtio de contrast

✓WCAG AA — Text normal

Requereix 4.5:1 · Teniu 14,63:1

✓WCAG AA — Text gran

Requereix 3.0:1 · Teniu 14,63:1

✓WCAG AAA — Text normal

Requereix 7.0:1 · Teniu 14,63:1

✓WCAG AAA — Text gran

Requereix 4.5:1 · Teniu 14,63:1

✓Components UI / objectes gràfics

Requereix 3.0:1 · Teniu 14,63:1

Predefinits ràpids

Basat en les directrius de contrast WCAG 2.1. Text gran = 18pt (24px) normal o 14pt (18,66px) negreta. Els codis HEX s'actualitzen en ambdues direccions: escriviu un hex o trieu un color, ambdues entrades resten sincronitzades.

Usos habituals

Auditar pàgines web per a compliment WCAGVerifiqueu que els colors de text del vostre lloc compleixin els estàndards de contrast WCAG AA o AAA per a l'accessibilitat.
Verificar combinacions de color de marcaProveu els aparellaments de paleta de color de marca per assegurar-vos que funcionen per a un disseny d'interfície d'usuari accessible.
Provar paletes de color del mode foscEl text clar en fons fosc encara pot fallar el contrast: comproveu les combinacions de paleta del mode fosc aquí.
Combinacions de color per a materials impresosEls pòsters, signes i materials impresos també necessiten contrast llegible: especialment per a lectors més grans.
Dissenyeu colors de botons accessiblesAssegureu-vos que els botons de CTA, d'acció i les enllaços superin WCAG contre els seus fons.

Com funciona

La comprovació de contrast s'executa completament al teu navegador utilitzant l'algorisme de luminància relativa WCAG 2.1 — sense biblioteca, sense servidor, només matemàtiques escrites a mà que segueixen l'especificació exactament. Cada resultat s'actualitza en temps real mentre escrius o tries un color.

1
Entrada hexadecimal i normalització
S'accepten tant valors hexadecimals de 3 dígits (#abc) com de 6 dígits (#aabbcc) i es normalitzen a triplets RGB complets. L'entrada no vàlida es rebutja immediatament en lloc de recórrer silenciosament al negre, així que apareix una vora vermella en lloc d'un resultat d'aprovat enganyós.
2
Càlcul de luminància WCAG
Cada color es converteix a luminància relativa utilitzant la fórmula WCAG 2.1: els valors de canal sRGB es linearitzen amb una correcció gamma per trams (dividint per 12,92 per sota de 0,03928, elevant a la potència de 2,4 per sobre), i després es ponderen com 0,2126R + 0,7152G + 0,0722B.
3
Ràtio de contrast i comprovacions de compliment
La ràtio de contrast es calcula com (més clar + 0,05) / (més fosc + 0,05) i es comprova contra els cinc llindars WCAG: text normal AA (4,5:1), text gran AA (3:1), text normal AAA (7:1), text gran AAA (4,5:1), i components d'interfície (3:1). Els resultats s'actualitzen a cada pulsació.
4
Suggeriments de correcció que preserven el to
Quan el parell no compleix el WCAG AA, l'eina cerca a l'espai de lluminositat HSL — allunyant-se de la lluminositat original en ambdues direccions — per trobar la variant més propera de cada color que compleixi 4,5:1 mantenint el mateix to i saturació. L'API EyeDropper (Chromium) també està disponible per mostrejar qualsevol color directament des de la teva pantalla.

Eines relacionades

👁️

Simulador de daltonisme

Veu com el teu disseny es veu per a persones amb deficiències de visió del color. Simula protanòpia, deuteranòpia, tritanòpia, acromatòpsia i anomalies més lleus.

Prova-hoEls fitxers es queden en local

📐

Quina és la resolució de la meva pantalla

Veu la resolució de la teva pantalla en píxels CSS i reals, la mida de la finestra, la ràtio de píxels, la profunditat de color, HDR, compatibilitat tàctil i freqüència de refresc, i copia-ho tot.

Prova-ho

🖥️

Test de píxels morts

Comprova si la teva pantalla té píxels morts o encallats amb negre, blanc, vermell, verd, blau i gris a pantalla completa, a més d'un reparador opcional de píxels encallats.