11

As part of implementing the new unified themes across the network, we're gradually rolling out updated site themes for each site. As of today, we have enabled your updated site theme for testing.

If you can't see it right now, that's by design! This is a very early test implementation of your design and we need your help finding issues with it before we make it live for everyone permanently. So, keep in mind, there will be things that need fixing! We'll address those things as we can.

If you'd like to review it, here's how:

How do I enable it?

Click here and check the "Beta test new themes" option. This will turn on the new theme for all sites that have one in testing, including this one. Here's more info on how to opt in. You can uncheck the box to revert to the older theme until the site is live for everyone. Note, while turning it on is immediate, it will take a few minutes to revert to the old view - but it will go through!

What type of feedback do we need?

On this post: Bugs related to this site's design elements

Please help us look for issues/bugs related to the theme design and how we have mapped the old theme to the new. This needs to be done within the limits of the new unified theme.

This could include colors of sections of the design or text, problems with JavaScript add-ons (if applicable), the logo or top banner appearance or other artwork.

You can also feel free to ask questions about the new layout if you're unsure how to navigate it.

On Meta Stack Exchange: General concerns about left nav or theming

There are some things that are definitely changing everywhere and can't really be adjusted on a per-site basis. A few of them include:

  • Top banner is shorter in height, so some artwork has to be adjusted along with some logos.
  • Left Navigation is active everywhere (but can be collapsed into a menu by visiting your site preferences - instructions here).
  • Responsive layout is active, which lets the site adjust as browser widths change - no side scrolling (some pages haven't been updated, yet, though). For now, if you prefer the scrolling, you can disable this by clicking the "disable responsiveness" link in the footer.
  • Many site elements including tags and voting arrows are standardized across the network.
  • Link underlining is active. In an effort to make links more visible, they are now being underlined.

If you have concerns or issues regarding the left nav or the overall approach we are taking to theming, then this Meta Stack Exchange post is the right place for feedback.

As I mentioned earlier, there are some unique design elements like voting arrows and tags that are being standardized in this process. Keeping these custom elements makes our ability to maintain the sites too complex and, while we're very sad to see them go, we're in a difficult position of needing to make the site designs work together so that we can continue to address feature requests and bugs that will make your Q&A experience better. This is addressed in a Meta Stack Exchange post if you want more detail.

What new themes?

If you're like, "What the heck are you talking about?", then you should read the Meta Stack Exchange post entitled Rollout of new network site themes (and maybe the posts it links to for the full background). To follow along with the rollout of these new themes, go here.

Thanks so much for your constructive feedback!

Oh, Who am I?

If you don't know me, I'm one of the Community Managers here at Stack Exchange. I'm here to listen to your input and convey it to our Design team for responses and fixes to bugs. I'll do my best to respond to your concerns and explain whether changes we've made are bugs that can be changed or if they're by design and why.

4
  • +1 for Link underlining - thank you
    – Robs
    Commented Nov 28, 2018 at 10:50
  • I dont see the left nav bar when i click on the help! Is this is expected behaviour Commented Nov 28, 2018 at 18:15
  • @codeyinthecloud: You can get to it via the "hamburger" on the left of the top bar. I'm checking to see if this is really the design, but I suspect not. Commented Nov 29, 2018 at 0:02
  • 1
    @codeyinthecloud: Apparently it is by design. Commented Nov 29, 2018 at 6:36

1 Answer 1

4

I ran the new theme through the Axe accessibility audit tool. The new theme (and probably the old one, I didn't check) has a number of issues with text not meeting the minimum color contrast under WCAG 2 AA (the recommendation followed by most countries):

  • For non-bold text 24px and larger or bold text 18px and larger, the required contrast ratio is 3:1 or higher.
  • All other text requires a contrast ratio of 4.5:1 or higher. (This includes placeholder text inside form fields.)

This basically means that we can't have text that's lighter than #767676 on white (darker on gray). Some of the places where this is failing right now are:

On the summary page:

  • Number of votes/views text: the number in the mini-counts is fine (#6a737c) is fine, but the text ("votes" or "views") is #848d95, which has a contrast of 3.37:1.
  • The green for answered questions in the mini-counts (#45A163) has a contrast of 3.2:1.
  • The gray text in the modified by/answered by line (#9199a1) has a contrast of 2.88:1.
  • The name in the modified by/answered by line, which is also the basic link color (#f2720c) has a contrast of 2.92:1.
  • The reputation score in the modified by/answered by line (#848d95) has a contrast of 3.37:1.

On the detail page for a question:

  • The link color (#f2720c) has a contrast of 2.92:1. (Thank you for the underlined link text when links occur in paragraphs - this helps meet the requirement of "not using color alone" to communicate that it's a link.)
  • In the gray box that shows the author information at the bottom of the question, the text (#f2720c) on the gray (#eff0f1) has a contrast of 2.56:1.
  • The share|edit|close|flag actions and answer tabs (#848d95) have a contrast of 3.37:1.

Here are some suggestions with the same colors darkened to a value that will work on both on white and on #eff0f1):

  • Darken #f2720c to #bf3f00
  • Darken #848d95 to #515A62
  • Darken #9199a1 to #767676
  • Darken #45A163 to #126E30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .