Asegúrate de que todos puedan leer tu texto
El texto gris claro sobre blanco, el texto blanco en un botón pastel o los enlaces azules sobre un fondo oscuro pueden verse elegantes en un archivo de diseño, pero ser ilegibles para los usuarios reales. Este verificador de contraste mide el ratio de contraste entre cualquier color de texto y fondo, y te indica al instante si cumple con las Pautas de Accesibilidad para el Contenido Web (WCAG) en los niveles AA y AAA; si no es así, te sugiere el color más cercano que sí lo cumple.
Características
- Ratio de contraste de 1:1 a 21:1.
- Resultados WCAG 2 AA y AAA para texto normal, texto grande y componentes de UI.
- Cualquier formato de color: HEX, RGB, HSL o nombres de colores CSS.
- Vista previa en tiempo real con titular, cuerpo de texto y texto pequeño.
- Sugerencias de colores accesibles que mantienen tu tono.
- Botón para intercambiar colores y comprobar versiones de claro sobre oscuro.
Requisitos WCAG de un vistazo
| Contenido | AA | AAA |
|---|---|---|
| Texto normal | 4.5:1 | 7:1 |
| Texto grande (≥ 24 px, o ≥ 19 px en negrita) | 3:1 | 4.5:1 |
| Componentes de UI y gráficos | 3:1 | — |
| Logotipos y texto decorativo | Sin requisitos | Sin requisitos |
Combinaciones comunes
| Texto | Fondo | Ratio | Texto normal AA |
|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | Cumple |
| #767676 | #FFFFFF | 4.54:1 | Cumple (el gris más claro válido) |
| #999999 | #FFFFFF | 2.85:1 | No cumple |
| #FFFFFF | #0EA5E9 | 2.77:1 | No cumple |
| #FFFFFF | #0369A1 | 5.93:1 | Cumple |
Herramientas relacionadas
Convierte colores entre formatos con el Conversor de colores, crea una paleta completa con el Generador de paletas de colores, o selecciona colores exactos de una captura de pantalla con el Selector de color de imagen.