Como comprobo se as cores do meu texto e fondo cumpren as WCAG?

Introduce códigos hex en Cor do texto e Cor de fondo, ou usa os selectores. A Relación de contraste aparece con Aprobado ou Suspenso para AA e AAA en texto normal e grande, ademais dos compoñentes da interface.

Que ratio de contraste require o nivel AA das WCAG?

AA require 4,5:1 para texto normal e 3:1 para texto grande. AAA require 7:1 para texto normal e 4,5:1 para texto grande. Os compoñentes da interface e os obxectos gráficos requiren 3:1.

Que se considera texto grande?

A ferramenta trata o texto normal de 18pt (24px) ou o texto en negra de 14pt (18,66px) como grande. O texto máis pequeno debe cumprir os limiares máis altos para texto normal.

As miñas cores non cumpren o nivel AA. Como as corrixo?

Usa as suxestións dun só clic Corrixir color de texto ou Corrixir fondo. Axustan a luminosidade mantendo o mesmo ton ata que o par alcanza 4,5:1.

Que formatos de cor acepta e podo escoller unha da pantalla?

Acepta valores hexadecimais de 3 e 6 díxitos, como #abc ou #1e293b. Un botón Escoller cor da pantalla aparece nos navegadores que admiten a API EyeDropper, como os baseados en Chromium.

Si. Todas as ferramentas son de uso gratuíto, sen conta nin tarxeta de crédito. O traballo execútase no teu dispositivo en lugar de nos nosos servidores, o que permite que sexa gratuíto.

Si. Funciona nos navegadores móbiles actuais en iOS e Android, sen instalar nada.

🌓

Comprobador de contraste de cor WCAG de balde

Comproba se dúas cores cumpren os estándares de contraste WCAG AA e AAA para accesibilidade. Previsualización en directo en múltiples tamaños de texto con suxestións automáticas cando o contraste é demasiado baixo.

Execútase no teu navegadorSen rexistro, sen ventás emerxentesNon é necesario iniciar sesiónDe balde para sempre

Funciona sen conexión unha vez cargado

Cor do texto

Cor de fondo

Texto de cabeceira grande

Texto de corpo medio (18px) para lectura e contido.

Texto de corpo normal (16px) para parágrafos.

Texto de corpo pequeno (14px) para pés de foto e metadatos.

14,63:1

Ratio de contraste

✓WCAG AA — Texto normal

Require 4.5:1 · Tes 14,63:1

✓WCAG AA — Texto grande

Require 3.0:1 · Tes 14,63:1

✓WCAG AAA — Texto normal

Require 7.0:1 · Tes 14,63:1

✓WCAG AAA — Texto grande

Require 4.5:1 · Tes 14,63:1

✓Compoñentes UI / obxectos gráficos

Require 3.0:1 · Tes 14,63:1

Predefinidos rápidos

Baseado nas directrices de contraste WCAG 2.1. Texto grande = 18pt (24px) normal ou 14pt (18,66px) negrita. Os códigos HEX actualízanse en ambas direccións: escribe un HEX ou escolle unha cor, ambas entradas permanecen sincronizadas.

Usos habituais

Audita páxinas web para conformidade WCAGVerifica que as cores de texto do teu sitio cumpren os estándares de contraste WCAG AA ou AAA para accesibilidade.
Verifica combinacións de cores de marcaProba os emparellamentos da túa paleta de cores de marca para asegurar que funcionan para o deseño de interface accesible.
Proba paletas de cores do modo escuroO texto claro sobre fondos escuros aínda pode fallar o contraste - comproba os túos emparellamientos de paleta de modo escuro aquí.
Emparellamientos de cor para materiais impresosOs carteles, signos e materiais impresos tamén necesitan contraste lible - especialmente para espectadores maiores.
Deseña Cores de Botón AccesiblesAsegurate de que CTAs, botóns de acción e ligazóns pasen WCAG contra o seu fondo.

Como funciona

A comprobación de contraste execútase enteiramente no teu navegador usando o algoritmo de luminancia relativa WCAG 2.1 — sen biblioteca, sen servidor, só matemáticas escritas a man que seguen a especificación exactamente. Cada resultado actualízase en tempo real mentres escribes ou escolles unha cor.

1
Entrada e normalización hex
Acéptanse e normalízanse a tripletes RGB completos tanto valores hex de 3 díxitos (#abc) como de 6 díxitos (#aabbcc). A entrada non válida recházase inmediatamente en lugar de establecer por defecto en negro en silencio, así que aparece un bordo vermello en vez dun resultado de aprobado enganoso.
2
Cálculo de luminancia WCAG
Cada cor convértese en luminancia relativa usando a fórmula WCAG 2.1: os valores de canle sRGB linearízanse cunha corrección gamma por tramos (dividindo entre 12,92 por debaixo de 0,03928, elevando á potencia de 2,4 por riba diso), e despois pondéranse como 0,2126R + 0,7152G + 0,0722B.
3
Comprobacións de proporción de contraste e cumprimento
A proporción de contraste calcúlase como (máis claro + 0,05) / (máis escuro + 0,05) e compárase cos cinco limiares WCAG: AA texto normal (4,5:1), AA texto grande (3:1), AAA texto normal (7:1), AAA texto grande (4,5:1) e compoñentes de interface (3:1). Os resultados actualízanse con cada pulsación de tecla.
4
Suxestións de corrección que conservan o ton
Cando o par falla WCAG AA, a ferramenta busca no espazo de luminosidade HSL — avanzando cara a fóra desde a luminosidade orixinal en ambas direccións — para atopar a variante máis próxima de cada cor que pase o 4,5:1 mantendo o mesmo ton e saturación. A API EyeDropper (Chromium) tamén está dispoñible para tomar mostras de calquera cor directamente da túa pantalla.

Ferramentas relacionadas

👁️

Simulador de daltonismo

Ve como lucirá o teu deseño para persoas con deficiencias na visión da cor. Simula protanopía, deuteranopía, tritanopía, acromatopsia e anomalías máis leves.

PróbaoOs ficheiros permanecen locais

📐

Cal é a resolución da miña pantalla

Ve a resolución da túa pantalla en píxeles CSS e reais, tamaño da xanela, proporción de píxeles, profundidade de cor, HDR, soporte táctil e taxa de refresco, e cópiao todo.

Próbao

🖥️

Proba de píxeles mortos

Comproba a túa pantalla en busca de píxeles mortos ou atascados con pantalla completa en negro, branco, vermello, verde, azul e gris, ademais dun reparador de píxeles atascados opcional.