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

Open
  • Is something wrong?
#6,898 3 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
56/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
css, elixir
Domain
accessibility, frontend

Research direction

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.

Written by the indexing model from the issue text.

Description

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).

Dominant language
Elixir
Stars
23.2k
Forks
3.2k
Avg merge
16h 35m
Merged PRs (30d)
18

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from phoenixframework/phoenix

All issues in phoenixframework/phoenix

Similar issues

More Elixir issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.