Community Wishlist Survey 2022/Reading/Color Coded Sections

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[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[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[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[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[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[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;}
  • You can set the colors the same if you don't want odd/even for a test, you can use any color from this list: w:en:Web colors, or even use hex codes. What that code is doing is adding you own style to the "p" elements (paragraphs) that are part of the body of the page. If this solves your need, we can probably document this a bit more and close this proposal out as not needing software. — xaosflux Talk 21:30, 11 January 2022 (UTC)Reply[reply]
    It doesn't appear that it allows for the background color to be transparent. IF there's a way to do that though please tell me as I'm not familiar with how CSS works or how to write code in it. Blaze Wolf (talk) 21:40, 11 January 2022 (UTC)Reply[reply]
    @Blaze Wolf: try this one, it uses rgba opacitiy, code is here: testwiki:MediaWiki:Tritontest4.css. — xaosflux Talk 22:35, 11 January 2022 (UTC)Reply[reply]
    That should work. Only issue is if you don't understand how CSS works you wouldn't know what to change to achieve the effect you're looking for (like increasing or decreasing the opacity of the colors or changing the colors). Blaze Wolf (talk) 16:09, 13 January 2022 (UTC)Reply[reply]
    @Blaze Wolf: ok that's good news - something like that can easily be made in to a "gadget", it would mean someone could turn it on or off in preferences - though they would be stuck with whatever color scheme their project decided on. So even if this doesn't get voted up on the wishlist survey, it could still be locally implemented with minimal fuss. — xaosflux Talk 16:16, 13 January 2022 (UTC)Reply[reply]
    Can't gadgets still have preferences? Cause i'm fairly sure Twinkle is a gadget on enWiki but it has preferences you can change. Blaze Wolf (talk) 16:17, 13 January 2022 (UTC)Reply[reply]
    @Blaze Wolf: they can, but then either someone needs to build a preference handler in to it as well (now moving it from a pure CSS gadget to a JS gadget) and/or it will require end users to update their bespoke values somewhere. In the meantime, if you want that latest version to go live for yourself, just copy the two lines of code from testwiki:MediaWiki:Tritontest4.css to w:en:User:Blaze Wolf/common.css and click publish. The rgba(255, 0, 0, 0.2) takes 4 numbers, 0-255,0-255,0-255,0.00-1.00). Some external tools such as <> can help you pick the colors that work best for you. — xaosflux Talk 16:36, 13 January 2022 (UTC)Reply[reply]
  • This does seem like a very interesting idea, especially from a accessibility perspective, I would like to discuss this one with a group of wikimedians that discuss accessibility frequently. KSiebert (WMF) (talk) 11:22, 19 January 2022 (UTC)Reply[reply]
  • If somebody needs a specific color scheme due to their impairment (mental, visual or anything else), they should have access to a wiki skin with proper colors. But there is definitely no need to impose this on every user. SSneg (talk) 21:13, 29 January 2022 (UTC)Reply[reply]
  • I think it would be beneficial to add more accessible style/template choices for the average user who isn't familiar with CSS. Kimdorris (talk) 04:03, 31 January 2022 (UTC)Reply[reply]


  •   Support Klein Muçi (talk) 00:54, 29 January 2022 (UTC)Reply[reply]
  •   Support Javiermes (talk) 13:58, 29 January 2022 (UTC)Reply[reply]
  •   Support but as an opt-in accessibility feature. Many people could also find the different colours overwhelming if enabled by default and it could present printing issues. Ed6767 (talk) 15:36, 29 January 2022 (UTC)Reply[reply]
  •   Oppose SSneg (talk) 21:12, 29 January 2022 (UTC)Reply[reply]
  •   Support This seems like it could be relatively simple to implement as an opt-in accessibility skin that we could highlight to all users through an Accessibility sidebar option. Personally I'd hate it, but if it could prove useful to other users, that seems worth doing. OwenBlacker (Talk) 11:12, 30 January 2022 (UTC)Reply[reply]
  •   Support I do not have visual or learning disabilities (beyond needing glasses), and I would quite like this. Libcub (talk) 23:16, 30 January 2022 (UTC)Reply[reply]
  •   Support JPxG (talk) 00:57, 31 January 2022 (UTC)Reply[reply]
  •   Support Uanfala (talk) 13:42, 31 January 2022 (UTC)Reply[reply]
  •   Support Thingofme (talk) 13:43, 1 February 2022 (UTC)Reply[reply]
  •   Oppose KingAntenor (talk) 06:57, 2 February 2022 (UTC)Reply[reply]
  •   Support the CSS solution works well if you know how to adjust css and copy it, but making a gadget with some default colors themes would be good for various use cases, people with various color-blindness etc.. and improving reader experience is at the heart of what we should strive for. Shushugah (talk) 21:31, 2 February 2022 (UTC)Reply[reply]
  •   Support: specifically, the idea I'm supporting is an opt-in customisable skin like xaosflux has mocked up (maybe linked in the main sidebar) with some default options that are provably useful to neurodiverse people (I'm thinking of perceptual processing difficulties like Irlen syndrome). If this was for editors I'd say "write a gadget yourself", but the target audience is all readers, so it would really need to be built-in. — Bilorv (talk) 19:33, 4 February 2022 (UTC)Reply[reply]
  •   Support paul2520 (talk) 20:10, 5 February 2022 (UTC)Reply[reply]
  •   Support--Vulp❯❯❯here! 08:12, 6 February 2022 (UTC)Reply[reply]
  •   Support Ayumu Ozaki (talk) 03:55, 7 February 2022 (UTC)Reply[reply]
  •   Support Jl sg (talk) 10:10, 11 February 2022 (UTC)Reply[reply]