Operacional
Iniciar sesión / Registrarse
common.you_need_to_be_loggedin_to_add_tool_in_favorites
Comprobador de contraste de color
Anuncio
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
21.00:1
WCAG Compliance
Normal Text
✓
AA Pass
✓
AAA Pass
Large Text (18pt+ or 14pt+ bold)
✓
AA Pass
✓
AAA Pass
UI Components & Graphics
✓
AA Pass
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
Black on White
White on Blue
White on Dark Gray
Ingrese sus combinaciones de colores a continuación para probarlas con nuestro verificador de contraste de color y ver al instante si cumplen con los estándares de accesibilidad.
Cómo funciona nuestro comprobador de contraste de color
Ingrese sus colores de primer plano y de fondo usando valores hexadecimales RGB, o selecciónelos directamente con el Selector de color.
- Ajuste Alfa para cambiar qué tan transparente es el color de primer plano.
- Utilice el control deslizante Luminosidad para hacer que el color parezca más claro o más oscuro.
Luego, nuestra herramienta calcula la relación de contraste y la compara con las pautas WCAG:
- WCAG 2.0 Nivel AA
- Al menos 4.5:1 para el cuerpo del texto normal.
- Al menos 3:1 para texto grande
- WCAG 2.1 (UI y gráficos)
- Al menos 3:1 para iconos, bordes y otros componentes de la interfaz
- Nivel WCAG AAA
- Al menos 7:1 para texto normal
- Al menos 4.5:1 para texto grande
Texto grande significa:
- 14 puntos (aproximadamente 18,66 px) y negrita, o
- 18 puntos (aproximadamente px) o más grande
Puedes usar el cuentagotas en el Selector de color para capturar colores exactos de cualquier cosa en tu pantalla.
Para enlaces que se basan únicamente en el color para destacar, utilice nuestro verificador de contraste de color para asegurarse de que cumplan con los estándares de accesibilidad y sean fáciles de leer para todos.