Sarai-WMDE added a comment.
Finding a solution to enhance the contrast of hovered rows and selected cells in the Query service opened a rabbit hole related to the accessibility of the background colors that (based on Wikimedia guidelines <https://doc.wikimedia.org/codex/main/design-tokens/color.html#background-colors>) we should apply to indicate the hover (#eaecf0 or #f8f9fa, which would replace #F5F5F5) and selected (#eaf3ff) states. It looks like the available colors wouldn't be compliant with the WCAG 2.2 criterion 1.4.11 Non-text contrast (Level AA) <https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html>. This guideline states that the color of elements and components, in their different states, should have a contrast ratio of 3.1:1 in relation to their surroundings (#fff in this case). While I validate whether this guideline applies in this case, or if I'm misinterpreting/missing something, I thought of sharing some thoughts on potential changes (I refuse to call these improvements due to the comments included below). As always, feedback and new ideas are really welcome at this point, as we keep evaluating alternatives. Keeping in mind our guidelines, we could do the following: | | Before | After | | Hover state | F41613620: Screenshot 2023-12-19 at 20.04.36.png <https://phabricator.wikimedia.org/F41613620> | F41613636: Screenshot 2023-12-19 at 20.10.26.png <https://phabricator.wikimedia.org/F41613636> ❌ Hovered links won't have sufficient contrast against this darker background color | | Selected state | F41613643: Screenshot 2023-12-19 at 20.14.29.png <https://phabricator.wikimedia.org/F41613643> | opt 1 F41613654: Screenshot 2023-12-19 at 20.22.21.png <https://phabricator.wikimedia.org/F41613654> opt 2 F41613661: Screenshot 2023-12-19 at 20.31.34.png <https://phabricator.wikimedia.org/F41613661> ❌ Hovered links won't have sufficient contrast against the selected cell color. Making the text bold would help | | What changes: 1. Default: The default font color of the all non-links textual elements in the table should be the standard #202122 (`color-base`) instead of the current #333 2. Hover: The background color of hovered cells is updated to #eaecf0 from #f5f5f5. (The alternative #f8f9fa is too similar to #f5f5f5) 3. Selected: Two alternatives are presented: 1) increasing the weight of the text within selected cells to 600 (`font-weight-semi-bold`); or 2) using a border to highlight the cell (box-shadow: `inset 0 0 0 2px` `border-color-progressive`) It would be really helpful, in order to support decision-making, to understand the use case behind cell selection in the results table. I understand the usefulness of hover for readability (distinguishing individual rows). But, given that no actions can be applied to the cells, in which circumstances is it useful to select them? Maybe @Nikki you could help us out sharing your use case(s) here. Thank you! TASK DETAIL https://phabricator.wikimedia.org/T277559 EMAIL PREFERENCES https://phabricator.wikimedia.org/settings/panel/emailpreferences/ To: Sarai-WMDE Cc: Lydia_Pintscher, Sarai-WMDE, Arian_Bozorg, Naseweis520, VIGNERON, Nikki, Aklapper, Danny_Benjafield_WMDE, Astuthiodit_1, AWesterinen, karapayneWMDE, bwang, Invadibot, Mooeena, maantietaja, ItamarWMDE, Akuckartz, Dringsim, Nandana, Namenlos314, Lahi, Gq86, Lucas_Werkmeister_WMDE, GoranSMilovanovic, Mahir256, QZanden, EBjune, Orienteerix, merbst, LawExplorer, Flycatchr, Salgo60, Zppix, _jensen, rosalieper, Scott_WUaS, Jonas, Xmlizer, Volker_E, Izno, freephile, jkroll, Wikidata-bugs, Jdouglas, aude, Tobias1984, Dinoguy1000, Manybubbles, Mbch331, Jay8g
_______________________________________________ Wikidata-bugs mailing list -- wikidata-bugs@lists.wikimedia.org To unsubscribe send an email to wikidata-bugs-le...@lists.wikimedia.org
