Skip to content

ProgressBar: color text accessibility issue #1752

Closed
@NeluQi

Description

@NeluQi

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type: BugIssue contains a bug related to a specific component. Something about the component is not workingvue2-portable

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions