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

Improve contrast of our Design #5682

Open
emilk opened this issue Mar 26, 2024 · 3 comments
Open

Improve contrast of our Design #5682

emilk opened this issue Mar 26, 2024 · 3 comments
Assignees
Labels
😤 annoying Something in the UI / SDK is annoying to use 🧑‍🎨 Design Requires UX/UI designer input ui concerns graphical user interface

Comments

@emilk
Copy link
Member

emilk commented Mar 26, 2024

Currently our design has very low contrast between elements. Here is a screenshot from https://www.figma.com/file/3WX8yUqa8ECmhLwV6NIF3a/Rerun-Design-System?type=design&node-id=1252%3A15687&mode=design&t=Xc27rEOvAdS7F0XZ-1

Screenshot 2024-03-26 at 12 30 27

The top element here has a different background color (barely):
Screenshot 2024-03-26 at 13 45 23


This looks great if you

  • have a good screen
  • have good eyes
  • are in a dark room

However, if you are using a bad screen in a light room, the contrast between these background elements is way too low (the text is fine).
We either need to make the contrast higher, or add border strokes or similar.

Our current solution is to not follow the design guidelines.

This problem is exacerbated by not having a light mode you can switch to when you're in a brightly lit room (#3058)

@emilk emilk added 😤 annoying Something in the UI / SDK is annoying to use 👀 needs triage This issue needs to be triaged by the Rerun team ui concerns graphical user interface and removed 👀 needs triage This issue needs to be triaged by the Rerun team labels Mar 26, 2024
@Wumpf
Copy link
Member

Wumpf commented Mar 26, 2024

Related to

@nikolausWest
Copy link
Member

TBH, the screenshot above still has better contrast than our actual app:

Screenshot 2024-03-26 at 13 18 39

@Wumpf
Copy link
Member

Wumpf commented Mar 26, 2024

not the bit where the context menu overlaps the background:
Actual:
image

Figma:
image

@emilk emilk added the 🧑‍🎨 Design Requires UX/UI designer input label Aug 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
😤 annoying Something in the UI / SDK is annoying to use 🧑‍🎨 Design Requires UX/UI designer input ui concerns graphical user interface
Projects
None yet
Development

No branches or pull requests

4 participants