Jump to content

Community Wishlist Survey 2022/Reading/Color Coded Sections

From Meta, a Wikimedia project coordination wiki

Color Coded Sections

  • Problem: Due to how articles currently are (at least, in enWiki, I don't know what they look like in other wikis) they're hard to read in a single sitting for those who have a hard time looking at a screen for long periods of time.
  • Proposed solution: My solution is color code the sections (or at least have slightly different colored backgrounds for each different section). Doing this can make it so the words don't blend together as much and make articles much easier to read. I will provide my perspective on this in the "More comments" section.
  • Who would benefit: Those who have a hard time focusing on a screen for long periods of time
  • More comments: I myself have Autism and so I have a shortened attention span. Despite this when I get into something I stay focused on it. However, I have a hard time reading articles because all the words just blend together or I lose track of where I am (as far as I know I am not dyslexic). However, if the sections were color coded (or at least, have a lightly colored background) I would be able to read articles easier. THis can just be something in preferences and wouldn't be enabled by default (we don't want Wikipedia to look like it's meant for children with all the pretty colors in articles by default) and would be an accessibility feature, making Wikipedia all the more accessible.
  • Phabricator tickets:
  • Proposer: Blaze Wolf (talk) 15:02, 11 January 2022 (UTC)[reply]


  • @Blaze Wolf: would it be enough if the section headers were brightly background colored to help break up the page? An example of that can be seen on this testwiki page. If that suffices, it is something that can be done with a personal css file (or a community gadget that does the same thing if it was popular enough). — xaosflux Talk 19:42, 11 January 2022 (UTC)[reply]
    Sort of... there are a few issues with that. 1. the color isn't limited to just be around the word and instead goes all the way across the screen making it a tad distracting and 2. It doesn't make longer sections of the article (which that example of the Moon article doesn't have any sections long enough to be difficult to read) any easier to read as once you get past the header, there's still text there. Also, it being a solid color makes it even more distracting. I was thinking of still using colors but making them partially transparent. Blaze Wolf (talk) 19:46, 11 January 2022 (UTC)[reply]
    OK, no worries - this idea can certainly still be discussed, was thinking of a "quick fix" for you in the meantime! — xaosflux Talk 19:49, 11 January 2022 (UTC)[reply]
  • @Blaze Wolf: How about something like THIS EXAMPLE? The colors are certainly adjustable, just made for example. — xaosflux Talk 20:03, 11 January 2022 (UTC)[reply]
    That's definitely more along the lines of what I was thinking. Wasn't necessarily thinking of a different color for each paragraph but that does certainly still work and help break up the text and make it more readable. Again, I was thinking of having the colors being slightly transparent so as to not distract from the text (And also make it readable if a darker color happens to be used, although regardless a darker color might still have to be avoided). Blaze Wolf (talk) 20:39, 11 January 2022 (UTC)[reply]
    @Blaze Wolf: I see you are mostly on the English Wikipedia, you can experiment with colors and this going to this page: w:en:User:Blaze Wolf/common.css and putting this code in it:
.mw-parser-output > p:nth-child(odd) {background-color: coral;}
.mw-parser-output > p:nth-child(even) {background-color: green;}