High-contrast option for accessibility

[jibin1573]

Colour changes for Default theme in LMMS 1.2.0 RC6

1. Can we change the colour of the loop marker (not the button, but the indicator)? Because we need to have some contrast when there is an instrument track (of the same colour) just below it.

2. It possible, please change the colour of the progress bar in the export menu, for contrast. (Like green.)

3. A different colour for all the the title bars in LMMS. (Song editor, BB editor etc)

[BaraMGB]

If you think, there are problems in the default theme, please can you make a mock up in a paint app for demonstration?

[lukas-w]

@jibin1573 Please don't use external image hosters. You can include images by just copy-pasting them into the comment box.

[jibin1573]

Is it possible through the mobile phone? I didn't find such an option. Sorry!

[musikBear]

@jibin1573 Just under the comment-field, you have a sentence: " Attach files by dragging & dropping, link, or pasting from the clipboard. " If you cant see that, it is not working for mobiles

[jibin1573]

Can't find such an option on mobile. I'll do it on the PC next time.

[jibin1573]

I'm a visually impaired person. And I thank all the developers of LMMS for creating the new Black LMMS default (1.2.0) theme and for the custom Color option in BB tracks. It's a boon for people like me.

Visually impaired people like me require an extra bit of contrast in the themes. Black theme has always made life easier for me (esp while working on the computer). As a visually impaired person, I always needed more contrasting colours. People like me find it a bit difficult to differentiate shades of the same colour. That is the main reason why I posted this issue (#4473). Thank you.

[SecondFlight]

That gives some more context to this request. You will be hard-pressed to convince the theme people to make these changes; however, an argument could be made to have a separate high-contrast accessibility theme.

That said, is this anything you cannot accomplish by modifying the theme yourself?

[jibin1573]

Thank you @SecondFlight! I can apply a different theme, but just wanted some different colour on the title bars (any colour that contrasts the Black background) and also the loading indicator, because I love the default theme. I don't want to alter anything else.

[musikBear]

@jibin1573 - im next to blind-as-a-bat 🦇 So i have made many changes in CSS to get more contrasts, perhaps you would like to try out my CSS? I have: I have never felt that the color of the loop, was a problem, but i can try to find a 'maby' way As you can see, i use black for scale, and a light blue for selected Let me know if you like it

[jibin1573]

Thanks @musikbear! But my main issue is with the title bar, because it has the same shade of the background; and with the loop indicator in the Song-editor, which has the same colour of the instrument track. I'll try to make a theme. Thanks!

[tresf]

Can we change the colour of the loop marker (not the button, but the indicator)? Because we need to have some contrast when there is an instrument track (of the same colour) just below it.

Agreed 100%. Filed a bug report almost two years ago. https://github.com/LMMS/lmms/issues/3069 mockups are nearly identical.

It possible, please change the colour of the progress bar in the export menu, for contrast. (Like green.)

Yes.

A different colour for all the the title bars in LMMS. (Song editor, BB editor etc)

This isn't going to be as popular because it's an intentional part of the theme but yes this was filed and a solution was provided. https://github.com/LMMS/lmms/issues/2867.

These are all @RebeccaDeField and @Umcaruje issues, so they're the ones that should help fix them. @RebeccaDeField is absent for a while so I'll tag @Umcaruje to see if they're fixable (or wontfix for the 1.2.0 release).

[jibin1573]

Thanks @tresf! But I didn't understand the solution for Coloring the title bar. My main concern is the title bar and loop marker. I didn't find any PNG files for title bars or loop marker, in the default theme folder.

[Umcaruje]

@jibin1573 You can change the title color by changing the color and qproperty-activeColor css properties in the Subwindow:

https://github.com/LMMS/lmms/blob/b268abba45130b04a67c222a9e3bb161ab0f9fc3/data/themes/default/style.css#L673-L685

And if you want you can change the title color too.

[jibin1573]

Thanks @umcaruje, I'll try this.

[jibin1573]

Guys, I have created a Contrast theme, thanks to @Umcaruje. I want to make this theme available to our LMMS community. I have painstakingly chosen the colours for this theme, to make sure things are visible and also increased the font size of certain text. .And by God's grace, it is now a fully functional Contrast Theme.

UPDATED on 30-09-2018

Screenshots: (In this screenshot you can see the Red Hover on "Add BB track", an active track"TNT-02. WAV in red and an highlighted FX Mixer channel in red)

Piano Roll (You can see the selected notes in red and an open menu bar with Red Hover:)

Song editor: (You can see the selected tracks in Pink like colour and Muted tracks in dark grey)

Automation Editor and Sidebar (You can see the Red hover and Green selection/ highlight in the Sidebar)

Contrasting Progress Bar in Red:

Here's the Theme file: JBN THEME.zip

I am really enjoying this theme! (it might be a bit weird for normal people but it is exactly what I wanted) Thanks everyone for your support! God bless!

[musikBear]

@jibin1573 mmm... If you are looking for theme name, may i suggest Vegas.

[jibin1573]

Sounds good!

[tresf]

@jibin1573 this thread is all over the place. It starts off with specific requests and then has a lot of (nice but partially irrelevant) theme screenshots that aren't part of the original description.

From what I understand you'd like the three bullet points addressed, but the title doesn't reflect that. Please fix the title and I'll see if @Umcaruje and @RebeccaDeField have time to fix this for 1.2.0.

[jibin1573]

@tresf , My requirements were as follows:

1. Contrasting Title Bar
2. Contrasting Loop marker
3. Contrasting Progress bar.

The Theme that I have prepared above fulfils all my requirements for a contrasting theme and much more. Now, I would like to make this theme available for Visually Impaired Users as an High Contrast Theme. I have not been able to upload this theme on the LMMS sharing platform. There seems to be some problem, as I am not able to upload tar.gz file also.

[tresf]

I am not able to upload tar.gz file also.

tar.gz is supported and there are uploads from this month. https://lmms.io/lsp/?action=browse&category=UI%20themes&sort=date

My requirements were as follows:

• Contrasting Title Bar
• Contrasting Loop marker
• Contrasting Progress bar.

Perfect, thanks. Do you consider these three items bad enough in 1.2.0 that require it to be fixed prior to release?

[jibin1573]

Sorry, I didn't get what you are saying @tresf? But, I have uploaded my theme on the LMMS Sharing Platform (https://lmms.io/lsp/?content=update&file=13868) and have given this (GitHub) link for screenshots. How do I upload the screenshots on the LMMS sharing platform?

[RebeccaDeField]

@jibin1573 Having a theme dedicated to vision impaired users is great but the default theme should be at least accessible and usable for a range of people and eyesight levels. If you are able to navigate the current ui okay but with some minor difficulty which is fixed in your theme, that's alright. But if those items you listed make the default theme impossible for you to use or very difficult (I get the impression this is the case), then we should definitely try to tweak the current theme to accommodate.

[jibin1573]

@RebeccaDeField, if you are asking me about the default LMMS 1.2.0 dark theme, then the changes required are as follows:

1. Contrasting title bar

2. Contrasting Loop marker

3. Contrasting Song Editor grids

4. Contrast colour for hovers in Menu Bar, tool bars, TCO

5. Contrasting colour for Active Buttons. Like a different colour when a tool is active. Tools like the pencil button, Selection tool button, Auto-scroll button, Loop indicator button, Metronome button. Also, the Show/ Hide buttons in the Main toolbar should light up when they are active (Open). Like: Song Editor button, BB Editor button, Piano Roll Button, Automation Editor button, FX Mixer button, Project Notes button, and Controller Rack button.

6. Contrasting colour for Volume and Pitch, vertical Master Sliders

7. A line or a contrasting colour for the Main Toolbar and Sidebar, separating them from the work area.

8. Contrasting colour for selection of words in Project Notes

9. Contrasting colour for the progress bar indicator

10. Contrasting colour for the outline for FX mixer channels and TCO

These are some of the things that are not so visible due to very similar shades of the same colour and makes it difficult to use LMMS.

[RebeccaDeField]

@jibin1573 Thank you for the comprehensive list, any vagueness we can remove from the issue helps to tackle each item. Some of these are already waiting for someone to have the time or skills to finish, and others have been taken on by design devs in the past but might need revisiting. There is also the question of what needs to be completed in order to release. I will try to break things down a bit further to assist in pushing this forward.

Contrasting title bar @Umcaruje once upon a time you wanted the title bars to be green. Still in favor? https://github.com/LMMS/lmms/issues/2450#issuecomment-175634823

Contrasting Loop marker Already addressed here. The icon is done, the concept is done, we just need someone to code it up.

Contrasting Song Editor grids

3062 This one is a tricky balance between contrast and eye fatigue. Perhaps we need to bump up the brightness of the lines up again?

Contrasting colour for Active Buttons. In order for this to work, we need enough variation for there to be distinction between inactive hover, active, toggle and radio style buttons. We were planning on using color to distinguish the loop point markers.

In some cases we might need to brighten a shade rather than adding color. For example, lightening the buttons instead of coloring might be best way to increase contrast without causing confusion, but if someone can manage to color them and account for all of the styles I listed above then it becomes an option.

There are some other solid ideas you mentioned such as adding a lighter line to highlight the difference between the sidebar and bg, adding color to the highlighted text and progress bar. These just need to be mocked up and tested, but seem to be less important than title bars and loop markers which we have received several complaints on.

Hope this helps.

[jibin1573]

Personally, I like the active buttons to light up, like in FL studio, Mixx etc. Example of MIXX DJ software:

Play button not active:

Play Button Active:

FL Studio Active buttons:

and an example for LMMS: Pencil Button Active and selection button inactive:

Pencil Button inactive and selection button active:

But these PNGs cannot be implemented on the 'Auto scroll' button and Loop Indicator button properly. The PNG behind these buttons are too small and looks bad when implemented. Like this: Loop button active (when implemented through PNG):

[musikBear]

@jibin1573 I support the active-button idea. That said, i have to add, that your UI is very eye-straining, and honestly would give me a headache, if i used it. You have way to much going on. ...That was actually why i suggested the name 'Vegas'..

An accessibility friendly interface for sight-impaired -like my self, should first and foremost mean one thing: Larger! Ofcause text in tool-tips, and in help, for those that are learning, but also in respect to blocks in song-editor and notes in piano-roll. Then we have Your good idea: Clean and informative marking of active/ selected features! Very good! -And i do not think current icons are too small to be lit up, by a color. Also sight-impaired likes to be able to mark items. For that reason options to select colors for TCOs -just as we have it for B&B, would be beneficial. Actual real support for blind users, is a very different story, but one that would make a real buzz in that segment, indeed!

[jibin1573]

@musikBear, I would have loved to increase the size of things! I even tried increasing the font size of certain text, but there are scaling issues. It has to be done by the actual developers.

[musikBear]

@jibin1573 Yes fonts and point-size are not easy to mod. But text in general is a difficult subject in programs.

[RebeccaDeField]

@jibin1573 @musikBear

I do not see a problem with the brightness of the theme you are working on if it accomplishes what you set out for to make something specifically for contrast.

What I, and some other people on this thread are trying to address, are the changes we might need to make to the current theme to find a happy medium and add additional usability on our end.

We now have a pretty solid list of items that could be tweaked to improve contrast but we still have yet to really get a clear answer on what the most important elements are or if what you listed above is the minimum that needs to be done in order for you to use the default theme at all.

[jibin1573]

@RebeccaDeField, I understand your point fully. The above list that I posted consists of important elements, which might help you' to strike a balance between visibility and aesthetics. And I would like to clarify that my theme is not for colour blind people but for those who want a dark background and light text kind of contrast which includes normal people also. And I did not find it bright at all, might be because I am having RP (night)

[RebeccaDeField]

@jibin1573 Thank you for clarifying.

[musikBear]

@RebeccaDeField Most important for me is text. I still need to bend forward to be able to read names of blocks. I also have 'enhanced-text' ad default win-choice, but in lmms a sad thing happens: In sidebar, items that are longer than displayed, will be downsized. -Not LMMS fault, but aint it stupid.. oh well.. But text in general is an issue for me. Here i have marked the issues Red: cant read Blue: reasonable green ok

Umcaruje has made a great effort to make almost every element CSS modable, 👍 and i have fiddled with that. Our default theme; -Your theme is fine. Once we get to the all-in-one view, this could be addressed again -imo

[tresf]

@musikBear let's not turn this into a wish list please. We're trying to identify @jibin1573's largest concerns with 1.2.0 and address them prior to the 1.2.0 release.

[JohannesLorenz]

Let's tag this to 1.3. It's surely nowhere tested, while stable-1.2 software claims to be tested/stable for ~1 year... I guess (TLDR) it's not even finished.

Compare this to 1.3 stuff that has already been tested, you'll see that the 1.2 label on this isn't fair.

I'll tag this to 1.3 (and remove the 1.2 tag) in 7 days if no one brings a veto (or does so before me).

[zonkmachine]

I agree with moving this to 1.3 .

[zonkmachine]

Not enough action here and this is not critical for the release. This theme and another, lighter one made for visibility, is already there on the sharing platform.

[musikBear]

FYI theres a method for it in win10: https://lmms.io/wiki/index.php?title=LMMS_Settings#Screen_Issues

[zonkmachine]

Maybe these themes could be sorted under their own category on the sharing platform and then we could link to this category in the documentation.

[PhysSong]

Is it desirable to provide an official high-contrast theme? CC @RebeccaDeField

[RebeccaDeField]

@PhysSong in general yes, I'm not currently available to head that up but if I do get some time I will make theming and projects like this easier.

[musikBear]

Imo witch is half-blind .. a high-contrast-Theme, would not help. What LMMS need before it is with accessibility for the sight-impaired, is scaleable UI. we dont need fluid scaling, but an option for 3* current pts menu-text is what LMMS need. Higher contrast will just lower the time before the headache sets in. Atm i can only do like ~20 mins of lmms-time in windows, then i get headache. In Linux its better. The UI is larger, but i have lag in my VirtualBox, so it is still a drag. -I btw magnify firefox'-text to 220% atm.. 🦇

[lookbothways]

Seconding the need for scalable UI and ideally a light-theme, I can't read white text on black easily so currently can't use LMMS for long before getting eye-strain.

[musikBear]

Seconding the need for scalable UI and ideally a light-theme, I can't read white text on black easily so currently can't use LMMS for long before getting eye-strain.

Thanks for the support! And i really want to make you aware of the win10/11 'hack' for double-UI, in case you dont know it: Hold win-key, then tab on + That doubles any UI. Reading UI is definitively much better but the draw-back is that it gets confusing to find elements on screen and that there is a lot of mouse-moving and searching for floating windows like presets and various sub-menus, where you sometimes need to step out of magnify just to find an element. To get out again: Hold win-key, then tab on ESC