Open NickColley opened 3 years ago
@nickcolley Thanks for submitting this issue. šš½
@ovlb Is this something that got overlooked into the light-dark mode PR? I felt like we went back and forth in the PR re: this very topic.
Indeed, we went back and forth on this and @nickcolley sees there is not what is specified. The Firefox Accessibility Dev Tools report as follows:
@nickcolley Can you tell me which browser and OS/monitor you use?
Thanks, Oscar
I was on Linux, with Google Chrome, using Dark mode. It may be some weirdness with CSS Custom Properties perhaps. Hmm.
I believe there are similar issues with the light theme, they're actually much more severe.
Update: Seeing the issues on OSX Chrome and Firefox.
@nickcolley Hmm. --clr-accent
resolves to pink
, but the values browsers implement are specced. Can you have a look into your browser dev tools and post to which values text and background resolve in the end?
Re light mode: Seeing this too. This slipped through our QA. š Iād say we need a darker shade of pink
for the black bg/white text box.
When tabbing into the 'Ways to help' box the contrast between the focus outline and the text is too low at 2.57.
If we were to use the background colour of the box for the text colour the contrast would be improved to at least 5.24.
I would argue to go for a brighter white to ensure a better contrast at 6+
One way to accomplish might be to change the
.box a
selector to.box a:not(:focus)
.I've seen you're using CSS Custom Properties, so that might be another nice way to resolve this. For example by introducing a
--focus-text-color
variable that can be assigned on the.box
.