Low contrast ratio of GET and DELETE labels

Kong / insomnia

The open-source, cross-platform API client for GraphQL, REST, WebSockets, SSE and gRPC. With Cloud, Local and Git storage.

https://insomnia.rest

Apache License 2.0

34.77k stars 1.97k forks source link

Low contrast ratio of GET and DELETE labels #7812

Open danidoedel opened 2 months ago

danidoedel commented 2 months ago

Expected Behavior

The contrast ratio of the GET and DELETE labels should be higher.

Actual Behavior

The contrast ratio of the GET and DELETE labels is too low.

Reproduction Steps

Create a GET and DELETE request
Compare the label colours

Is there an existing issue for this?

[X] I have searched the issue tracker for this problem.

Additional Information

I am not sure if it's really necessary for the contrast ratio to be this low. Especially noticeable at a greater distance to the monitor. I believe this has been different in the past.

Insomnia Version

9.3.3

What operating system are you using?

macOS

Operating System Version

macOS 15.0

Installation method

Download from GitHub

Last Known Working Insomnia version

No response

subnetmarco commented 2 months ago

What theme are you using?

Screenshot 2024-08-06 at 7 33 31 AM

danidoedel commented 2 months ago

@subnetmarco ohh I totally forgot about the themes! It's the Hyper theme.

gatzjames commented 2 months ago

Not sure if this is related to the theme. Could it be related to your monitor settings? Running some quick contrast checks even on the Hyper theme the contrast ratio is more than 5 (anything above 4.5 is considered high contrast) in all the labels:

danidoedel commented 2 months ago

@gatzjames You’re checking the contrast ratios of the white text against the background colors, those are fine.

However, I meant that the two background colors are very similar and difficult to distinguish. The contrast ratio between those two backgrounds is very low.

Also, is there a reason why those four labels/buttons all have different background colors, but the differences are extremely slight? Especially between the send and invite button. This seems to be the case for all themes.

gatzjames commented 2 months ago

@danidoedel I see what you mean. The colours are generated by the theme so I'm not sure what other colour would fit best for the Hyper theme. If you have any suggestions/ideas feel free to comment here or make a PR! For the different shades of buttons you are on the spot with the issue we are working on atm. We just finished cleaning up the codebase of multiple approaches it used to have to style our UI and finally settled on one. This has been a long incremental piece of work from the team so now that it's done expect a ton of consistency updates going forward to fix issues like this. That's going to make the UI more stable and consistent overall! Thanks for the feedback and let us know if you find more issues like these!