Controlador de contraste de color de texto
Compare los colores de texto opaque sRGB con umbrales de contraste de WCAG no redondeados.
Tus datos
Tus resultados
Listo cuando lo necesitesTus resultados aparecerán aquí.
Cómo funciona
Calcule la luminancia relativa de WCAG sRGB y compare la relación de contraste no redondeada con los umbrales de texto normales y grandes. Una presentación simple y un informe de texto conservan los colores suministrados sin cambiar la paleta del sitio web.
Algunas cosas que conviene saber
Opaque 3/6-digit sRGB hex solamente. No alfa, gradientes, colores de gama amplia, imágenes, pruebas de contraste de antialias o no texto. WCAG tiene excepciones; un par de color que pasa no establece la accesibilidad de una página.
Cuándo utilizar esta herramienta
El contraste de texto depende de la diferencia en la luminancia relativa entre un primer plano y fondo, no simplemente si dos colores se ven diferentes. Proporcione dos colores de hex sRGB opacos para ver su relación y los resultados de umbral de texto normal y amplio. Las decisiones utilizan el valor no redondeado, porque el redondeo puede mover un valor casi ilimitado a través de un umbral mostrado. La vista previa ilustra el par suministrado sin cambiar la paleta de este sitio. Un par que pasa no establece la accesibilidad de una página: tamaño de texto real, peso, excepciones y el fondo renderizado todavía necesitan revisión.
- Revise un texto propuesto y un par de fondo sólido.
- Investigar una relación cercana a un umbral AA.
- Guardar un breve informe de color para una revisión de diseño.
Cómo utilizar el corrector de contraste de color de texto
Introduzca dos colores de hex opaco
Utilice #RGB o #RRGGBB para texto y fondo. La transparencia y los valores de gama amplia no son compatibles.
Revisar el texto normal y grande por separado
Lea la relación, resultados AA y AAA. Aplicar el estado de texto grande sólo cuando el tamaño y el peso real cumplen la definición.
Inspeccione la vista previa y reporte
Utilice la vista previa como una ilustración y descargar el informe de texto. Compruebe el fondo de página real, el tratamiento de fuentes y cualquier excepción aplicable por separado.
Texto negro sobre blanco
Inputs
Texto #000000, fondo #ffffff.
Resultado
La relación es 21:1 y cumple con los umbrales AA/AAA normales y grandes.
Lo que significa
Esto verifica el par suministrado; no audita diseño, interacción, indicadores de enfoque o un sitio web completo.
Errores comunes para evitar
Comparación de una relación redondeada
Un número redondeado mostrado puede ocultar un fallo justo debajo de un umbral. Las decisiones utilizan la relación subyacente.
Llamando a cualquier encabezado texto grande
El texto real debe cumplir la definición de tamaño/peso. Un título semántico por sí solo no califica.
Ignorando el fondo real
Una capa gradiente, de imagen o translúcida puede hacer un par diferente de los colores sólidos introducidos.
Preguntas frecuentes
Definiciones, casos de borde y los siguientes pasos prácticos para esta herramienta. Buscar todas las herramientas Preguntas frecuentes
¿Qué formatos de color son compatibles?
Opaque tres o seis dígitos sRGB hex con un líder #. Los valores cortos se expanden. Alfa, colores llamados, gradientes y valores de gama amplia no son aceptados.
¿Qué es AA de texto normal?
Para el par suministrado, la relación mínima probada es 4.5:1. Revisar las excepciones del criterio y el contexto real de texto renderizado por separado.
¿Qué califica como texto grande?
Al menos 18 puntos, equivalentes a 24 píxeles CSS, o atrevidos al menos 14 puntos, alrededor de 18.67 píxelos CSS. Una etiqueta en esta herramienta no cambia su texto renderizado.
¿Por qué 4.5 se muestra cerca de un límite todavía falla?
La clasificación utiliza la relación no redondeada. Un valor justo debajo de 4.5 no cumple ese umbral incluso si una pantalla corta ronda hacia arriba.
¿Cuáles son los umbrales de AAA?
Los cheques mostrados usan 7:1 para texto normal y 4.5:1 para texto grande. Estos son resultados de color-pair, no una evaluación general de la conformidad.
¿La inversión en primer plano y fondo cambia la relación?
No. La relación compara la luminancia más ligera y más oscura simétricamente. El efecto visual y el contexto de lectura todavía pueden diferir.
¿Puede probar botones, iconos o indicadores de enfoque?
Esta herramienta explica el contraste de texto. Los criterios de no texto y los estados de interacción requieren su propia revisión en lugar de una conclusión general de estos resultados de texto.
¿Significa que el sitio web es accesible?
No. Contenido, acceso al teclado, estructura, etiquetas, enfoque, movimiento y muchos otros requisitos no son inspeccionados por un cálculo de dos colores.
Fuentes y método
Utilice las referencias a continuación para comprobar las definiciones y la orientación de la plataforma. El alcance y los límites del modelo se explican anteriormente. Lee nuestros estándares editoriales.