supabase / supabase / 22770384118

74%

push

github

fix(studio): contrast ratio of JSON cell viewer colors in light mode (#40691)

JSON column viewer looks fine on dark mode, but barely visible on light
mode, especially when the value is of string type.

There are no colors that can satisfy the 4.5:1 contrast ratio (minimum
requirement for web and digital accessibility) on both white and black
background, so I had to pick different classes for ight mode (dark mode
is fine, I checked the colors against the dark background and the
contrast is good).

Even though the new colors may not look that contrasting to each other,
I prioritized accessibility, and made sure they all complied with the
4.5:1 contrast ratio.

Before:
<img width="499" height="179" alt="112"
src="https://github.com/user-attachments/assets/7f0821cf-6127-4246-a2c2-a78a5d31083a"
/>

After:
<img width="499" height="211" alt="222"
src="https://github.com/user-attachments/assets/0b5b2c35-9211-4a25-a9f5-eef4e5c8c8f3"
/>

Fixes #40633

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>

821 of 931 branches covered (88.18%)

Branch coverage included in aggregate %.

3072 of 4365 relevant lines covered (70.38%)

112.63 hits per line