Skip to content

[BUG]: Improve hover state contrast ratio of download buttons to meet WCAG AA standards #3

@mi-vaishnavi

Description

@mi-vaishnavi

Bug Description

Problem

On the PictoPy landing page, the hover state of the download buttons (Windows, Linux) shows insufficient background-to-text contrast.

Accessibility Concern

According to WCAG 2.1 AA standards:

Normal text requires a contrast ratio of at least 4.5:1

Large text requires at least 3:1

The current hover states appear to fall below the required threshold.

Expected Behavior

Hover states should:

Maintain a minimum 4.5:1 contrast ratio

Preserve visual consistency

Remain distinguishable from default state

Steps to Reproduce

  1. Open the PictoPy website.

  2. Navigate to the landing section with the Download buttons.

  3. Hover over the Download for Windows button.

  4. Inspect the button using Chrome DevTools - Color Picker.

  5. Observe the reported contrast ratio between text and background in hover state.

Logs and Screenshots

Image

Code of Conduct

  • I have joined the Discord server and will post updates there
  • I have searched existing issues to avoid duplicates

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions