Color Contrast Checker
Check WCAG 2.1 color contrast ratios between any two colors for accessibility compliance — with AA and AAA pass/fail results and a live preview. Se ejecuta completamente en su navegador: no se envían datos a ningún servidor, no se requiere cuenta y es completamente gratis.
La guía completa sobre contraste de color y accesibilidad web
La accesibilidad web ya no es opcional. Dado que se estima que 300 millones de personas en todo el mundo viven con daltonismo o baja visión, diseñar interfaces digitales con un contraste de color adecuado es a la vez una responsabilidad ética y, cada vez más, un requisito legal. Nuestro Comprobador de contraste de color gratuito evalúa instantáneamente los colores de primer plano y de fondo con respecto a los estándares oficiales WCAG (Pautas de accesibilidad al contenido web) para garantizar que su sitio web sea legible para todos.
¿Qué son las WCAG?
Las Pautas de Accesibilidad al Contenido Web (WCAG) son un conjunto de estándares creados por el Consorcio World Wide Web (W3C). Definen cómo hacer que el contenido web sea más accesible para las personas con discapacidad. Las directrices definen tres niveles de conformidad: A (mínimo), AA (estándar) y AAA (máximo/mejorado).
La mayoría de las leyes de accesibilidad (como la ADA en EE. UU. o la EN 301 549 en Europa) exigen que los sitios web cumplan con los estándares WCAG 2.1 Nivel AA.
Comprensión de las relaciones de contraste
Una relación de contraste es una medida matemática de la diferencia en luminancia relativa (brillo) entre dos colores. Se expresa como una relación que va desde 1:1 (blanco sobre blanco, completamente ilegible) hasta 21:1 (negro sobre blanco, máximo contraste).
Requisitos WCAG AA
- Texto normal (menos de 18 píxeles/14 puntos): debe tener una relación de contraste mínima de 4,5:1.
- Texto grande (18 px o 14 px en negrita): debido a que el texto más grande es más fácil de leer, el requisito se reduce a 3.0:1.
- Componentes y gráficos de la interfaz de usuario: las entradas de formulario, los botones y los íconos esenciales deben tener una relación de contraste de al menos 3,0:1 frente a los colores adyacentes.
Requisitos WCAG AAA
Si estás diseñando para portales gubernamentales o aplicaciones especializadas para usuarios con discapacidad visual, debes aspirar al Nivel AAA:
- Texto normal: requiere una relación de contraste 7,0:1.
- Texto grande: requiere una relación de contraste 4,5:1.
Errores comunes en el contraste de color
Incluso los diseñadores experimentados frecuentemente fallan en las comprobaciones de contraste con estos patrones comunes:
- Texto gris claro sobre blanco: aunque es popular en diseños minimalistas y "limpios", el texto secundario suele estar muy por debajo del requisito de 4,5:1, lo que lo hace invisible para los usuarios mayores.
- Texto blanco en botones de colores: los colores primarios brillantes (como el naranja brillante o el azul claro) a menudo no tienen suficiente contraste con el texto blanco. Es posible que tengas que oscurecer ligeramente el color de tu marca para uso web.
- Marcadores de posición como etiquetas: el uso de texto de marcador de posición de color gris claro dentro de los campos del formulario en lugar de etiquetas reales no supera las comprobaciones de contraste y causa problemas de usabilidad.
Utilice nuestra herramienta gratuita de Contraste de color durante la fase de diseño para detectar problemas de accesibilidad con antelación. Si necesita generar esquemas de color compatibles con WCAG, utilice nuestro Generador de paleta de colores o convierta sus colores utilizando nuestro Convertidor de colores.
Cómo utilizar el Color Contrast Checker
- 1
Choose Your Colors
Use the color pickers or type a hex code to set your foreground (text) color and background color.
- 2
Read the Contrast Ratio
The contrast ratio is calculated instantly. A ratio of 4.5:1 or higher passes WCAG AA for normal text.
- 3
Check the WCAG Results
See pass/fail results for Normal Text AA, Normal Text AAA, Large Text AA, Large Text AAA, and UI Components.
- 4
Preview Your Text
The live preview panel shows exactly how your text will look against your chosen background.
Preguntas Frecuentes
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for users with visual impairments, including color blindness. The guidelines are published by the W3C and are a legal requirement in many countries.
What contrast ratio do I need for WCAG AA?
Normal text (under 18px or under 14px bold) requires a contrast ratio of at least 4.5:1 for WCAG AA. Large text (18px+ or 14px+ bold) only requires 3:1. For WCAG AAA (the highest level), ratios of 7:1 and 4.5:1 are required respectively.
What does AAA vs AA mean?
AA is the standard compliance level required by most accessibility laws. AAA is the enhanced level — it is more strict and often used for government sites, medical platforms, or any site where maximum accessibility is a priority.
What is a good contrast ratio for UI components?
Buttons, form inputs, icons, and other UI components that convey information need a minimum 3:1 contrast ratio against their adjacent colors, as per WCAG 2.1 Success Criterion 1.4.11.
Does this tool work for background images?
This tool calculates contrast between two solid colors. For background images, you need to consider the darkest and lightest parts of the image separately. It is generally best practice to add a solid color overlay behind text on image backgrounds.