Texto blanco en un botón verde: mida antes de elegir

Introduzca los colores reales

Empiece con #22c55e para la superficie y #ffffff para el texto. Son ejemplos: en su proyecto obtenga los valores calculados del navegador. El primer plano es la etiqueta y el fondo es el propio botón, no la página. Empiece con dos colores opacos.

Compare una etiqueta oscura

Mantenga la superficie y cambie el texto a #111827. W3C AA establece 4,5:1 para texto normal y 3:1 para texto grande. Lea también el resultado de cumplimiento, sin decidir solo por el valor redondeado. No seleccione texto grande para una etiqueta que realmente es pequeña.

• W3C · WCAG 2.2 · Contrast (Minimum)

Revise otros estados

Si el fondo cambia al pasar el puntero, mida ese par por separado. Llegue al botón con el teclado y revise la etiqueta. Repita en modo oscuro si utiliza otros colores. Los valores de un diseño no garantizan que el CSS real coincida.

Termine en la página real

La herramienta compara dos colores HEX opacos; no audita toda la página. Una foto, degradado o capa transparente necesita más revisión. Pruebe el botón en una pantalla móvil y con teclado. Guarde los colores y estados comprobados para repetir la revisión tras cambios de tema.