I was working on an article when I saw the notification for a new post, then I clicked it and it seemed to be that the header just disappeared until I took a second look and realized it was still there. Then I taught for another second that maybe the CSS files did not download completely
I realized this was not an error after I read the section in the article that the header has indeed been redesigned then I took a second look and it was only then it did occur to me that the header was fine after all.
When I realized this I said to myself that the interface is becoming whitish and certain elements are almost indistinguishable from each other unlike before when I could easily tell stuff apart. When it comes to the new header redesign, the only thing that stops it from blending with the rest of the page is the border at the bottom.
At this point, there was only one thing I was thinking of — contrast. I launched aXe Firefox accessibility extension and analyzed the page, the result showed 98 known issues of which 52 were contrast related issues.
I taught the tool was exaggerating the figures and I launched the Accessibility panel in Firefox and checked for all issues the results are almost the same.
Just to confirm the result I took the interface for a spin in WAVE using the Firefox extension, it reported the results in the image below, 52 were Contrast Errors.
You mentioned in the article:
It's just a refresh, not complete redesign or anything
and also:
At the same time, 95% of our code is legacy code, not following any rules or guidelines. We will be slowly updating that alongside releasing new style.
I believe this will change but for the main time, I will be switching to the Pink UI theme because I can easily differentiate between page elements particularly the header and I WAVE'd the page it shows just 2 contrast error. I think am going to be fine with this.
You’re 100% right about contrast - it’s fair to say that we have issues...
But most of them are actually legacy and the header itself didn’t really change much in these numbers. In fact, part of this update was about improving contrast in many places - so I’m actually glad you didn’t do this analysis couple weeks ago... :)
We can’t fix everything right away so it will take some time. But we do have plans for improvements and updates to other elements and parts of the DEV as well... But you know - one step at a time.
Contrast is definitely on top of our priority list!
Once again, I really appreciate you doing this contrast analysis - it’s awesome!
We can’t fix everything right away so it will take some time. But we do have plans for improvements and updates to other elements and parts of the DEV as well... But you know - one step at a time.
Rome was not built in a day.
Once again, I really appreciate you doing this contrast analysis - it’s awesome!
Thank you and you are welcome.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I was working on an article when I saw the notification for a new post, then I clicked it and it seemed to be that the header just disappeared until I took a second look and realized it was still there. Then I taught for another second that maybe the CSS files did not download completely
I realized this was not an error after I read the section in the article that the header has indeed been redesigned then I took a second look and it was only then it did occur to me that the header was fine after all.
When I realized this I said to myself that the interface is becoming whitish and certain elements are almost indistinguishable from each other unlike before when I could easily tell stuff apart. When it comes to the new header redesign, the only thing that stops it from blending with the rest of the page is the border at the bottom.
At this point, there was only one thing I was thinking of — contrast. I launched aXe Firefox accessibility extension and analyzed the page, the result showed
98known issues of which52were contrast related issues.I taught the tool was exaggerating the figures and I launched the Accessibility panel in Firefox and checked for all issues the results are almost the same.
Just to confirm the result I took the interface for a spin in WAVE using the Firefox extension, it reported the results in the image below,
52were Contrast Errors.You mentioned in the article:
and also:
I believe this will change but for the main time, I will be switching to the Pink UI theme because I can easily differentiate between page elements particularly the header and I WAVE'd the page it shows just 2 contrast error. I think am going to be fine with this.
Keep up the good work. Cheers.
Hey, thanks for this thorough analysis!
You’re 100% right about contrast - it’s fair to say that we have issues...
But most of them are actually legacy and the header itself didn’t really change much in these numbers. In fact, part of this update was about improving contrast in many places - so I’m actually glad you didn’t do this analysis couple weeks ago... :)
We can’t fix everything right away so it will take some time. But we do have plans for improvements and updates to other elements and parts of the DEV as well... But you know - one step at a time.
Contrast is definitely on top of our priority list!
Once again, I really appreciate you doing this contrast analysis - it’s awesome!
Rome was not built in a day.
Thank you and you are welcome.