Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed #34038 -- Improve link readability and identifiability #16101

Closed
wants to merge 9 commits into from

Conversation

CLWilliam
Copy link

@CLWilliam CLWilliam commented Sep 24, 2022

To improve the readability of links in the Django admin:

  • The default colour has been slightly darkened in light mode (-1% lightness in HSL colour space)
  • The links are underlined on hover for all default links (add/create links, breadcrumbs...) to be more identifiable for people with colour vision deficiencies.
  • Links in the form rows have been underlined by default as - since they bend into the help text - they are very difficult to distinguish from plain text.

@CLWilliam CLWilliam changed the title Ticket/34038 Fixed #34038 -- Improve link readability and identifiability Sep 24, 2022
Copy link
Member

@knyghty knyghty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the delay. This looks good, but I think we can remove the hover style, I think it looks better without and doesn't provide much value IMO.

@felixxm
Copy link
Member

felixxm commented Oct 11, 2022

@CLWilliam Do you have time to keep working on this? (see #16101 (review))

@CLWilliam
Copy link
Author

@felixxm it's on the menu for this evening!

@felixxm
Copy link
Member

felixxm commented Oct 27, 2022

@thibaudcolas Can you take a look?

@@ -24,7 +24,7 @@ html[data-theme="light"],
--breadcrumbs-link-fg: var(--body-bg);
--breadcrumbs-bg: var(--primary);

--link-fg: #447e9b;
--link-fg: #437c98;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new color have enough contrast when the background is white. Unfortunately --link-fg is also used with yellow (#ffffcc) and gray backgrounds (#f8f8f8). We should make it even darker to meet AA standards, e.g. #417893 (\cc @knyghty.)

@felixxm
Copy link
Member

felixxm commented Dec 13, 2022

Closing due to inactivity.

@felixxm felixxm closed this Dec 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants