Accessibility Issues

[redstonedesigner]

As requested in #2521, I am creating an issue with areas of Pterodactyl Panel that I find hard to access with a significant visual impairment.

One area is the server listing. Here is a sample server listing: Here, the information apart from the server name is difficult to read and access.

Another area is the menu once you have selected a server. Here is a sample server navigation menu: Here, the labels are difficult to read until hovered over.

Another area is the file manager. Here is an example file card: Here, the file name is difficult to read.

Another area is the description for various prompts, such as subusers and startup parameters. The names are fine, but the descriptions are difficult to read. Here is an example server startup parameter: The description has very low contrast with the card background.

Another area is the information prompts under some of the navigation headers (e.g. Backups, Databases etc.) indicating that there are no objects present or that objects cannot be created for this server. Here is an example prompt from Backups: The contrast of the text from the background is very low.

Another area is input validation of email addresses. The input validation turns the font colour dark red on a gray input box, which has very low contrast.

The entire backend of Pterodactyl is not responsive to browser font size settings, This means that it is impossible to enlarge the administration interface of Pterodactyl to make it easier, and in some cases possible, to read. Here is an example:

Additionally, while I was unable to capture a screenshot of the console and graphs of a server view for privacy reasons, they also do not scale when instructed to by browser settings.

@DaneEveritt @schrej Tagging you both as you requested this issue created.

[schrej]

We could use this tool to verify that text meets accessibility requirements: https://webaim.org/resources/contrastchecker/

[DaneEveritt]

mumbles begrudgingly about dark mode being a nightmare to work with

[fadedmax]

@DaneEveritt yes and of course thats not off topic lol

[notAreYouScared]

@redstonedesigner

I've made some changes in the colors of the text, What do you think?

Dashboard

File Manager

Databases ( 1 of 23 databases have been allocated to this server aka the information prompt as you called it, they're all changed to that same color as seen below)

Startup Variables

Mostly everything has brightened a shade or two of its original color. Except for the inputs that have invalid text 👍

The only thing i haven't changed is the schedules page as that has been mostly changed in the latest dev build, and i haven't updated to the dev build yet to mess with it.

@DaneEveritt @schrej Feedback?

[schrej]

About the font contrast in general

I do like the rest. Maybe a little more contrast inside of input fields? Also, can we try to use red tinted background for invalid forms instead of making the text red?

[notAreYouScared]

Dane requested the background to stay what it is on error text, I upped one shade of red so it wasn't as light. text will be the normal color with just the box border and help text changing colors

As for the 1 of 23 part, if I made it one shade darker it fails the AA standard for contrast as it only has a 4.23:1 contrast ratio, Leaving it where it's at gives us a 6.02:1 ratio

Correction to the above, With adding half way marks 250/350/450 i can use 250 so its halfway between 200 and 300 so its a tad darker and still allows us to have AA with a ratio of 5.45:1

As for the labels you are correct that they're not enough as they're only at a 3.46:1 ratio. changing it to 250 allows for a ratio of 4.46:1 that's right under failing by 0.04

[DaneEveritt]

I think adding half-way points might be a bit excessive. If there is a color that gets you most of the way I think that is fine. I think adding a bunch more colors is going to make it really hard to keep a consistent design going long term. You can always modify the 200 or 300 color to be whatever 250/350 is to make it consistent across the board.

[redstonedesigner]

These changes are all looking great, thank you everyone.

Another issue that has emergedis that both the server console and the file editor are not responsive to font size changes in the accessibility settings section of web browsers whereas the rest of the panel is.