[GH-ISSUE #277] Improve UI Contrast #98

New issue

Closed

opened 2026-03-16 13:24:58 +03:00 by kerem · 4 comments

kerem commented

2026-03-16 13:24:58 +03:00

Owner

Originally created by @tomjn on GitHub (Nov 7, 2019).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/277

Originally assigned to: @liyasthomas on GitHub.

Describe the bug

Currently the interface has very low contrast on form inputs, this needs to be increased

To Reproduce
Steps to reproduce the behavior:

Open the interface
Squint

Expected behavior

Clear form inputs that don't require non-corrective vision, and comply with WCAG

Desktop (please complete the following information):

OS: MacOS
Browser Firefox
Version 70

Additional context

This affects all colour schemes in the settings area, either borders or greater background contrast will improve the UI significantly

Originally created by @tomjn on GitHub (Nov 7, 2019). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/277 Originally assigned to: @liyasthomas on GitHub. **Describe the bug** Currently the interface has very low contrast on form inputs, this needs to be increased **To Reproduce** Steps to reproduce the behavior: 1. Open the interface 2. Squint **Expected behavior** Clear form inputs that don't require non-corrective vision, and comply with WCAG **Desktop (please complete the following information):** - OS: MacOS - Browser Firefox - Version 70 **Additional context** This affects all colour schemes in the settings area, either borders or greater background contrast will improve the UI significantly

kerem

2026-03-16 13:24:58 +03:00

closed this issue
added the
feature
label

kerem commented

2026-03-16 13:25:15 +03:00

Author

Owner

@liyasthomas commented on GitHub (Nov 7, 2019):

We seriously think, we need to update the color schemes. Me being not much of a great frontend developer, I seek help on choosing color schemes that comply with WCAG. Anyway, next commit will include more web safe colors.

@liyasthomas commented on GitHub (Nov 7, 2019): We seriously think, we need to update the color schemes. Me being not much of a great frontend developer, I seek help on choosing color schemes that comply with WCAG. Anyway, next commit will include more web safe colors.

kerem commented

2026-03-16 13:25:20 +03:00

Author

Owner

@tomjn commented on GitHub (Nov 7, 2019):

I think a thin but darker border around the inputs might do the job, here's a quick border: 1px solid var(--fg-color); on all input elements:

@tomjn commented on GitHub (Nov 7, 2019): I think a thin but darker border around the inputs might do the job, here's a quick `border: 1px solid var(--fg-color);` on all `input` elements: <img width="486" alt="Screenshot 2019-11-07 at 02 02 15" src="https://user-images.githubusercontent.com/58855/68353850-abac9c80-0102-11ea-98ee-208c4334824a.png">

kerem commented

2026-03-16 13:25:25 +03:00

Author

Owner

@liyasthomas commented on GitHub (Nov 7, 2019):

Thanks for the quick suggestion. Will update 🎉👍

@liyasthomas commented on GitHub (Nov 7, 2019): Thanks for the quick suggestion. Will update 🎉👍

kerem commented

2026-03-16 13:25:30 +03:00

Author

Owner

@tomjn commented on GitHub (Nov 7, 2019):