Skip to content

Increase contrast within button groups #1422

@efc

Description

@efc

There are a number of places where Statamic uses button groups to choose options. For example, to switch collections from list view to card view. However, the difference between the active and inactive option on the button group is very fine, active is set to the theme's Gray 50 and inactive to Gray 100. This leaves a very low contrast between the active and inactive choice in the best of circumstances, and on poor monitors the difference can disappear entirely.

Since these are switches, it would seem the much more appropriate choice of background for the active portion of a button group would be the Switch Background color. Then these button groups would appear more like toggles, with a bright color indicating the active choice.

If adding color to these elements is too much to bear, then maybe one of these other options would be possible...

  • At least push the background of the active element to Gray 200 instead of current Gray 100.
  • Implement this as part of the "Stricter WCAG" mode would be possible? After all, color or a darker gray would increase the visibility of the active options.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions