webapp-ng: publication badge contrast below 4.5:1 and missing UConn accessibility footer link (#1605 audit X4)

Open Beginner friendly
  • Is something wrong?
#2,135 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
88/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, typescript
Domain
accessibility, web-dev

Research direction

Start with webapp-ng/src/app/components/publication-edit/publication-edit.component.css, where each badge class (published, archived, current, unknown, public, private, shared) sets its background and text color; replace only the failing pairs with colors whose measured ratio is ≥ 4.5:1, verifying each ratio before committing. Then edit webapp-ng/src/app/components/footer/footer.component.html to drop the Auth0 sample text and add a descriptive link to https://accessibility.uconn.edu/. Finish by adding the unit test or axe-core check the acceptance criteria require so the contrast ratios stay enforced.

Written by the indexing model from the issue text.

Description

Accessibility Requirement User Interface

Follow-up from the #1605 color audit, row X4 (docs/accessibility/color-audit.md). This is the public website (webapp-ng), not the desktop GUI.

Findings.

  1. Publication badges in webapp-ng/src/app/components/publication-edit/publication-edit.component.css fail WCAG 1.4.3 (4.5:1). Measured contrast:

    Badge Contrast
    published (white on #4caf50) 2.78:1
    archived (white on #ff9800) 2.16:1
    current (white on #9e9e9e) 2.68:1
    unknown (#666 on #e0e0e0) 4.35:1
    public (white on #2196f3) 3.12:1
    private (white on #f44336) 3.68:1
    shared (white on #9c27b0) 6.30:1 (passes)

    The badges carry text, so WCAG 1.4.1 is met. When picking replacements, check each ratio. (For example, white on #e65100 is 3.79:1, which still fails.)

  2. webapp-ng/src/app/components/footer/footer.component.html still shows the Auth0 sample text and has no link to Accessibility at UConn (https://accessibility.uconn.edu/). UConn's policy procedures (University Websites) ask for one, typically in the footer.

Acceptance.

  • Every badge text/background pair is ≥ 4.5:1, verified by a unit test or axe-core.
  • The footer contains a descriptive link to https://accessibility.uconn.edu/ on every page.

Deadline context: UConn procedures require WCAG 2.1 AA for university websites by 2027-04-26. Part of #1603.

Dominant language
Java
Stars
140
Forks
35
Avg merge
17h 39m
Merged PRs (30d)
19

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 virtualcell/vcell

All issues in virtualcell/vcell

Similar issues

More Java issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.