Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ProgressBar: color text accessibility issue #1752

Closed
NeluQi opened this issue Nov 13, 2021 · 1 comment
Closed

ProgressBar: color text accessibility issue #1752

NeluQi opened this issue Nov 13, 2021 · 1 comment
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working vue2-portable
Milestone

Comments

@NeluQi
Copy link

NeluQi commented Nov 13, 2021

image

https://www.primefaces.org/primevue/showcase/#/progressbar

The color of the text is difficult to read against such a background.

I know that it is possible to change the colors in css, but due to the fact that the text is fixed in the middle and there are 2 different colors (filled and not filled), it is quite difficult to choose the color of the unfilled progress bar and the filled one so that the text reads well alone.

I suggest thinking and either choosing good colors in the standard themes, or doing something with the markup. The second is preferable.

For example:

  1. You can make a background for the text
  2. You can fix the progress text to the filled part (see screenshot below)
    image
  3. Move the progress text outside the bar (to the right or left, or above)

Also a few examples for ideas (See the location of the text about progress)

image

image

image

image

image

@cagataycivici cagataycivici self-assigned this Nov 15, 2021
@cagataycivici cagataycivici added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Nov 15, 2021
@cagataycivici cagataycivici added this to the 3.9.0 milestone Nov 15, 2021
@cagataycivici
Copy link
Member

Thanks

Screen Shot 2021-11-15 at 17 50 07

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working vue2-portable
Projects
None yet
Development

No branches or pull requests

3 participants