Skip to content

Bridge card background contrast is low for bridge-moji

The new bridge cards use the standard --in-content-box-info-background for their background color, which is rgba(249,249,250,0.15). This results in the following colors:

  • #F0F0F4 in light theme (referred to in Fx's design system as "Desktop/Light/Color/Background/100" or "Light Grey 20")
  • #3D3C41 in dark theme (which doesn't correspond to anything in the design system, as far as I can tell)

The background of each bridge-moji container uses --in-content-button-background, which is a 7% color-mix coming out to rgba(21, 20, 26, 0.07) in light theme and rgba(251, 251, 254, 0.07) in dark theme.

This results in some parts of the cards' content being hard to see. However the situation is complicated by the fact that the colors used in Fx's design system and the actual browser do not match.

Edited by donuts
To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information