Herramientas / Color
Contraste de color
Revisa un par de texto y fondo para legibilidad, UI y contraste WCAG 2.2.
1. Colores
WCAG is the compliance result. APCA is a supplemental readability signal.
2. Vista previa
3. Resultado
Ratio de contraste
Excelente13.24 : 1
Resultados WCAG
AAA large text (4.5:1) Pasa
AAA normal text (7:1) Pasa
AA large text (3:1) Pasa
AA normal text (4.5:1) Pasa
UI/non-text contrast (3:1) Pasa
Senal APCA de legibilidad
Lc 98.9
La senal APCA es fuerte
Info de color
Frente
#1A237E
- RGB
- 26, 35, 126
- HSL
- 235deg, 66%, 30%
- Luminancia relativa
- 0.0293
Fondo
#FFFFFF
- RGB
- 255, 255, 255
- HSL
- 0deg, 0%, 100%
- Luminancia relativa
- 1.0000
4. Pruebas de accesibilidad
Excelente
La senal APCA es fuerte
Checks WCAG y accesibilidad
WCAG 2.2 AA Normal Text Pasa
WCAG 2.2 AA Large Text Pasa
WCAG 2.2 AAA Normal Text Pasa
WCAG 2.2 AAA Large Text Pasa
UI Components / Non-text Pasa
Senal APCA de legibilidad Lc 98.9
Seguridad de foco Pasa
Cuidado en deshabilitados Aviso
Simulacion daltonismo
Vision normal
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
Las simulaciones son aproximadas. Prueba con usuarios reales cuando sea posible.
5. Recomendaciones
Sugerencias
Buen contraste para texto
Excelente para encabezados
Funciona para botones y UI
La senal APCA es fuerte
Revisa estados deshabilitados y opacidad
Ajustes automaticos
Par actual
#1A237E
#FFFFFF
Si quieres mantener el fondo:
Si quieres mantener el texto:
Buenas practicas
- Usa al menos 4.5:1 en texto normal
- Usa al menos 3:1 en texto grande
- No uses solo color para comunicar info
- Prueba simulaciones tambien con usuarios
- Revisa componentes botones, inputs, foco
- Considera luz fuerte y pantallas debiles