Contrast Checker
WCAG contrast check
WCAG contrast check Se ejecuta localmente en su navegador
The quick brown fox
Small body text at 14px
| Normal text (AA) | needs 4.5:1 | Pass |
| Normal text (AAA) | needs 7:1 | Pass |
| Large text 18pt+ (AA) | needs 3:1 | Pass |
| Large text 18pt+ (AAA) | needs 4.5:1 | Pass |
| UI components and graphics (AA) | needs 3:1 | Pass |
Text: #1a1a1a Background: #ffffff Contrast ratio: 17.40:1 Normal text (AA) (needs 4.5:1): Pass Normal text (AAA) (needs 7:1): Pass Large text 18pt+ (AA) (needs 3:1): Pass Large text 18pt+ (AAA) (needs 4.5:1): Pass UI components and graphics (AA) (needs 3:1): Pass
About the
El Comprobador de contraste mide la relación de contraste entre un color de texto y un color de fondo usando la fórmula de luminancia WCAG y le indica qué niveles de accesibilidad pasa ese par. Esta es la verificación que decide si el texto del cuerpo es realmente legible: una proporción de 4,5 a 1 es el mínimo para texto normal, 3 a 1 para texto grande y límites de interfaz, y 7 a 1 para cumplimiento mejorado. Juzgar el contraste visualmente no es confiable, porque el ojo es mucho más sensible al verde que al azul, razón por la cual un amarillo que parece brillante y un azul que parece oscuro pueden obtener puntuaciones casi idénticas.
Where people use the
- Comprobar si el texto del cuerpo sobre un fondo de color cumple con AA.
- Elegir entre texto en blanco y negro para el color de un botón.
- Auditar una paleta existente antes de un rediseño.
- Documentar una decisión de accesibilidad en un ticket.
How to use the
- 1
Establecer el color del texto
Escriba un valor hexadecimal como 1a1a1a o utilice el selector de color. Se aceptan taquigrafías de tres dígitos como f0a.
- 2
Establecer el color de fondo
Lo mismo para el fondo. La vista previa se actualiza a medida que cambia cualquiera de ellos.
- 3
leer la proporción
El número va desde 1:1, colores idénticos, hasta 21:1, negro sobre blanco. Más alto significa más legible.
- 4
Consulta el nivel que necesitas
El texto del cuerpo normal necesita 4,5 a 1 para AA y 7 a 1 para AAA. Los títulos en negrita de 18 puntos o 14 puntos y los bordes de la interfaz de usuario necesitan 3 a 1.
- 5
Mira la vista previa y el número.
Un par puede pasar en papel y aun así verse mal en un tamaño pequeño o en una pantalla de baja calidad. Si parece difícil de leer, es difícil de leer.
Consejos y mejores prácticas
- Oscurece un color para el texto y mantén la versión más brillante para los rellenos.
- Marque el tamaño más pequeño en el que realmente se utilizará el texto.
- Los bordes y los íconos también necesitan 3 a 1, no solo texto.
Preguntas frecuentes
¿Cuál es la fórmula de la relación de contraste?
Cada color se convierte a luminancia relativa utilizando los pesos estándar, 0,2126 para rojo, 0,7152 para verde y 0,0722 para azul, después de la corrección gamma. La relación es entonces la luminancia más clara más 0,05 dividida por la más oscura más 0,05. El resultado oscila entre 1:1 y 21:1.
¿Por qué falla el color de mi marca?
Porque la mayoría de los colores de tonos medios saturados no pueden alcanzar 4,5 a 1 contra el blanco. La solución habitual es oscurecer el color para uso de texto y mantener la versión más brillante para rellenos grandes, que es exactamente lo que hacen la mayoría de los sistemas de diseño con su color primario.
¿Pasar el ratio es suficiente para ser accesible?
Es necesario pero no suficiente. El texto muy grande o muy pequeño, los pesos de fuente delgados, el texto sobre imágenes y ciertas formas de deficiencia en la visión del color afectan la legibilidad más allá de la proporción. Pruebe con usuarios reales donde pueda.
¿Importa la dirección, claro sobre oscuro u oscuro sobre claro?
No. La proporción es simétrica, por lo que negro sobre blanco y blanco sobre negro obtienen una puntuación de 21:1. Lo que difiere en la práctica es el deslumbramiento y el peso percibido, que es un juicio de diseño más que de cumplimiento.
¿Qué se considera texto grande?
En términos WCAG, 18 puntos o más, o 14 puntos o más cuando está en negrita. En píxeles CSS, eso es aproximadamente 24 px, o aproximadamente 18,66 px en negrita.
¿Dónde ocurre el cálculo?
Totalmente en tu navegador. No se carga nada, por lo que puedes consultar los colores desde una guía de marca que aún no es pública.