Verificador de contraste de colores WCAG
Prueba cualquier par de color de texto y fondo según WCAG 2.2 (AA y AAA), míralo en vivo y obtén el color más cercano que cumple cuando falla
Colores a probar
Ingresa un color HEX, rgb() o hsl() válido.
Ingresa un color HEX, rgb() o hsl() válido.
¿Se lee a primera vista?
El veloz murciélago hindú comía feliz cardillo y kiwi. Cambia los colores y el tamaño para ver cómo se comporta este párrafo.
Un color por línea (HEX, rgb() o hsl()). Hasta 6 colores; se revisa cada par.
- Texto normal · AA (4,5:1) ✓
- Texto normal · AAA (7:1) ✓
- Texto grande · AA (3:1) ✓
- Texto grande · AAA (4,5:1) ✓
- Componentes de interfaz y gráficos · AA (3:1) ✓
Agrega al menos 2 colores válidos para comparar
AAA ≥ 7:1 · AA ≥ 4,5:1 · AA texto grande ≥ 3:1 (solo texto grande)
Cómo usar esta herramienta
- Ingresa el color del texto y el del fondo en HEX, rgb() o hsl(), o usa los selectores de color.
- Fija el tamaño del texto en px y marca negrita si corresponde, para que la herramienta sepa si cuenta como texto grande.
- Lee la relación de contraste y si cumple o no cumple en AA y AAA, texto normal y grande.
- Si falla, usa Aplicar en el color sugerido o cambia al análisis de paleta para probar hasta 6 colores.
Ejemplo práctico
El gris oscuro #333333 sobre blanco da 12,63:1 y supera todos los niveles. El gris medio #777777 sobre blanco da 4,47:1: la relación se trunca, no se redondea, así que no alcanza el umbral AA de 4,5:1 para texto normal aunque parezca cercano. La herramienta sugiere #767676 (4,54:1) para AA y #595959 (7,00:1) para AAA, conservando el tono y cambiando solo la luminosidad. El texto grande empieza en 24 px normal o unos 18,66 px en negrita y solo exige 3:1 para AA. Una relación aprobada no garantiza legibilidad para todos, pues también influyen el grosor, el tamaño y la vista.
Metodología
Este verificador implementa el algoritmo de contraste de WCAG 2.x (criterios de éxito 1.4.3, 1.4.6 y 1.4.11), sin cambios desde WCAG 2.0 en 2008 y mantenido en las versiones 2.1 y 2.2. Las relaciones se truncan, nunca se redondean: 4,499:1 se muestra como 4,49:1 y falla correctamente. Cuando un par falla, la sugerencia conserva el matiz y la saturación de tu color y busca solo en el eje de luminosidad el valor más cercano que alcanza el objetivo.
Seis colores comunes sobre blanco y un rojo corregido
Relaciones que muestra el verificador para cada color de texto sobre #FFFFFF.
| Color del texto | Relación | Normal AA (4,5:1) | Grande AA (3:1) |
|---|---|---|---|
| #0B5FFF | 5,12:1 | Cumple | Cumple |
| #008000 | 5,13:1 | Cumple | Cumple |
| #E53935 | 4,22:1 | No cumple | Cumple |
| #FF0000 | 3,99:1 | No cumple | Cumple |
| #808080 | 3,94:1 | No cumple | Cumple |
| #FFA500 | 1,97:1 | No cumple | No cumple |
Las relaciones se truncan, nunca se redondean. La columna que aplica depende del tamaño: el texto cuenta como grande desde 24 px normal o 18,66 px en negrita; por debajo, lee la columna Normal. El naranja #FFA500 falla en todo con 1,97:1, y ni como borde de interfaz alcanza sobre blanco. Los rojos, naranjas y grises medios son los problemas habituales, y un par que falla en texto de cuerpo aún puede pasar como texto grande o como borde de interfaz.
El rojo de error. Dana usa #E53935 para los errores de formulario en 16 px. Marca 4,22:1, así que no cumple AA como texto normal. La herramienta conserva su matiz y solo cambia la luminosidad: #E32C28 llega a 4,50:1 para AA y #AF1A17 llega a 7,04:1 para AAA. Ella aplica #E32C28 a los mensajes de 16 px y deja #E53935 para los títulos de 24 px y los bordes de los campos, donde basta 3:1. Aun así debe leerse bien para ti: una relación que cumple es un piso, no una garantía.
Accesibilidad y color fiel
Libros y equipo para diseñadores y desarrolladores que cuidan que el color sea legible y exacto
Diseño inclusivo para la accesibilidad: guía práctica de accesibilidad digital, UX y diseño web y de apps inclusivo
Guía práctica de Dale Cruse y Denis Boudreau sobre accesibilidad digital, UX y diseño web y de apps inclusivo (libro en inglés).
Kit Calibrite Photo con Display Pro HL: colorímetro para calibrar monitores y ColorChecker Passport Photo 2
Colorímetro Display Pro HL y ColorChecker Passport Photo 2 para un flujo de color preciso de la captura a la edición: archivos RAW, perfiles de cámara personalizados y balance de blancos.
Como Afiliado de Amazon, ganamos comisiones por compras elegibles, sin costo adicional para ti.
Preguntas frecuentes
¿Por qué #777777 sobre blanco no cumple si se ve bien? ▼
WCAG mide la luminancia relativa, no cómo se ve un gris en tu pantalla. #777777 sobre blanco da cerca de 4,47:1, justo debajo del mínimo AA de 4,5:1 para texto normal. #767676 es el gris neutro más claro que cumple AA sobre blanco (4,54:1). Estos casos al límite son la razón por la que la herramienta trunca las relaciones en lugar de redondearlas.
¿Cómo decide la herramienta si mi texto cuenta como grande? ▼
Usa el tamaño y el peso que ingreses: 24 px (18 pt) o más en peso normal, o 18,66 px (14 pt) o más en negrita. Define el tamaño y marca «Texto en negrita» si corresponde: se resaltan las filas que aplican y el veredicto sigue esa categoría.
¿Los placeholders, los botones deshabilitados y los logotipos tienen que cumplir? ▼
Los componentes de interfaz inactivos (deshabilitados) y los logotipos están exentos del criterio 1.4.3, pero el texto de ayuda de un campo (placeholder) no: debe alcanzar 4,5:1 como cualquier otro texto. Los íconos y bordes de campo necesarios para identificar un control caen bajo la regla de 3:1 para contraste no textual.
¿Puedo probar texto sobre un degradado, una foto o un color semitransparente? ▼
Esta herramienta compara dos colores sólidos. Con un color semitransparente, mézclalo primero con el fondo real e ingresa el resultado. Con degradados y fotos, prueba el color del texto contra la zona más clara y la más oscura detrás de él y quédate con el peor resultado.
¿Debo apuntar a AA o a AAA? ▼
AA es el nivel que piden la mayoría de las normas que se basan en WCAG, así que es el mínimo práctico. AAA es una meta más estricta que no se espera para cada elemento de un sitio, pero es razonable para textos largos de lectura.
¿Esta herramienta usa APCA o el modelo de contraste de WCAG 3? ▼
No. APCA es un modelo candidato para WCAG 3, que todavía es un borrador. Este verificador usa la relación de WCAG 2.x, la misma fórmula en la que se basan hoy las auditorías y las normativas.