## [Bug] Low Contrast Between Text and Background in Calendar Action Buttons #217

New Issue

2026-05-28T19:45:19Z

enjin2310 commented

2026-05-28 19:45:19 +00:00

🧩 Summary

In the Calendar interface, the action buttons for Editar, Eliminar, and Cerrar have text colors that closely match their background colors. This low contrast makes the text difficult to read, reducing accessibility and user experience quality.

🧪 Steps to Reproduce

Navigate to learn.spikersoft.com/calendar.
Create or open any event.
Observe the action buttons at the bottom of the Detalles del evento modal.
Notice that the text color blends with the button background, especially under dark mode.

✅ Expected Behavior

Button text should have sufficient contrast against its background to ensure readability and accessibility.
Example:

Editar button: light text on blue background.
Eliminar button: white text on red background.
Cerrar button: white text on gray background.

❌ Actual Behavior

The text color is nearly identical to the background color.
Users may struggle to identify button labels, especially in low-light conditions or on certain monitors.

📸 Evidence

The attached screenshot shows the Detalles del evento modal with the Editar, Eliminar, and Cerrar buttons having poor text contrast.

🧠 Possible Root Cause

CSS color variables for button text not adjusted for dark mode.
Missing accessibility contrast checks in the theme configuration.

### 🧩 Summary In the **Calendar** interface, the action buttons for **Editar**, **Eliminar**, and **Cerrar** have text colors that closely match their background colors. This low contrast makes the text difficult to read, reducing accessibility and user experience quality. ### 🧪 Steps to Reproduce 1. Navigate to `learn.spikersoft.com/calendar`. 2. Create or open any event. 3. Observe the action buttons at the bottom of the **Detalles del evento** modal. 4. Notice that the text color blends with the button background, especially under dark mode. ### ✅ Expected Behavior Button text should have sufficient contrast against its background to ensure readability and accessibility. Example: - **Editar** button: light text on blue background. - **Eliminar** button: white text on red background. - **Cerrar** button: white text on gray background. ### ❌ Actual Behavior - The text color is nearly identical to the background color. - Users may struggle to identify button labels, especially in low-light conditions or on certain monitors. ### 📸 Evidence The attached screenshot shows the **Detalles del evento** modal with the **Editar**, **Eliminar**, and **Cerrar** buttons having poor text contrast. ### 🧠 Possible Root Cause - CSS color variables for button text not adjusted for dark mode. - Missing accessibility contrast checks in the theme configuration.

Screenshot 2026-05-28 154345.png

134 KiB

spikerj commented

2026-06-08 13:48:10 +00:00

Fixed in spikerj/spikersoft-angular#9.

Root cause: the view-mode actions were transparent text buttons with primary/warn label colors, which blended into the dark modal background. Editar/Eliminar are now filled buttons (Material supplies an accessible on-color foreground — light text on blue / white on red) and Cerrar is a stroked button with an explicit readable foreground and visible outline that works in both themes.

Closing as resolved by the linked PR.

Fixed in spikerj/spikersoft-angular#9. Root cause: the view-mode actions were transparent text buttons with primary/warn label colors, which blended into the dark modal background. Editar/Eliminar are now filled buttons (Material supplies an accessible on-color foreground — light text on blue / white on red) and Cerrar is a stroked button with an explicit readable foreground and visible outline that works in both themes. Closing as resolved by the linked PR.

spikerj closed this issue

2026-06-08 13:48:20 +00:00

spikerj referenced this issue

2026-07-12 04:12:12 +00:00

[Infra][MinIO] Pilot: deploy MinIO + migrate security-scanner off /mnt/fusionio to S3 (proves the pattern for #413) #493

spikerj referenced this issue

2026-07-17 03:00:49 +00:00

[Bug][Prod][Reader] PDFs never open in the reader — pdf.js fetches /api/book/{id}/file tokenless (401); EPUBs unaffected #626

spikerj referenced this issue

2026-07-17 04:00:53 +00:00

[Bug][Prod][Reader] PDF worker fails to load — nginx serves .mjs as application/octet-stream (strict MIME blocks the module script) #627

Sign in to join this conversation.