Un comprobador de contraste de color para texto gris sobre blanco
El gris #777777 sobre blanco se lee bien en una pantalla de diseño y mal al sol. Este comprobador de contraste de color calcula la relación exacta según WCAG 2.x. Escribe el color del texto y el del fondo, y el valor aparece al instante: para ese par, 4.47:1.
Cómo se usa
- Escribe el Color del texto o elígelo con el selector. Campo y selector se mantienen sincronizados.
- Haz lo mismo con el Color de fondo. Acepta
#rgb,#rrggbbyrgb(r, g, b). Otro formato muestra un error junto al campo. - Mira la relación y las cinco filas. Si falla AA para texto normal, aparece el color de texto más cercano que llega a 4,5:1.
- Pulsa Usar este color para aplicarlo o Intercambiar colores para probar texto claro sobre fondo oscuro.
Las cinco filas y sus mínimos
AA pide 4,5 para texto normal y 3 para texto grande. AAA pide 7 y 4,5. La quinta fila, componentes de interfaz y gráficos, pide 3. Es texto grande el de 18 pt (24 px) o más, o el de 14 pt (18,67 px) o más en negrita.
Por qué 4,496 no llega a 4,5
La herramienta corta la relación tras dos decimales. No redondea. Un 4,496 se muestra como 4.49:1 y suspende. Redondeado diría 4.50 y aprobaría un par que no llega. Con el ejemplo pasa algo parecido: el valor real es 4,478 y verás 4.47.
Cómo se calcula el color más cercano
Se conservan el tono y la saturación. Solo cambia la luminosidad, en pasos de 0,1 puntos porcentuales, hacia más oscuro y hacia más claro. Se muestra el resultado más próximo al original. Para el ejemplo sale cerca de #767676.
Lo que la herramienta no puede juzgar
- No admite alfa: ni
rgba()ni hexadecimal de ocho cifras. - Un texto sobre una foto o un degradado no tiene un único fondo. Revisa el punto peor.
- No sabe qué tamaño o grosor usa tu página. Las filas de texto grande solo dicen qué umbral aplicaría.
Qué pasa con tus colores
El cálculo se hace en la página. No se envía ninguna petición y los colores no se guardan. Puedes comprobarlo en la pestaña Red de las herramientas de desarrollo.