Skip to content

fix(color): make brand palette swatches readable in dark mode

Resolves #2012 (closed)

Summary of changes

  • hard-codes white #ffffff or charcoal #171321 text color for hard-coded primary and secondary brand swatches, following the pairings suggested in "Contrast and Accessibility"
  • removes gl-text-white class names applied to some text on color swatches. This class will still invert the text color when the theme changes, similar to if there is no class & if the default text color is applied. Inverted colors on hard-coded swatches will cause text to be unreadable for one theme or the other.
Before After
Screenshot 2025-03-17 at 12.04.01.png Screenshot 2025-03-17 at 12.03.49.png
Screenshot 2025-03-17 at 12.04.21.png Screenshot 2025-03-17 at 12.04.33.png

Note

Technically the Orange 03p color (#E24329) paired with a white text foreground is not fully AA contrast (it is 4.14:1, not 4.5:1), but this is the pairing that is suggested in the "Contrast and Accessibility" for that specific color. I think charcoal would be 4.4:1 contrast... but that's still just short of 4.5:1. I think that would be out-of-scope here, however.

Thank you for reading!

Edited by Dan MH

Merge request reports

Loading