Ejemplo práctico
Prueba el texto normal, el texto placeholder y el estado hover por separado, porque cada uno suele usar un color de primer plano diferente.
Comprobador de contraste de color
Ratio de contraste
–
Texto grande de encabezado (24px)
Texto normal de 14-16px. La mayoría del texto de interfaz, etiquetas y párrafos entra en esta categoría, por lo que tiene los requisitos de contraste más estrictos.
Acerca del comprobador de contraste
El ratio de contraste mide cuán distinguible es el texto de su fondo, en una escala de 1:1 (idénticos) a 21:1 (negro sobre blanco). WCAG exige al menos 4.5:1 para texto normal y 3:1 para texto grande en el nivel AA, y 7:1 / 4.5:1 en el nivel AAA.
Este comprobador calcula el ratio a partir de la luminancia relativa exactamente como define WCAG 2.x, muestra resultados de aprobado/suspenso para cada nivel y previsualiza tus colores sobre texto real. Se aceptan las notaciones HEX, RGB y HSL.
Cómo comprobar el contraste de color
- Introduce el color del texto como HEX, RGB o HSL, o usa el selector de color.
- Introduce el color de fondo sobre el que está el texto.
- Lee el ratio de contraste y los resultados AA/AAA.
- Ajusta los colores hasta que todas las comprobaciones necesarias pasen y copia el informe.
Consejos de accesibilidad
- Texto grande significa al menos 24px normal o unos 18.66px en negrita — solo entonces aplica el umbral de 3:1.
- Revisa los estados hover, focus, disabled y placeholder — a menudo usan tonos más claros que no aprueban.
- Los componentes de interfaz y los iconos necesitan al menos 3:1 frente a los colores adyacentes (WCAG 1.4.11).
- Prueba el modo oscuro por separado; las paletas invertidas cambian todos los ratios.
Comprobaciones antes de publicar una paleta de colores
Un ratio aprobado es el punto de partida, no la meta. Revisa cómo se comporta el par en estados reales de la interfaz.
Prueba ambos temas
Un par que aprueba sobre fondo claro puede fallar tras la inversión del modo oscuro. Revisa cada tema que publiques.
Revisa los estados interactivos
Hover, focus, disabled y visited suelen usar tonos más claros que caen por debajo de 4.5:1 sin que nadie lo note.
No dependas solo del color
Combina el color con iconos, subrayados o etiquetas de texto para que la información sobreviva a las deficiencias de visión cromática.
Verifica los supuestos de texto grande
El umbral relajado de 3:1 solo aplica desde 24px, o 18.66px en negrita. Confirma el tamaño renderizado, no el token de diseño.
Un ejemplo práctico, un caso límite y una nota del autor
Caso límite
Un primer plano translúcido tiene un contraste efectivo distinto sobre cada fondo que tenga debajo, así que el valor hex por sí solo es insuficiente.
Nota del autor
Uso la razón numérica como filtro y luego verifico los estados focus, disabled, modo oscuro y alto contraste en el componente real.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.
Convertidor de colores
Convierta colores HEX, RGB, RGBA y HSL instantáneamente en su navegador.
Utilidades varias
›
Generador de gradiente CSS
Genere, analice y obtenga una vista previa de degradados lineales y radiales CSS en línea. Generador de gradientes gratuito para desarrolladores y diseñadores.
Utilidades varias
›
Generador de sombras de texto CSS
Cree, obtenga una vista previa, analice y copie valores de sombra de texto CSS con múltiples capas de sombra.
Utilidades varias
›
Generador/analizador de Box Shadow CSS
Genere, analice y previsualice valores de `box-shadow` CSS en línea. Ajuste offset, blur, spread, color e `inset`.
Utilidades varias
›
Preguntas frecuentes de contraste de color
¿Qué ratio de contraste necesito para texto normal?
Al menos 4.5:1 para WCAG AA y 7:1 para AAA. Normal significa menor que 24px normal o 18.66px en negrita.
¿Qué cuenta como texto grande?
Texto de 24px en adelante, o negrita desde unos 18.66px. El texto grande necesita 3:1 (AA) o 4.5:1 (AAA).
¿Qué formatos de color puedo introducir?
HEX como #1f2937, HEX corto, rgb()/rgba() y hsl()/hsla(). Los canales alfa se ignoran en el cálculo.
¿Cómo se calcula el ratio?
Con la fórmula de luminancia relativa de WCAG: (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro.