Skip to content
Snippets Groups Projects

Fix low contrast color for disabled item in option pages

Merged Monish Deb requested to merge monish.deb/finsburypark:a11y_fix_low_contrast into master

On admin option page for disabled items the text color used has a very low contrast. So with the help of color contrast checker https://accessibleweb.com/color-contrast-checker I have added a grey color shade that support minimum color contrast of 4.16:1

Before

Screenshot_2024-07-17_at_14.19.34

After

Screenshot_2024-07-17_at_14.21.08

ping @nicol @JoeMurray @seamuslee

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • mentioned in issue #20 (closed)

  • Thanks for this. Would be great if you could re-apply this in RiverLea (if needed) - as Finsbury Park will soon be deprecated in favor of the RiverLea version ('HackneyBrook').

  • nicol mentioned in commit 549c2e49

    mentioned in commit 549c2e49

  • merged

  • NB - this PR did change the syntax pattern used for grays, but as Finsbury Park is being deprecated it doesn't matter.

  • Can you clarify what 'syntax pattern' means here and what @monish should or shouldn't do on Riverlea when replicating the change there?

  • Thanks @nicol for merging this MR.

    Yeah I was confused about the syntax pattern that I should use for a different shade of grey, then I checked how Drupal css assign variable names to a color of different shades like in: Screenshot_2024-07-17_at_16.20.25

    In this patch color-gray-n, here 'n' stands for the shade number but I would like to know what would be the syntax pattern if we want to use different shades of a same color.

    Edited by Monish Deb
  • Good Q @JoeMurray - The ideal would have been just to swapp the variable name for a darker variable, rather than add a new variable / shade of gray. E.g. .v-dark-gray or .vv-dark-gray (Finsbury Park had a rather eclectic system of describing grays - vvv-dark or vvv-light - add/remove v's to increase light/dark).

    In RiverLea it's a bit simpler: gray names are more conventional (like Drupal @monish.deb - e.g. --crm-c-gray-200/etc) and there is a colour variable --crm-c-inactive specifically for inactive/disabled text. At the moment all three active streams have this set to #696969 or in dark mode it's --crm-c-gray-400- so if that provides enough contrast ratio, then probably nothing needs changing.

    But otherwise it could be changed on a per-stream/subtheme basis.

    Edited by nicol
  • @nicol this fix doesn't need to be in Riverlea as this seems to be fixed there: Screenshot_2024-07-29_at_22.06.30

Please register or sign in to reply
Loading