Comprobador de contraste WCAG
Comprueba la accesibilidad de tus colores texto/fondo.
- Instantánea
- Gratis
- Privada (procesada localmente)
- Sin registro
Colores legibles por todos, comprobados en dos clics
Casi una de cada doce personas percibe mal ciertos contrastes. Las WCAG (Web Content Accessibility Guidelines) fijan ratios mínimos entre texto y fondo; este comprobador los calcula en directo, con la fórmula oficial de luminancia relativa, y muestra una vista previa real de tu combinación.
-
Elige tus dos colores
Con el selector o pegando un código hexadecimal (#rrggbb o #rgb).
-
Lee el ratio
De 1:1 a 21:1, con los cuatro veredictos AA/AAA para texto normal y grande.
-
Ajusta si hace falta
Modifica la claridad de uno de los colores hasta aprobar, guiándote por la vista previa.
Los umbrales WCAG en una tabla
| Nivel | Texto normal | Texto grande |
|---|---|---|
| AA (mínimo) | 4,5 : 1 | 3 : 1 |
| AAA (reforzado) | 7 : 1 | 4,5 : 1 |
| Componentes de interfaz (2.1) | 3 : 1 | 3 : 1 |
El contraste debe verificarse para cada par texto/fondo de tu interfaz — recuerda los estados: enlaces con hover, botones desactivados, placeholders y modo oscuro.
Preguntas frecuentes
¿Qué es el ratio de contraste?
Es la relación entre la luminancia del color más claro y la del más oscuro, de 1:1 (idénticos) a 21:1 (negro sobre blanco). Las WCAG lo usan para garantizar la legibilidad del texto para todos, incluidas las personas con baja visión.
¿Qué umbrales hay que alcanzar?
Nivel AA: 4,5:1 para texto normal, 3:1 para texto grande. Nivel AAA, más exigente: 7:1 y 4,5:1 respectivamente. AA es el mínimo legal en muchos países para servicios públicos.
¿Qué cuenta como «texto grande»?
Según las WCAG: al menos 18 pt (24 px) en peso normal, o 14 pt (18,5 px) en negrita. Los títulos grandes toleran por tanto un contraste menor que el cuerpo de texto.
¿El contraste también aplica a elementos no textuales?
Sí: desde WCAG 2.1, los componentes de interfaz (bordes de campos, iconos informativos, estados de foco) deben alcanzar 3:1 con sus colores adyacentes (criterio 1.4.11).
Mi ratio es insuficiente: ¿cómo lo corrijo?
Oscurece el texto o aclara el fondo (o al revés en tema oscuro). A menudo bastan unos pasos de luminosidad — mantén el mismo tono y juega con la claridad para conservar tu paleta.