Relación de contraste
- AA texto normal 4.5:1
- AA texto grande 3:1
- AAA texto normal 7:1
- AAA texto grande 4.5:1
- Componentes de interfaz y gráficos 3:1
Legible para todos
Un subtítulo grande
El texto de cuerpo es donde más molesta un contraste bajo, porque se lee más tiempo y en tamaño pequeño. Un enlace de texto
Colores válidos más cercanos
Colores guardados
Comprobador de contraste de color
Comprueba si un texto se lee bien sobre su fondo antes de publicar un diseño. Elige o escribe un color de texto y un color de fondo, y la herramienta muestra la relación de contraste WCAG 2.x con aprobado o suspenso para AA y AAA, para texto normal, texto grande y componentes de interfaz. Una vista previa en directo, la simulación del daltonismo y las correcciones sugeridas te ayudan a encontrar un par que funcione. Elige un color de texto y un fondo en HEX, RGB o HSL. La relación de contraste WCAG, los resultados AA y AAA y la vista previa se actualizan al escribir, y se sugieren los colores válidos más cercanos. Todo se guarda en este navegador.
como funciona
- Elige un color de texto y un color de fondo, o escríbelos en HEX, RGB o HSL. Ajusta la opacidad del texto si es semitransparente.
- Lee la relación de contraste y las insignias AA y AAA para texto normal, texto grande y componentes de interfaz, y revisa la vista previa en directo.
- Aplica un color sugerido si el par no aprueba, guarda los pares buenos en tu paleta y copia el CSS en tu proyecto.
Soluciones, no solo notas
Cuando un par no aprueba, la herramienta busca el color de texto y el color de fondo más cercanos, con el mismo tono y saturación, que alcanzan AA y AAA, y un clic lo aplica. El texto semitransparente se mezcla primero con el fondo, igual que lo dibuja un navegador.
Privado y portátil
Tus colores y tu paleta se guardan solo en este navegador. Guarda todo como JSON para hacer una copia o llevarlo a otro dispositivo, o guarda el resultado como PDF o imagen. Deshacer y rehacer cubren cada cambio.
Preguntas frecuentes
¿El comprobador de contraste es gratuito?
Sí. Es gratuito, no necesita cuenta y funciona en cualquier navegador moderno.
¿Qué relación necesito?
El nivel AA de WCAG exige al menos 4,5:1 para texto normal y 3:1 para texto grande y para componentes de interfaz como bordes de campos e iconos. El nivel AAA exige 7:1 para texto normal y 4,5:1 para texto grande.
¿Por qué 4,48 suspende si se redondea a 4,5?
Los umbrales de WCAG son exactos. Una relación de 4,48:1 está por debajo de 4,5:1, así que suspende AA para texto normal. La herramienta compara el valor sin redondear, por lo que las insignias siempre son estrictas.
Herramientas relacionadas
La historia del comprobador de contraste
De dónde salen los valores de contraste WCAG: 4,5:1 y 7:1, la luminancia relativa a partir de sRGB, la regla de 3:1 para componentes de interfaz de WCAG 2.1, el daltonismo y APCA para WCAG 3.
Generador de paletas de color
Cree, bloquee y mezcle paletas en el navegador. Copie HEX, variables CSS o JSON, exporte PNG o SVG y extraiga colores de una foto.
Rueda de color
Elija un color en una rueda interactiva, genere paletas complementarias, análogas, triádicas y otras, y copie HEX, RGB, HSL, HSV o CMYK.
Editor de degradados
Crea degradados CSS lineales y radiales en el navegador. Arrastra paradas de color, ajusta el ángulo y copia CSS, HEX, RGB, HSL, HSV o CMYK.
Los colores
Cómo funciona el color en pantalla y en impresión: RGB, CMYK, HSL, hex, rueda de color, degradados, contraste y herramientas PictorX.
¿Listo para probarlo?
Abra PictorX en su navegador: no requiere instalación ni tarjeta de crédito para comenzar.
Ir al editor