Comprobador de contraste de color

Comprobador de contraste de color WCAG gratuito. Pruebe el texto y los colores de fondo para comprobar el cumplimiento de accesibilidad AA y AAA con una relación de contraste en vivo y vista previa, hexadecimal o RGB.

Construido y mantenido por Shehzad Munir ·

Comprobador de contraste de color
Loading Loading Contrast Checker
Share

Haz que tu texto sea legible para todos

Verifique la relación de contraste entre el texto y el color de fondo con los estándares WCAG AA y AAA, con una vista previa en vivo y entrada hexadecimal o RGB.

El texto de bajo contraste es uno de los fallos de accesibilidad más comunes. Este verificador calcula la relación de contraste exacta entre el texto y los colores de fondo usando la fórmula oficial de luminancia relativa WCAG, luego le indica si pasa AA (4.5:1 para texto normal, 3:1 para texto grande) y el AAA más estricto (7:1 y 4.5:1). Una vista previa en vivo muestra texto real en los colores elegidos.

Características

  • Resultados de aprobación/rechazo de WCAG AA y AAA
  • Cálculo de la relación de contraste en vivo
  • Entrada hexagonal y RGB con selectores de color
  • Vista previa de texto en vivo en tus colores
  • Umbrales de texto normal y grande
  • Se ejecuta localmente en su navegador

Cómo utilizar Comprobador de contraste de color

  1. 1

    Elige el color del texto

    Elija o escriba el color de primer plano.

  2. 2

    Elige el fondo

    Elija o escriba el color de fondo.

  3. 3

    leer la proporción

    Vea la relación de contraste y los resultados AA/AAA.

  4. 4

    Ajustar

    Modifica los colores hasta que pasen.

Casos de uso comunes

  • Verifique que el texto de la interfaz de usuario cumpla con la accesibilidad WCAG
  • Comprobar contraste de botones y enlaces
  • Auditar la paleta de colores de una marca
  • Corregir texto de marketing de bajo contraste

guía detallada

Introduce los colores como quieras

Utilice los selectores de color o escriba códigos hexadecimales y valores rgb() directamente, la herramienta analiza ambos. A medida que ajustas cualquiera de los colores, la proporción y las insignias de aprobado/reprobado se actualizan instantáneamente, por lo que puedes modificar un tono hasta que cumpla. Todo se ejecuta localmente, lo que lo convierte en un complemento rápido al diseñar la interfaz de usuario, los temas y las páginas de marketing.

Qué significan los niveles de contraste WCAG

WCAG 2 mide el contraste como una proporción de 1:1 (sin contraste) a 21:1 (negro sobre blanco). El nivel AA, la base legal y de la industria habitual, requiere al menos 4,5:1 para texto normal y 3:1 para texto grande, es decir, 24 píxeles normales o aproximadamente 18,66 píxeles en negrita y superiores. El nivel AAA los eleva a 7:1 y 4,5:1. Las partes de la interfaz de usuario, como los bordes de entrada, los anillos de enfoque y los íconos que tienen significado, necesitan al menos 3:1 con respecto a su entorno. La relación se calcula a partir de la luminancia relativa de cada color, por lo que dos colores que parecen diferentes aún pueden fallar si son igualmente brillantes, lo cual es común entre el rojo y el verde.

Arreglando un par de colores defectuoso

Cuando un par falla, cambie la luminosidad en lugar del tono: oscurezca el texto o aclare el fondo en pequeños pasos hasta que pase la proporción y el color seguirá pareciéndose a su marca. Los colores de marca en tonos medios, como el naranja medio o el verde azulado, a menudo no pueden llevar texto blanco en AA. En ese caso, utilice el color de la marca para títulos, bordes o fondos grandes y establezca el texto del cuerpo en un tono más oscuro. Pruebe también el texto del marcador de posición y los estados deshabilitados, ya que a menudo son demasiado débiles. Recuerde que la proporción no tiene en cuenta fuentes delgadas o texto en las imágenes, así que deje un margen adicional en esos casos.

Preguntas frecuentes

¿Qué relación de contraste necesito para aprobar WCAG?

Para AA, el texto normal necesita 4,5:1 y el texto grande 3:1. Para el AAA más estricto, el texto normal necesita 7:1 y el texto grande 4,5:1. El texto grande tiene aproximadamente 18 puntos o 14 puntos en negrita.

¿Cómo se calcula la relación de contraste?

Utiliza la fórmula de luminancia relativa WCAG para ambos colores, luego divide la luminancia más clara (más 0,05) por la más oscura (más 0,05), dando un valor de 1:1 a 21:1.

¿Puedo ingresar RGB además de hexadecimal?

Sí: escriba códigos hexadecimales como #1e293b o rgb(30, 41, 59), o utilice los selectores de color. Ambos formatos se analizan instantáneamente.

¿Es gratis?

Sí, completamente gratis sin necesidad de registrarse y ejecutándose completamente en su navegador.

¿Cómo compruebo si se puede acceder a dos colores juntos?

Ingrese el texto y los valores hexadecimales de fondo; el verificador calcula la relación de contraste y muestra si pasa WCAG AA y AAA para texto normal y grande.

¿Por qué el contraste de color es importante para la accesibilidad?

El bajo contraste hace que el texto sea difícil de leer para personas con baja visión o daltonismo. Cumplir con las proporciones WCAG mantiene el contenido legible para todos y es un requisito común de accesibilidad y SEO.

De la revista

All articles →
How to Remove EXIF Metadata From Your PhotosTool Guides

How to Remove EXIF Metadata From Your Photos

Photos carry hidden data like GPS location and camera details. Here's why that matters for privacy and how to strip it before sharing.

SM
Shehzad Munir
Aug 19, 2026 · 3 min
What Is CPS? How to Test and Improve Your Click SpeedTool Guides

What Is CPS? How to Test and Improve Your Click Speed

CPS means clicks per second. Here's how it's measured, what a good score looks like, and how to test your own click speed for free.

SM
Shehzad Munir
Aug 17, 2026 · 3 min
How to Merge PDF Files for Free (Without Uploading Them)Tool Guides

How to Merge PDF Files for Free (Without Uploading Them)

Combine several PDFs into one document, reorder the pages, and keep everything private — no software and no server upload.

SM
Shehzad Munir
Aug 14, 2026 · 2 min