Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.
Comprueba un par de texto y fondo contra WCAG 2.2 y contra APCA, simula las tres dicromatopsias y puede puntuar una paleta entera como matriz. Muestra los dos estándares porque discrepan en pares reales, y esa discrepancia es la parte útil.
El veloz murciélago hindú comía feliz cardillo y kiwi.
WCAG 2.2
4,54:1
- PASAAA — 1.4.3 Contraste (mínimo), texto normalnecesita 4,5:1
- FALLAAAA — 1.4.6 Contraste (mejorado), texto normalnecesita 7:1
- PASA1.4.11 No textual — iconos, bordes, anillos de foconecesita 3:1
Cuenta como texto normal. El grande empieza en 24px, o en 18,66px con peso 700. Es el estándar al que remite hoy la ley de accesibilidad: tanto EN 301 549 como la Section 508 apuntan a WCAG, así que este es el número que usará una auditoría.
APCA
Lc 71,6
Texto oscuro sobre fondo claro. El signo es la polaridad: a diferencia de WCAG, intercambiar los dos colores cambia la respuesta.
Alcanza Lc 60 — texto legible. Se lee a tamaño grande, pero no para leer un rato seguido a 16px.
16px con peso 400 no basta a este Lc.
| Nivel | con peso 400 | con peso 700 |
|---|---|---|
| Lc 90 | 14px | 12px |
| Lc 75 | 18px | 14px |
| Lc 60 | 24px | 18px |
| Lc 45 | 36px | 24px |
| Lc 30 | 48px | 36px |
Los dos estándares discrepan, y es a propósito
La ratio de WCAG 2 es una fórmula de 2008: un cociente de luminancias relativas con un término de velo fijo, simétrico en sus dos argumentos. APCA modela la respuesta perceptual: depende de la polaridad, porque a igual diferencia de luminancia el texto oscuro sobre claro se lee de verdad mejor que al revés, y toma el tamaño y el peso de la letra como parte de la pregunta en vez de como una regla aparte añadida después.
Por eso discrepan en pares reales, y la discrepancia no es un fallo de ninguno de los dos. WCAG 2 aprueba combinaciones de gris medio sobre blanco que cuesta leer de verdad, y suspende algunas de oscuro sobre oscuro que están bien. WCAG 2.2 es lo que referencia hoy la ley de accesibilidad, así que es la que ejecutará una auditoría. APCA es el mejor modelo de lo que experimenta quien lee. Usa WCAG para aprobar y APCA para decidir cuál de las opciones aprobadas eliges.
Este par es uno de ellos: WCAG AA dice que pasa y APCA dice no adecuado a 16px/400.
Visión del color
Simulado con las proyecciones de Viénot–Brettel–Mollon, aplicadas en luz lineal. Aplicarlas a bytes codificados con gamma —el atajo habitual— hace que un par parezca más distinguible de lo que es, que es justo la dirección en la que una comprobación de accesibilidad no debe equivocarse.
Texto de muestra
Protanopía (sin conos rojos, ~1 % de los hombres) · 4,54:1
Texto de muestra
Deuteranopía (sin conos verdes, ~1 % de los hombres) · 4,54:1
Texto de muestra
Tritanopía (sin conos azules, ~0,01 %) · 4,54:1
Texto de muestra
Acromatopsia (sin color, ~0,003 %) · 4,54:1
Cómo se usa
Introduce los dos colores
Color de texto y fondo, en cualquier notación. El párrafo de muestra encima de los veredictos se dibuja con ellos al tamaño y peso que fijes.
Fija el tamaño y el peso reales
WCAG cambia su umbral a 24px, o 18,66px con peso 700. APCA toma el tamaño y el peso como parte de la pregunta y no como una regla aparte. Ninguna de las dos respuestas significa mucho al tamaño equivocado.
Lee los dos veredictos
WCAG para pasar una auditoría, APCA para decidir entre las opciones que pasan. Cuando discrepan, la página lo dice explícitamente.
Comprueba la paleta entera de una vez
Pega tus colores, uno por línea, y obtén una matriz N×N. Es N×N y no un triángulo porque APCA no es simétrico: los mismos dos colores puntúan distinto según cuál sea el texto.
Preguntas frecuentes
¿Qué estándar debería seguir?
WCAG 2.2, porque es al que hace referencia la ley: EN 301 549 y la Sección 508 apuntan los dos a él, así que es el número que correrá una auditoría. APCA es el mejor modelo de lo que experimenta un lector, así que úsalo para elegir entre los pares que ya pasan.
¿Por qué discrepan WCAG y APCA?
La relación de WCAG 2 es una fórmula de 2008: luminancias relativas con un término fijo de dispersión, simétrica en sus argumentos. APCA modela la percepción, depende de la polaridad —oscuro sobre claro se lee realmente mejor que al revés— y tiene en cuenta el tamaño y el peso. Así que WCAG aprueba algún gris medio sobre blanco que cuesta leer, y suspende algún oscuro sobre oscuro que está bien.
¿Por qué la simulación de visión del color es distinta de la de otras herramientas?
Porque se aplica en luz lineal. El atajo común es correr la proyección sobre bytes con codificación gamma, lo que hace que los pares parezcan más distinguibles de lo que son: la dirección equivocada en la que puede equivocarse una comprobación de accesibilidad.
¿Pasar el contraste significa que el texto es legible?
Significa que supera un listón medible. La longitud de línea, el interlineado, el espaciado entre letras, la propia fuente y si el texto está sobre una fotografía importan todos, y ninguno está en ninguno de los dos números. Un 4,5:1 aprobado en una tipografía fina de 12px sigue costando trabajo.
Puede recibir de
Extractor de paleta de una imagen
Palette Extractor
Saca una paleta de N colores de una imagen y la exporta en hexadecimal, como variables CSS o como muestrario ASE.
Color medio y color dominante
Average & Dominant Colour
Devuelve un color representativo de una imagen —media, mediana o el más frecuente— como valor de color reutilizable.
Simulador de daltonismo
Colour Blindness Simulator
Vuelve a dibujar una imagen tal como la vería alguien con protanopía, deuteranopía, tritanopía o visión en escala de grises.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Simulador de daltonismo
Colour Blindness Simulator
Vuelve a dibujar una imagen tal como la vería alguien con protanopía, deuteranopía, tritanopía o visión en escala de grises.
Escala de tonos y sombras
Tint & Shade Scale
Genera una escala de luminosidad de 50 a 950 desde un solo color con pasos perceptualmente iguales, lista para usar como tokens de diseño.
Paleta para modo oscuro
Dark Mode Palette
Construye una rampa de 50 a 950 desde un color y la refleja en una versión oscura, de modo que cada pareja de tokens conserva su contraste.
Generador de paletas
Palette Generator
Construye una paleta armónica a partir de un color base con reglas de complementarios, tríadas y análogos.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.