Conversation
✅ Deploy Preview for thoth-tech ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for strong-fairy-c1bde1 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Overall, the styling updates bring a fresh, modern feel to the website. The green link buttons work smoothly in both light and dark modes, and the subtle animations create a dynamic and engaging user experience. I particularly like the attention to detail in ensuring consistency between the two modes.
However I did notice a few potential areas for improvement. While the link cards look great when hovered over, in their default state they blend into the background. This might cause users to miss them at first glance, so it could be beneficial to find a way to make them stand out more initially (including the navigation cards, i.e. the Next and Previous cards). Additionally, non-link cards changing colour on hover might give the impression that they are clickable, which could lead to some confusion.
In terms of accessibility, the colour choices generally work well, but there are a few small adjustments that could make a big difference. The hover state for buttons, which shifts to a darker green with gold text, might have some contrast issues for users with visual impairments. Testing the contrast between these colours could ensure they meet accessibility standards. You can have a look at the WCAG 2.1 AA standards to double-check colour choices. For example:
-
The green buttons (#33773d for the background and white for the text) might not meet the WCAG 2.1 contrast guidelines, especially for users with visual impairments or colour blindness. The contrast ratio between the green and white text should be at least 4.5:1 for normal text and 3:1 for large text. You can verify this by testing it with a contrast checker.
-
Similarly, the hover state (#285e30 background with gold text) might not have sufficient contrast to be readable, especially in lower lighting conditions or on dim screens. Gold (#f1c40f) against dark green can be tricky for users with visual impairments.
That said, the overall colour scheme and gradients are visually appealing and well-suited to both light and dark modes. Just a few minor tweaks, especially regarding contrast and visual cues, could further enhance the user experience and make the site even more accessible.
|
Closing due to being incomplete. |
3 participants
Description
This update introduces multiple improvements to the website’s styling, focusing on enhancing readability, interactivity, and the overall user experience across both light and dark modes. Key updates include:
Dark mode now uses white text for headings and content to make it visible against the dark background.
Light mode text colours were also fine-tuned for better contrast and consistency.
Buttons now have a smooth hover animation that includes a colour change from green to a darker green (palette from the Thoth), the text colour changes to gold on hover.
Additionally, a slight lift with subtle effect has been added to buttons on hover, creating a more dynamic and engaging user experience. The box shadow increases slightly, making the button appear raised.
Cards now have a subtle animation that adjusts the background colour and subtly lifts the card on hover. This includes smooth transitions in both light and dark modes.
In dark mode, the card background turns a darker shade on hover, and the text remains white to maintain contrast.
In light mode, cards change to a light grey background on hover while text colour shifts to white for better readability.
Both light and dark modes have gradient backgrounds applied to the main sections, giving the page a modern look while ensuring the content is readable.
The dark mode gradient consists of subtle blues and black for a sleek appearance, while the light mode gradient uses lighter blue shades to maintain a fresh and clean aesthetic.
Fixes # (issue)
Type of change
Please delete options that are not relevant.
expected)
How Has This Been Tested?
Changes were tested locally on the latest versions of Chrome, Safari, and Firefox. Button hover effects, card animations, and text readability were all validated across both light and dark modes.
The hover animations for buttons and cards were checked to ensure smooth transitions and consistent behaviour across browsers. The gradient backgrounds were also tested for proper rendering without distorting the readability of the text.
And there were no issues and warnings when building and running the code.
Testing Checklist
Checklist