Default daisyUI theme colors in phx.new fail WCAG AA contrast in generated components

Abierto
  • ¿Algo no está bien?
#6,898 3 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
56/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
css, elixir
Área
accessibility, frontend

Línea de trabajo

Start with installer/templates/phx_assets/app.css.eex and inspect the light and dark daisyUI theme color values used by generated CoreComponents. Compare the text and background pairs named in the issue against WCAG AA’s 4.5:1 threshold; the issue leaves the replacement color direction open. Done when the primary button and info and error flashes meet that threshold in both themes.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Environment
  • phx_new 1.8.16 (theme values unchanged on main in installer/templates/phx_assets/app.css.eex)
Actual behavior

Several color pairs in the default light daisyUI theme fall below WCAG 2.x AA contrast (4.5:1 for normal text). They are used by the generated CoreComponents, so a fresh app ships them:

Where (generated core_components.ex) Text / background Ratio
<.button variant="primary"> (btn-primary) --color-primary-content on --color-primary 2.75:1
<.button> default (btn-primary btn-soft) --color-primary on soft tint (computed oklab(0.9576 0.0115 0.0126)) 2.57:1
<.flash kind={:info}> (alert-info, 14px) --color-info-content on --color-info 3.49:1
<.flash kind={:error}> (alert-error, 14px) --color-error-content on --color-error 4.06:1

Buttons fail even the 3:1 large-text threshold. Colors confirmed via getComputedStyle in Chromium; ratios computed with the WCAG 2 relative-luminance formula.

I found these with the contrast page in excessibility_storybook (a phoenix_storybook companion to Excessibility). Pointing it at a fresh app's app.css shows every theme pair with its WCAG ratio and APCA level, which may help when choosing replacement values.

Other light-theme pairs are below 4.5:1 too (success 2.33:1, warning 3.09:1) but aren't used by the generated components.

In the dark theme, primary (4.14:1), info (3.81:1) and error (4.06:1) are also under 4.5:1, so the primary button and both flashes fall short there too.

Expected behavior

The generated components meet WCAG 2.x AA (4.5:1) for their text, in both themes. For example, darkening --color-primary in the light theme (or using a dark --color-primary-content) would fix the primary button.

Happy to send a PR with adjusted values if a direction is preferred (keep the orange and darken it, vs. dark text on orange).

Lenguaje dominante
Elixir
Estrellas
23.2k
Forks
3.2k
Merge medio
22 h 45 min
PR fusionados (30 d)
21

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de phoenixframework/phoenix

Todos los issues de phoenixframework/phoenix

Issues similares

Más issues de Elixir

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.